html5 언어에 새롭게 추가된 태그라고 한다.
<picture>는 화면 크기에 따라 다른 이미지를 보여 줄 때 쓰나 보다.
<source> 태그가 함께 사용한다.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<picture>
<source media="(min-width: 800px;" srcset="nilgi_top.png">
<source media="(min-width: 500px;" srcset="nilgi2_top.png">
<img src="nilgi.png" alt="닐기의 티스토리입니다.">
</picture>
</body>
</html>
사용 예시를 보면
화면 크기가 최소 800일 때 nilgi_top 이미지를 보여주고
화면 크기가 최소 500일 때 nilgi_top2 이미지를 보여준다.
picture를 지원하지 않으면 img를 보여준다.
이 태그는 어느 때 쓰는 걸까? 요즘은 반응형이라 이미지가 화면 크기게 맞게 알아서 조정된다 말이지... 음...
언젠간 써 먹을 날이 없겠지 뭐^^