속성 | 의미 | 값 | 특징 |
srcset | 브라우저에게 제시할 이미지 URL과 크기의 목록을 정의 | w, x | |
sizes | 미디어 조건과 해당 조건일 때의 이미지 크기를 정의 |
보통 srcset과 sizes는 반응형 웹을 제작할 때 많이 사용한다.
일반적으로 반응형 웹에서 이미지를 지원하기 위해, ‘미디어쿼리’라고 부르는 CSS Media Rule(@media)에서 background-image 속성을 많이 사용하는데, 반응형 이미지를 처리하기 위해 뷰포트(Viewport)의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야 합니다.
하지만 우리는 HTML IMG의 srcset과 sizes를 통해 쉽게는 이미지의 크기를 설정하는 것만으로 대부분의 고려 사항을 사용자 브라우저(User agent)에 떠넘길 수 있습니다.
'HTML > 요소' 카테고리의 다른 글
멀티미디어 - figure, figcaption (0) | 2021.01.04 |
---|---|
멀티미디어 - IMG 3 - W,X 단위 (0) | 2020.12.29 |
멀티미디어 - IMG 1 (0) | 2020.12.29 |
수정 - DEL, INS (0) | 2020.12.29 |
인라인 텍스트 - BR (0) | 2020.12.29 |