HTML <picture> 태그

정의 및 특징

・<picture> 태그는 <img> 요소의

　다중 이미지 리소스(multiple image resources)를 위한

　컨테이너를 정의할 때 사용한다

 

・<picture> 요소는 뷰포트(viewport)의 너비에 따라

　커지거나 작아지는 하나의 이미지를 사용하는 대신

　서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록

　여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해준다

 

・<picture> 요소는 웹 개발자가

　이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로

　반응형 디자인(responsive design)에서 주로 사용한다

 

・<picture> 요소는 0개 이상의 <source> 요소와

　하나의 <img> 요소로 구성되며

　브라우저는 <source> 요소 중에서 해당 뷰포트와 가장 잘 어울리는

　<source> 요소를 다음과 같은 방법을 사용하여 선택한다

　- 브라우저는 <source> 요소들의 속성값을 각각 확인해 나가며

　　조건을 만족하는 첫 번째 <source> 요소를 사용하고

　　나머지 <source> 요소들은 무시한다

　　이때 <img> 요소는 <picture> 요소의 자식 요소 중에서

　　가장 마지막에 위치해야 한다

　　이러한 <img> 요소는 <picture> 요소를 지원하지 않는

　　브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나

　　명시된 <source> 요소가 모두 조건을 만족하지 못할 경우 사용된다

 

・<picture> 태그는 HTML5에서 새롭게 추가된 요소이다

 

 

지원하는 브라우저

38.0	23.0	지원하지 않음	1.0	9.1	25.0

 

예제

<picture>
    <source media="(min-width: 700px)" srcset="/examples/images/test_960.jpg">
    <source media="(min-width: 400px)" srcset="/examples/images/test_575.jpg">
    <img src="/examples/images/test_200.jpg" alt="Test">
</picture>

 

 

■HTML 태그 레퍼런스

HTML 태그 레퍼런스 - MAIN 돌아가기