HTML <그림> 태그
예시
<picture> 태그를 사용하는 방법:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
정의 및 사용
태그를 사용 <picture>하면 웹 개발자가 이미지 리소스를 보다 유연하게 지정할 수 있습니다.
요소 의 가장 일반적인 용도는 <picture>반응형 디자인의 아트 디렉션입니다. 뷰포트 너비에 따라 확대 또는 축소되는 하나의 이미지를 갖는 대신 브라우저 뷰포트를 더 멋지게 채우도록 여러 이미지를 디자인할 수 있습니다.
<picture>요소에는 하나 이상의
<source> 태그와 하나의 <img> 태그 라는 두 개의 태그가 있습니다 .
브라우저는 미디어 쿼리가 현재 뷰포트 너비와 일치하는 첫 번째 <source> 요소를 찾은 다음 적절한 이미지(srcset 속성에 지정됨)를 표시합니다. <img> 요소는 <picture>소스 태그와 일치하지 않는 경우 대체 옵션으로 요소의 마지막 자식으로 필요합니다.
팁: 요소 는 <picture><video> 및 <audio>와 "유사하게" 작동합니다. 다른 소스를 설정하고 기본 설정에 맞는 첫 번째 소스가 사용 중인 소스입니다.
브라우저 지원
표의 숫자는 요소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
전역 속성
<picture>태그는 HTML의 전역 속성도 지원 합니다 .
이벤트 속성
<picture>태그는 HTML의 이벤트 속성 도 지원합니다 .
관련 페이지
HTML 튜토리얼: HTML <picture> 요소
CSS 튜토리얼: CSS 반응형 디자인 - 이미지