HTML - picture, source 요소

이전에 HTML에서 이미지를 다루는 요소 <img>에 관해 알아봤었다.

 

<picture>는 여러 이미지를 그룹화하고 브라우저가 조건에 따라 적절한 이미지를 선택할 수 있도록 하는 컨테이너 요소이다.

<Img>요소와 함께 사용하며 <source>는 <picture>요소 내부에서 다양한 미디어 소스를 제공하기 위해 사용된다. <picture>외에도 <audio> <video> 태그 내에서도 소스제공을 하기 위한 요소로 사용된다.

<picture>
      <source
        srcset="/src/assets/rwd/small-550.jpg 550w"
        media="(max-width: 500px)"
      />
      <source
        srcset="/src/assets/rwd/medium-1024.jpg 1024w"
        media="(max-width: 768px)"
      />
      <source
        srcset="/src/assets/rwd/large-1600.jpg 1600w"
        media="(max-width: 1280px)"
      />

      <img src="/src/assets/rwd/normal-1920.jpg" alt="" />
    </picture>

 

 

<Picture> 태그를 사용하면 HTML로도 반응형 이미지를 구현할 수 있다. 해당 예제에는 기본적으로 해변사진을 보여주고 있다.

하지만 <source> 태그의 media 속성에 따라 브라우저 크기가 달라지게 되면 srcset 속성에 명시된 이미지로 교체하게 된다.