HTML <그림> 요소
HTML <picture>요소를 사용하면 다양한 장치 또는 화면 크기에 대해 다른 그림을 표시할 수 있습니다.
HTML <그림> 요소
HTML <picture>요소를 사용하면 웹 개발자가 이미지 리소스를 보다 유연하게 지정할 수 있습니다.
요소는 속성 을 통해 각각 다른 이미지를 참조하는 하나 이상의 요소를 포함 <picture>합니다 . 이런 식으로 브라우저는 현재 보기 및/또는 장치에 가장 잘 맞는 이미지를 선택할 수 있습니다.<source>srcset
각 <source>요소에는
media이미지가 가장 적합한 시기를 정의하는 속성이 있습니다.
예시
다양한 화면 크기에 대해 다른 이미지 표시:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
참고: 항상 <img>요소를 요소의 마지막 자식 요소로 지정하십시오 <picture>. 요소 는 요소를 지원하지 않거나 일치 하는 태그 <img>가 없는 브라우저에서 사용됩니다 .<picture><source>
그림 요소를 사용하는 경우
<picture>요소 에는 두 가지 주요 목적이 있습니다 .
1. 대역폭
화면이 작거나 기기가 작은 경우 큰 이미지 파일을 로드할 필요가 없습니다. 브라우저는 <source>
속성 값이 일치하는 첫 번째 요소를 사용하고 다음 요소를 무시합니다.
2. 포맷 지원
일부 브라우저 또는 장치는 모든 이미지 형식을 지원하지 않을 수 있습니다. 요소 를 사용하여
<picture>모든 형식의 이미지를 추가할 수 있으며 브라우저는 인식하는 첫 번째 형식을 사용하고 다음 요소를 무시합니다.
예시
브라우저는 인식하는 첫 번째 이미지 형식을 사용합니다.
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
참고: 브라우저는 <source>속성 값이 일치하는 첫 번째 요소를 사용하고 다음 <source>요소를 무시합니다.
HTML 이미지 태그
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
사용 가능한 모든 HTML 태그의 전체 목록을 보려면 HTML 태그 참조 를 방문하십시오 .