Html picture tag 🏞

picture tag는 media query의 내용에 따라 표현하고자 하는 이미지를 표현할 수 있습니다.

반응형으로 페이지를 제작하여야 할때 viewport의 크기에 따라 원하는 이미지를 보여줄 수 있을것 같습니다.

html5 에서 등장하였으며 버전이 낮은 하위 브라우저에서는 지원하지 않으므로 미리 확인해보고 적용하여야 합니다.

 

기본 쓰임새는 아래와 같습니다.

<picture>
    <source media="(max-width:300px)" srcset="./images/cayenne.jpeg">
    <source media="(max-width:500px)" srcset="./images/user.jpg">
    <source media="(max-width:700px)" srcset="./images/clothes.png">
    <img src="./images/spider-man-shooting.png" style="width: 300px; height: 300px;">
</picture>

 

picture 태그 내부에는 source 태그와 img 태그가 위치합니다.

source, img 둘다 닫힌 태그이므로 따로 닫는 태그는 추가해주지 않아도 됩니다.

source의 media attribute에서 True를 반환하면 true를 반환한 source태그의 srcset이 화면에 나타나게 됩니다.

 

맨 아래에 img 태그를 추가해주는 이유는 두가지 입니다.

1. 위의 source 태그들이 전부 false를 반환하였을 경우 출력값

2. 필수 추가 요소 (img 태그를 추가해 주지 않으면 화면에 출력되지 않습니다.)

 

아래에 사용하는 예시를 첨부해 두었습니다.

 

 

https://codesandbox.io/s/twilight-wind-bcutk0?file=/index.html&resolutionWidth=714&resolutionHeight=675

 

반응형 페이지를 제작할때 picture 태그를 활용하면 효율적으로 사용할 수 있을것 같습니다.

 

출처: https://www.w3schools.com/tags/tag_picture.asp

HTML picture tag