html5 <picture> 태그 알아보기

 

<picture> 태그는 html5에서 새롭게 추가된 태그이고,

미디어 쿼리에 따라 표현하고자 하는 이미지를 표현할 수 있다.

반응형으로 미디어쿼리를 제어 했을때 뷰포트 크기에

따라서 보여주고자 하는 이미지를 마크업에서 제어한다.

 

<picture> 코드의 구성은 아래와 같다.

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

 

브라우저는 <source> 의 요소들의 속성값을 하나씩 확인해서 첫번째 요소부터 사용한다.

각각 <source>에 뷰포트를 지정해주고 srcset에 이미지 경로를 적어준다.

여기서 <img> 요소는 자식 요소에서 가장 마지막에 위치하면 된다.

위 <img>는 <picture>태그를 지원하지 않는 브라우저의 하휘 호환성을 위해 사용되거나,

위 <source>가 모두 만족하지 않을때 <img> 태그에 있는 것을 보여준다.

 

 

https://www.tcpschool.com/html-tags/picture

코딩교육 티씨피스쿨