Katie Hempenius
데모 사용해 보기
- 사이트를 미리 보려면 View App을 누른 다음 Fullscreen
을 누릅니다. - 다양한 브라우저 크기를 사용하여 앱을 새로고침합니다. 이미지의 차이에 주목하세요. 크기는 물론 자르기 및 가로세로 비율도 다릅니다.
어떻게 된 것일까요?
아트 디렉션은 다양한 디스플레이 크기에서 다양한 이미지를 표시합니다.
반응형 이미지는 동일한 이미지의 다양한 크기를 로드합니다. 아트 디렉션은 한 걸음 더 나아가 디스플레이에 따라 완전히 다른 이미지를 로드합니다.
아트 디렉션을 사용하여 시각적 표현을 개선합니다. 예를 들어 이 데모에서 여러 가지 이미지를 잘라낸 덕분에 관심 장소 (꽃)가 디스플레이와 관계없이 항상 자세히 표시됩니다. 아트 디렉션의 이점은 순전히 미적 측면입니다. 즉, 반응형 이미지에 비해 성능상의 이점은 없습니다.
코드 보기
- 이 데모의 아트 디렉션 코드를 보려면
index.html에서 확인하세요.
코드의 작동 방식
아트 디렉션은 <picture>, <source>, <img> 태그를 사용합니다.
사진
<picture> 태그는 0개 이상의 <source> 태그와 1개의 <image> 태그를 위한 래퍼를 제공합니다.
source
<source> 태그는 미디어 리소스를 지정합니다.
브라우저는 첫 번째 <source> 태그를 true를 반환하는 미디어 쿼리와 함께 사용합니다. 일치하는 미디어 쿼리가 없으면 브라우저는 <img>에서 지정한 이미지를 로드하는 방식으로 돌아갑니다.
태그 바로 앞에 추가해야 합니다.
img
<img> 태그를 사용하면 이 코드가 <picture> 태그를 지원하지 않는 브라우저에서 작동합니다.
브라우저가 <picture> 태그를 지원하지 않으면 <img> 태그로 지정된 이미지를 로드합니다.