[ styled-components ] styled-components를 사용하지 않고 viewport 기준으로 img 변경하기

📍 styled-components를 사용하지 않고 viewport 기준으로 img 변경하기

구독신청 페이지를 반응형으로 구성하며 viewport를 기준으로 768px 이하는 모바일 환경, 768px 이상은 데스크탑 환경으로 페이지를 제작하던 중 viewport에 따라 브라우저의 메인 이미지를 다르게 설정해야 하는 방법이 필요했다.

 

그래서, styled-components로 viewport에 따라서 src를 바꿔 줄 수 있는 방법이 있는지 살펴보다 더 간단하게 사용할 수 있는 HTML태그인 <picture>태그가 있었다. 그래서 <picture>태그와 <source>태그를 같이 사용했더니 굳이 styled-components를 사용하지 않고도 원하는 기능을 구현할 수 있었다.

 

우선 <picture> 태그가 무엇인지 간단하게 살펴보자면, 0개 이상의 <source> 요소와 하나의 <img> 요소를 포함하여 다양한 디스플레이/장치 시나리오에 대한 대체 버전의 이미지를 제공한다. 즉, 브라우저는 <picture>의 자식태그인 <source> 요소를 고려하고, 그중 가장 일치하는 항목을 선택한다. 만약, 일치하는 항목이 없거나 브라우저가 <picture> 요소를 지원하지 않을 경우 <img> src 속성을 선택한다. 한마디로 <picture>의 하위태그에서 <source>의 기준을 충족하면 <source>를 표시하고, <source>의 기준을 충족하지 못하면 <img> 태그를 사용한다는 말이다.

728x90

결론적으로 하단 코드 블록에서는 viewport가 min-width: 768px보다 작다면 <source>태그의 srcset를 사용하고, viewport가 min-width: 768px보다 크다면 <source>태그 기준에 충족되지 않기 때문에 <img>태그를 사용한다는 뜻이다. 자세한 사용방법은 하단 코드를 참고하자!

 

여담으로 <source>를 언제쓰는지 잘 몰랐는데, Media 혹은 img 태그를 사용할 때 쓴다. 여기서 Media는 <video>, <audio> 등을 말한다. 그리고 <source>에는 type property를 명시하는데 이때, MIME resource를 사용한다. 또, <source>태그에는 src 혹은 srcset property가 사용되는데 src property는 부모 태그가 <audio> 혹은 <video> 태그일 때 사용하고, 부모 태그가 <picture> 일 때는 사용하지 않는다. 또한 srcset property는 부모 태그가 <picture> 태그일 때 사용한다. 부모 태그가 <audio> 혹은 <video> 태그일 때는 사용하지 않는다.

 

<picture>
  <source width="100%" type="image/jpeg" media="(min-width: 768px)"
    srcSet={`${NEWSLETTER_IMG.deskTop}`} />
  <img width="100%" alt="subscribe-img"
    src={`${NEWSLETTER_IMG.mobile}`} />
</picture>

하단 CodePen 환경에서는 viewport를 따로 조정 할 수가 없다. 따라서 0.5x와 0.25x를 눌러보면서 비교해보자! 0.5x는 모바일버전, 0.25x는 PC버전이라고 보면된다!

See the Pen picture + source tag by an (@YWTechIT) on CodePen.

 

Reference

1. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
2. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
3. https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
4. https://www.imdb.com/title/tt0816692/
5. https://www.unrealengine.com/marketplace/ko/product/black-hole-creator