srcset 태그를 이용하여 반응형 이미지 만들기

css가 아닌 html 태그만을 사용하여 반응형 이미지를 만들어 보고 싶다.

    <picture>
      <source srcset="과카몰리_600.JPG" media="(min-width:960px" />
      <source srcset="과카몰리_400.JPG" media="(min-width:620px" />
      <img src="과카몰리_200.JPG" alt="" />
    </picture>

• 화면 넓이가 960px에 도달할 때 까지는 > 과카몰리_600.JPG 사진이 나온다.

-화면을 줄여 넓이가 620px에 닿을 때 까지는 > 과카몰리_400.JPG 사진이 나온다.

• 그것보다 620보다 더 작아지면 > 과카몰리_200.JPG 사진이 나온다.

*주의점: 코드작성시 보통 큰 사진부터 차례로 아래로 내려오도록 한다. (라고 배웠는데.. 밑에 잘 정리되어있어 도움받은 사이트에서는 작은 크기 이미지부터 순서대로 입력하라고 나온다.)

HTML IMG의 srcset과 sizes 속성(updated)