목차
- <picture> 예제 - 해상도에 따라 다른 이미지 표시
- <picture> 정의
- <picture> 구문
- <picture> 예제 - 픽처 태그에 링크 걸기
<picture> 예제 - 해상도에 따라 다른 이미지 표시
<picture>
<source media="(min-width: 650px)" srcset="https://i.imgur.com/3h0LOk9.gif"><!--능글-->
<source media="(min-width: 465px)" srcset="https://i.imgur.com/YrkG5xB.gif"><!--키스-->
<img src="https://i.imgur.com/PQNhCln.gif" alt="Flowers" style="width:auto;"><!--협박-->
</picture>
결과보기
<picture> 정의
viewport (뷰포트: 사용자에게 보이는 웹페이지 영역) 크기에 따라 다른 이미지 표시 지정.
1.
- <picture> 태그는 1개 이상의 <source> 태그와 1개의 <img> 태그를 자식요소로 가짐.
- <source> 태그의 media 속성값이 현재 viewport와 일치 시 srcset 속성에 지정된 이미지가 표시됨.
- 만약, <source> 태그의 media 속성값이 현재 viewport와 일치하는 경우가 없는 경우엔 기본적으로 <img> 태그의 src 속성에 지정된 이미지가 표시됨.
2. cf. 이미지 관련 태그
- <img> 태그 - 이미지 정의
- <map> 태그 - 이미지맵 정의
- <area> 태그 - 이미지맵 안에 클릭할 영역 정의
- <picture> 태그 - 여러 이미지 리소스 위한 컨테이너 정의
3.
4. MDN <picture> 예제보기
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
<picture> 구문
<picture>
<source media="(viewport_1)" srcset="img1_url">
<source media="(viewport_2)" srcset="img2_url">
...
<img src="basic_img_url" alt="altText" style="width:auto;">
</picture>
PS. media 속성 viewport 적을 때, 소괄호 누락하면 적용 X (예제)
[속성]
<picture> 예제 - 픽처 태그에 링크 걸기
[예제1] - <a> 태그 이용
<a href="https://homzzang.com/b/html-339" target="_blank">
<picture>
<source media="(min-width: 650px)" srcset="https://i.imgur.com/3h0LOk9.gif"><!--능글-->
<source media="(min-width: 465px)" srcset="https://i.imgur.com/YrkG5xB.gif"><!--키스-->
<img src="https://i.imgur.com/PQNhCln.gif" alt="Flowers" style="width:auto;"><!--협박-->
</picture>
</a>
결과보기
[예제2] - windown.open() 이용
<picture onclick="window.open('https://homzzang.com/b/html-339', '_blank')">
<source media="(min-width: 650px)" srcset="https://i.imgur.com/3h0LOk9.gif"><!--능글-->
<source media="(min-width: 465px)" srcset="https://i.imgur.com/YrkG5xB.gif"><!--키스-->
<img src="https://i.imgur.com/PQNhCln.gif" alt="Flowers" style="width:auto;"><!--협박-->
</picture>
결과보기
