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

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

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

 

3.

전역속성과 이벤트속성 지원.

 

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