반응형이미지

srcset attribute를 이용해서 반응형 이미지 만들기

무엇을? CSS media 쿼리가 아닌 HTML만을 이용하여 반응형 이미지를 만들어 보고 싶다. 일단 부모elements로 picture태그를 사용해준다. 그 밑에 source 태그를 사용하고, 그 안의 attrubute로 srcset으로 사진파일의 이름, media attribut로 min-width를 지정해준다. min-width는 최소 넓이로, 960px로 설정했다면 최소 넓이가 960px에 도달할 때 까지 srcset에 지정해준 사진을 사용해. 라는 뜻 화면 넓이가 960px에 도달할 때 까지는 > 과카몰리_600.JPG 사진이 나온다. 화면을 줄여 넓이가 620px에 닿을 때 까지는 > 과카몰리_400.JPG 사진이 나온다. 620보다 더 작아지면 > 기본 이미지로 설정해 둔 과카몰리_200.J..