<picture> 태그

📒 Picture 태그가 무엇인가요?

뷰포트의 너비에 따라 커지거나 작아지는 하나의 이미지를 사용하는 대신에 다양한 디스플레이나 기기에서 해당 뷰포트에 알맞게 채워질 수 있도록 여러 개의 이미지 중에서 적절한 이미지를 사용할 수 있도록 해주는 태그입니다.

반응형 디자인에 주로 사용됩니다. 😀

😀 Picture 태그는 어떻게 사용하나요?

0개 이상의 source 태그와 하나의 img 태그로 구성하여 사용합니다.

예제
<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>

🤭 주의할 점은 무엇인가요?

브라우저는 순서대로 태그를 읽어나가기 때문에 sourc 태그의 속성값을 확인합니다. 조건을 만족하는 첫 번째 source 태그를 읽고, 나머지 source 태그는 무시합니다.

이 때 img 태그는 picture 요소의 자식 태그 중에서 가장 마지막에 위치해야 합니다.

img 태그는는 picture 태그를 지원하지 않는 브라우저를 위한 하위 호환성(backward compatibility)을 위해 사용되거나 명시된 source 태그가 모두 조건을 만족하지 못 할 경우 사용됩니다.

---

위코드 1차 프로젝트를 진행하던 중, 반응형 이미지 태그를 공부하다가 picture 태그를 알게 되었다 🤔 이걸 활용해서 반응형 홈페이지를 구현해보고 싶은데, 아직 할 게 산더미라.. 활용할 수 있을 지는 모르겠지만..ㅎ.

하나씩 다 해봐야겠다.