[image] HTML - <picture> 태그 - 해상도 크기에 따라 다른 이미지 표시 지정 (= picture태그 = 픽처태그) ※ 뷰포트별 별도 이미지 지정

1. <picture> 예제 - 해상도에 따라 다른 이미지 표시
2. <picture> 정의
3. <picture> 구문
4. <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.

• IE 제외한 주요 최신 브라우저 모두 지원.

 

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>

 

결과보기