이미지를 올리기 위해서는 <img> 태그만 사용해왔는데, <picture> 태그라는 반응형 사이트에서 사용하기 유용한 태그를 발견하여 해당 태그를 정리하고자 한다!
<picture> 태그
<picture> 요소는 뷰포트(viewport)의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신 서로 다른 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해줍니다. 이러한 <picture> 요소는 웹 개발자가 이미지의 리소스를 보다 유연하게 지정할 수 있도록 해주므로, 반응형 디자인(responsive design)에서 주로 사용합니다.
<picture> 요소는 0개 이상의 <source>요소와 하나의 <img> 요소로 구성되며, 브라우저는 <source> 요소 중에서 해당 뷰포트와 가장 잘 어울리는 <source> 요소를 다음과 같은 방법을 사용하여 선택합니다.
브라우저는 <source> 요소들의 속성값을 각각 확인해 나가며 조건을 만족하는 첫 번째 <source> 요소를 사용하고, 나머지 <source> 요소들은 무시합니다. 이 때 <img> 요소는 <picture> 요소의 자식 요소 중에서 가장 마지막에 위치해야 합니다. 이러한 <img> 요소는 <picture> 요소를 지원하지 않는 브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나 명시된 <source> 요소가 모두 조건을 만족하지 못 할 경우 사용됩니다.
주의
<picture>태그는 그 단어의 의미인 picture(사진)와는 직접적인 관계가 없습니다. 하나의<img>태그에 대해 0개 이상의 반응형 이미지를 제공하는<source>태그의 범위를 알려주는 컨테이너(부모 요소)라는 의미일 뿐입니다.
<html>
<picture>
<source media="(min-width: 700px)" srcset="/examples/images/people_960.jpg">
<source media="(min-width: 400px)" srcset="/examples/images/people_575.jpg">
<img src="/examples/images/people_200.jpg" alt="People">
</picture>
// 위 예제는 <picture> 태그에 <source> 태그와 <img> 태그, 그리고 <script> 태그를 모두 사용한 예제
</html>