본문 바로가기

Webstoryboy

Category

Explanation

REFERENCE/HTML

[HTML] <picture>

<picture>

<picture> 태그는 화면 크기에 따라 이미지를 정의합니다. 웹 사이트에서 이미지를 표현 할 수 있는 방법은 여러가지 있습니다. <img>, <picture>, <figure> 태그와 background를 통해서도 이미지를 표현 할 수 있습니다. 이미지를 불러올 때는 <img> 태그, 이미지를 표현할 때는 <figure> 태그, 이미지를 화면 크기에 따라 설정할 때는 <picture> 태그를 사용합니다.

<picture> 태그는 반응형 사이트와 관련이 있으면 화면 크기에 따라 그에 맞는 이미지를 보여주는 태그입니다. <source> 태그와 같이 사용하며 미디어 쿼리를 통해 표현합니다.


<picture>

<picture> 태그는 화면 크기에 따라 이미지를 정의합니다.

정의(Definition)

  • <picture> 태그는 화면 크기에 따라 이미지를 정의합니다.
  • <picture> 태그는 <source> 태그와 같이 사용합니다.
  • <img> 태그의 srcset 속성을 이용하면 해상도에 따른 이미지를 표현 할 수 있습니다.

비교(Compare)

  • 이미지를 불러온다면 <img> 태그를 사용합니다.
  • 이미지를 표현한다면 <figure> 태그를 사용합니다.
  • 이미지에 대한 설명을 표현한다면 <figcaption> 태그를 사용합니다.
  • 화면 크기에 따라 이미지를 표현한다면 <picture> 태그를 사용합니다.

Sample1

화면 사이즈 별로 이미지가 변경되는 예제입니다.

결과
이미지
html
<picture>
    <source srcset="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover01.jpg" media="(max-width: 600px)">
    <source srcset="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover02.jpg" media="(max-width: 1000px)">
    <source srcset="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover03.jpg" media="(max-width: 1200px)">
    <img src="https://tistory4.daumcdn.net/tistory/2933724/skin/images/hover04.jpg" alt="이미지">
</picture>

호환성(Compatibility) 더보기 caniuse.com

크롬 아이콘 파이어폭스 아이콘 사파리 아이콘 오페라 아이콘 네이버 웨일 익스플로러6 아이콘6 익스플로러7 아이콘7 익스플로러8 아이콘8 익스플로러9 아이콘9 익스플로러10 아이콘10 익스플로러11 아이콘11 엣지 아이콘 안드로이드 아이콘 ios 아이콘
<picture> 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능

참고(Reference)

  • MDN
  • HTML

Tag

AD

comments