[HTML5] 미디어의 크기에 따라 다른 이미지를 보여주는 <picture> 태그

<picture>태그는 HTML5에서 새롭게 등장한 태그로서 화면 사이즈에 따라 각기 다른 이미지를 출력 할때 사용한다.

아래 코드에서 media 속성에 화면의 크기를 설정해 준다.

미디어 쿼리를 사용할 떄와 같이 min-width, max-width를 이용하여 화면 크기의 범위를 셋팅 해주면 된다.

다음 예제는

- 화면크기가 1024px이상에서는 img_01.jpg를 출력

- 768px에서 1024px까지는 img_02를 출력

- 769px이하에서는 img_03을 출력한다.

<picture>
  <source media="(min-width: 1024px)" srcset="img_01.jpg">
  <source media="(min-width: 768px)" srcset="img_02.jpg">
  <img src="img_03.jpg">
</picture>

그다지 많이 사용하지 않는 태그이기는 하지만 PC화면과 스마트폰 화면, 태블릿 화면 등에서 다른 이미지를 보여줘야 할 경우에는 유용하게 사용할 수 있다.