<picture> 반응형 홈페이지에 배너를 적용할때 필요한 Css 태그

<picture>태그는 웹과 모바일에서 배너를 해상도 별로 다른 배너 이미지를 적용 시킬 때 사용합니다

 

예시로는 

<picture>

              <source media="(max-width: 400px)" srcset="mobile1.png">

              <source media="(max-width: 800px)" srcset="mobile2.png">

              <source media="(max-width: 1200px)" srcset="mobile3.png">

              <img src="web1.png">

</picture>

 

midia에 "max-width: ??px" 이나 "min-width: ??px"로 원하시는 넓이 값마다 변하게 설정을 하고srcset에 변경할 이미지 경로를 설정해주시면 됩니다.기본값은 img태그 그대로 쓰시면 됩니다