HTML <picture> 요소를 사용하면 다양한 장치 또는 화면 크기에 대해 서로 다른 사진을 표시할 수 있다.
HTML <picture> 요소
HTML <picture> 요소는 웹 개발자가 이미지 리소스를 지정할 때 더 많은 유연성을 제공한다.
<picture> 요소에는 각각 srcset 속성을 통해 서로 다른 이미지를 참조하는 하나 이상의 <source> 요소가 포함됩니다. 이렇게 하면 브라우저는 현재 보기 및/또는 장치에 가장 적합한 이미지를 선택할 수 있습니다.
각 <source> 요소에는 이미지가 가장 적합한 시기를 정의하는 media 속성이 있습니다.
| <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>picture 요소</h2> <picture> <source media="(min-width: 650px)" srcset="img_food.jpg"> <source media="(min-width: 465px)" srcset="img_car.jpg"> <img src="img_girl.jpg" style="width:auto;"> </picture> <p>다양한 뷰포트 크기로 로드되는 다양한 버전의 사진을 보려면 브라우저 크기를 조정합니다. 브라우저는 미디어 쿼리가 사용자의 현재 뷰포트 너비와 일치하는 첫 번째 소스 요소를 찾습니다, 그리고 srcset 특성에 지정된 이미지를 가져옵니다.</p> <p>img 요소는 그림 선언 블록의 마지막 자식 태그로 필요합니다. img 요소는 그림 요소를 지원하지 않는 브라우저나 일치하는 원본 태그가 없는 경우 이전 버전과의 호환성을 제공하는 데 사용됩니다. </p> <p><strong>Note:</strong> IE12 이전 버전 또는 Safari 9.0 이전 버전에서는 그림 요소가 지원되지 않습니다.</p> </body> </html> |
참고: 항상 <img> 요소를 <picture> 요소의 마지막 자식 요소로 지정하십시오. <img> 요소는 <picture> 요소를 지원하지 않는 브라우저에서 사용되거나 <source> 태그가 일치하지 않는 경우에 사용된다.
<picture> 요소를 언제 사용?
<picture> 요소에는 두 가지 주요 용도가 있습니다:
1. Bandwidth
작은 화면이나 장치가 있는 경우 큰 이미지 파일을 로드할 필요가 없다. 브라우저는 속성 값이 일치하는 첫 번째 <source> 요소를 사용하고 다음 요소는 무시한다.
2. Format Support
일부 브라우저 또는 장치는 일부 이미지 형식을 지원하지 않을 수 있다. <picture> 요소를 사용하여 모든 형식의 이미지를 추가할 수 있으며 브라우저는 인식하는 첫 번째 형식을 사용하고 다음 요소는 무시한다.
| <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>The picture Element</h2> <picture> <source srcset="img_avatar.png"> <source srcset="img_girl.jpg"> <img src="img_beatles.gif" alt="Beatles" style="width:auto;"> </picture> <p>이미지 형식이 일부 장치에서 지원되지 않는 경우 그림 요소를 사용할 수 있습니다.</p> <p>장치가 지원하는 첫 번째 이미지 형식을 사용하고 나머지 이미지는 무시합니다.</p> </body> </html> |
참고: 브라우저는 속성 값이 일치하는 첫 번째 <source> 요소를 사용하고 다음의 <source> 요소는 무시한다.
HTML Image Tags
| 태그 | 내용 |
| <img> | 이미지를 정의한다. |
| <map> | 이미지 맵을 정의한다. |
| <area> | 이미지 맵 안의 클릭할 수 있는 영역을 정의한다. |
| <picture> | 다중 이미지 리소스에 대한 컨테이너를 정의한다. |
마무리
HTML 문서 작성 중에 이미지 중 <picture> 요소에 관련해서 살펴보았다.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 페이지 제목(Page Title) (0) | 2023.05.04 |
|---|---|
| HTML 파비콘(Favicon) (0) | 2023.05.03 |
| HTML 배경이미지(Background Images) (0) | 2023.05.01 |
| HTML 이미지 맵(Image Maps) (0) | 2023.04.30 |
| HTML 이미지(Image) (0) | 2023.04.29 |
댓글