자막이 있는 이미지 만들기
HTML5 이전에는 이미지에 자막(설명글)을 추가하기 위해 img 태그와 함께 별개의 텍스트 요소를 추가해주어야 했습니다.
<body>
<img src="penguin.png"> <br>
<span>펭귄</span>
</body><img> 요소는 인라인 요소이므로 <br>을 추가해주었습니다.
HTML5에서는 이미지를 비롯해 오디오, 비디오 등의 독립적인 콘텐츠에 자막을 추가해 표시할 수 있는 <figure>와 <figcaption> 태그가 추가되었습니다. 자막을 담당하는 <figcaption> 태그와 콘텐츠(이미지) 태그가 <figure> 태그에 포함되는 방식으로 사용되며, 이는 자막과 콘텐츠를 함께 관리하기 좋은 편리한 방식입니다. <figure> 태그를 이용해 표시한 콘텐츠는 왼편에 조금의 여백이 추가됩니다.
<body>
<figure>
<img src="penguin.png">
<figcaption>펭귄</figcaption>
</figure>
</body><figcaption> 요소로 자막을 추가할 때는 <br>을 추가하지 않아도 개행 처리가 됩니다.
여러 이미지 중 선택하게 하기
HTML5의 <picture> 태그 또한 이미지 소스를 감싸는 역할을 합니다. 그리고 그 안에는 여러 개의 <source> 태그를 사용해 화면 크기 별로 사용할 수 있는 여러 개의 이미지를 포함시킬 수 있습니다.
<body>
<picture>
<source media="(max-width: 375px)" srcset="image1.png">
<source media="(max-width: 768px)" srcset="image2.png">
<source media="(max-width: 1024px)" srcset="image3.png">
</picture>
</body>
위 예제처럼 하나의 <picture> 태그의 안에 세 개의 <source> 태그를 포함하면, 결과가 렌더링되는 화면의 크기에 따라 세 이미지 중 하나의 이미지 만이 선택되어 화면에 표시됩니다.
<source> 태그의 media 속성은 화면 크기에 대한 조건을 지정할 수 있는 속성으로, 여기에 쓰인 max-width란 '최대 크기'를 의미합니다. 최대 크기가 375px이라는 것은 375px 이하라는 조건을 의미합니다. srcset 속성은 이미지의 URL을 지정할 수 있는 속성입니다. 결과적으로 위 예제에서는 375px 이하의 화면에서는 image1.png를, 375px 이상 768px 이하의 화면에서는 image2.png를 화면에 표시하게 됩니다.
<picture> 태그는 HTML5에 추가된 태그이므로 때때로 오래된 브라우저에서 사용이 불가한 경우가 발생할 수 있습니다. 그럴 때는 태그 내부에 <source>가 아닌 <img> 태그를 추가해 줍니다. 그렇게 하면 오래된 브라우저는 <picture>와 <source>를 무시하고 <img> 태그에 작성된 내용을 토대로 이미지를 표시할 것입니다.
<body>
<picture>
<source media="(max-width: 375px)" srcset="image1.png">
<source media="(max-width: 768px)" srcset="image2.png">
<source media="(max-width: 1024px)" srcset="image3.png">
<img src="penguin.png" alt="source의 모든 조건이 맞지 않거나 브라우저 호환 문제가 있을 때">
</picture>
</body>
모든 <source>의 media 조건이 맞지 않을 때에도 브라우저는 <img> 태그의 내용을 토대로 이미지를 표시할 수 있기에 <picture> 태그에는 항상 <img> 태그를 하나씩 추가해 주는 것이 좋습니다.