이 포스트는 HTML5에서 추가된 <picture> … </picture> 태그에 관한 내용입니다.
이 태그는 기기의 환경에 따라 이미지를 다르게 표시하기 위해 고안된 태그입니다. 반응형 CSS 만들기 포스트에서 CSS에 미디어쿼리를 지정하여 기기의 환경에 따라 다른 모양으로 표시되는 페이지를 구현하는 방법을 서술한 바 있습니다. 본문 내 이미지에도 미디어쿼리를 이용하여 다른 이미지를 표시하는 기능이 있습니다.
일단, 다음 코드를 봅시다.
<picture> <source media="(min-width: 961px)" srcset="cov_snowflake.jpg" /> <source media="(min-width: 481px)" srcset="cov_flowerbud.jpg" /> <img src="cov_glass.jpg" width="300" height="300" /> </picture>
이 코드를 해석하자면, picture 태그 안의 cov_snowflake.jpg, cov_flowerbud.jpg, cov_glass.jpg 셋 중 하나를 기기의 환경에 따라 선택하여 표시하는 코드입니다. 먼저 최소 폭이 961px인 경우(즉, 폭 961px 이상)는 cov_snowflake.jpg 파일을, 그 다음으로 최소 폭이 481px인 경우(즉, 폭 481px 이상)는 cov_flowerbud.jpg 파일를, 그 외의 경우는 기본값인 cov_glass.jpg 파일을 표시합니다.
이 코드는 다음과 같이 표시됩니다.
모바일 테스트 기능을 이용하거나 브라우저의 폭을 조절해 보면 다르게 표시되는 이미지를 확인할 수 있을 것입니다.
주의: 이 태그는 인터넷 익스플로러와 엣지 12, 사파리 9.0 이전 버전에서는 지원하지 않아서 기능이 동작하지 않습니다.
여기서 참고할 점이라면 동시에 두 가지 이상의 조건에 해당되는 경우 그 중 가장 앞에 지정된 조건이 적용됩니다. 따라서, 반응형 CSS를 만들 때와는 정반대의 순서로 미디어쿼리를 지정하여야 합니다. 예를 들어, 반응형 CSS를 만들 때 기본 – 481px 이상 – 961px 이상 순으로 미디어쿼리 코드를 작성하였다면 이 태그에서는 반대로 961px 이상 – 481px 이상 – 기본 순으로 작성합니다.