HTML <picture> 태그

정의와 사용법

<picture> 태그는 웹 개발자가 지정한 이미지 자원을 더 유연하게 설정할 수 있게 합니다.

<picture> 요소는 가장 흔히 반응형 디자인에서 아트 디렉션에 사용됩니다. 뷰포트 너비에 따라 비례적으로 확대 또는 축소되는 하나의 이미지 대신 여러 이미지를 설계하여 브라우저 뷰포트를 더 잘 채울 수 있습니다.

<picture> 요소는 두 개의 태그를 포함합니다: 하나나 여러 개 <source> 태그 그리고 하나의 <img> 태그。

브라우저는 현재 뷰포트 너비와 일치하는 첫 번째 <source> 요소를 찾아, srcset 속성에서 지정된 올바른 이미지를 표시합니다. <img> 요소는 <picture> 요소의 마지막 자식 요소는 필요하며, 어떤 source 태그와도 일치하지 않을 때 대체 옵션으로 사용됩니다.

안내:<picture> 요소의 작동 방식은 <video> 그리고 <audio> 유사합니다. 다른 원본을 설정할 수 있으며, 선호하는 첫 번째 원본이 사용됩니다.

추가로 참조하세요：

HTML 교본：HTML <picture> 요소

CSS 교본：CSS 응답형 디자인 - 이미지

예제

<picture> 태그 사용 방법:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

직접 시험해 보세요

전역 속성

<picture> 태그는 또한 지원합니다 HTML에서의 전역 속성。

이벤트 속성

<picture> 태그는 또한 지원합니다 HTML에서의 이벤트 속성。

브라우저 지원

표의 숫자는 해당 태그를 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
38.0 13.0 38.0 9.1 25.0