본문 바로가기

position2

[CSS] 이미지 사이즈 맞추기 (object-fit, absolute, background) Grid Units이미지를 컨테이너 안에서 정렬하는 3가지 방법object-fitposition: absolutebackground-size1. object-fit나  같은 오브젝트의 사이즈를 컨테이너의 크기에 맞춰 조절할 수 있어요. 너비와 높이값을 입력하고, object-fit 속성만 지정해주면 되니 편합니다.- 특징 : 이미지 태그나 비디오 태그에 사용 - 장점 : 속성 하나로 설정 가능 - 단점 : IE 미지원 📝 object-fit 형태img { width: 300px; height: 150px; object-fit: fill | contain | cover | none | scale-down;}속성값설명fill기본값주어진 너비와 높이에 딱 맞도록 사이즈를 조절합니다. 이미지의 가로.. 2024. 5. 29.
[CSS] CSS Position 속성 5가지 정리 (static, relative, absolute, fixed, sticky) Position 이란?element 배치하는 방법을 지정해주는 속성이라고 하며static, relative, absolute, fixed, sticky 5가지가 있다.1. staticdefault 값으로 명시되어 있지 않을 경우 position : static; 으로 적용문서의 흐름에 따라 element 배치top, right , bottom, left, z-index 속성에 영향을 받지 않음HTML의 요소가 일반적인 흐름으로 배치되는 속성2. relative문서의 흐름에 따라 element 배치top, right , bottom, left 를 주면 static이었을 때의 위치에서 주어진 값만큼 이동static과 동일하게 일반적인 흐름으로 배치되는 속성차이점은 현재 자신의 위치를 기준으로 배치를 좀 더 .. 2024. 5. 13.
728x90
반응형