<picture>
<picture> 태그는 화면 크기에 따라 이미지를 정의합니다. 웹 사이트에서 이미지를 표현 할 수 있는 방법은 여러가지 있습니다. <img>, <picture>, <figure> 태그와 background를 통해서도 이미지를 표현 할 수 있습니다. 이미지를 불러올 때는 <img> 태그, 이미지를 표현할 때는 <figure> 태그, 이미지를 화면 크기에 따라 설정할 때는 <picture> 태그를 사용합니다.
<picture> 태그는 반응형 사이트와 관련이 있으면 화면 크기에 따라 그에 맞는 이미지를 보여주는 태그입니다. <source> 태그와 같이 사용하며 미디어 쿼리를 통해 표현합니다.
<picture>
<picture> 태그는 화면 크기에 따라 이미지를 정의합니다.
| 특징 | 설명 |
|---|---|
| 요소 | - |
| 닫는 태그 | 닫는 태그 사용(<picture> ~ </picture>) |
| 버전 | HTML5 |
| 시각적 표현 | 해상도에 따른 이미지 표현 |
정의(Definition)
- <picture> 태그는 화면 크기에 따라 이미지를 정의합니다.
- <picture> 태그는 <source> 태그와 같이 사용합니다.
- <img> 태그의 srcset 속성을 이용하면 해상도에 따른 이미지를 표현 할 수 있습니다.
비교(Compare)
- 이미지를 불러온다면 <img> 태그를 사용합니다.
- 이미지를 표현한다면 <figure> 태그를 사용합니다.
- 이미지에 대한 설명을 표현한다면 <figcaption> 태그를 사용합니다.
- 화면 크기에 따라 이미지를 표현한다면 <picture> 태그를 사용합니다.
호환성(Compatibility)
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| <picture> | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용가능 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용안됨 | 사용가능 | 사용가능 | 사용가능 |
