HTML5 & CSS3 : picture 태그, object-fit 속성
2022.10.24.
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 27
Review
- UI/UX 반응형 웹디자인&웹퍼블리셔 개발자 과정 - DAY 27
<object-fit 속성 이론>
: 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한
경우가 있다. 이미지의 비율이 무너지지 않게 조절하고 싶다면 object-fit을 이용하면 된다.
object-fit은 img 태그나 video 태그에 사용하는 속성이다.
너비와 높이값을 입력하고, object-fit 속성만 지정해주면 되니 아주 편리하다.
속성값으로는 fill, contatin, cover, none, scale-down이 있다.
- fill : 기본값. 주어진 너비와 높이에 딱 맞도록 사이즈를 조절한다. 이미지의 가로 세로 비율은
유지되지 않는다.
- contain : 가로 세로 비율을 유지한 채로 사이즈가 조절되지만, 이미지와 컨테이너 간의 비율이
맞지 않는 경우엔 자리가 남게 된다.
- cover : 가로세로 비율을 유지한 채로 사이즈가 조절되며, 비율이 맞지 않더라도 이미지를
확대해 컨테이너를 완전히 채운다.
- none : 아무것도 하지 않고 본래의 이미지 사이즈를 유지한다. 그래도 이미지 가운데가
보여지도록 하는 센스가 있다.
- scale-down : none 또는 contain 중에 더 적절한 방향으로 이미지 사이즈를 조절한다.
picture 태그는 사진 크기에 따라 변화가 있다.
picture 태그 밑에는 source를 넣어야한다.
안에는 media와 srcset 속성이 들어가야 한다.
media에는 사진 크기를 넣어야 하는데 min-width: 1280px 이라고 적으면 최하 1280px이면 그 이미지가 나오고,
<평가 자료 만들기>
와이어 프레임을 먼저 제작한 다음,
프로토타입을 제작했다.