css 공부: PC버전, 모바일버전 이미지를 따로 보여줄 때

<picture> 태그 알아보기

<picture> 태그는 html5에서 새롭게 추가된 태그입니다.
PC버전, 모바일버전 이미지를 따로 보여줄 때 사용됩니다.

<picture>
  <source media="(min-width: 768px)" srcset="./image/contents.jpg" />
  <source media="(min-width: 480px)" srcset="./image/contents.jpg" />
  <img src="./image/contents.jpg" width="240" height="240" />
</picture>