아트 디렉션

Katie Hempenius

이 데모 사용해 보기

• 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면 을 누릅니다.
• 다양한 브라우저 크기를 사용하여 앱을 새로고침합니다. 이미지가 얼마나 다른지 살펴보세요. 크기뿐만 아니라 자르기와 가로세로 비율도 다릅니다.

어떻게 된 것일까요?

아트 디렉션은 디스플레이 크기에 따라 서로 다른 이미지를 표시합니다.

반응형 이미지는 동일한 이미지의 다양한 크기를 로드합니다. 아트 디렉션은 한 단계 더 나아가 디스플레이에 따라 완전히 다른 이미지를 로드합니다.

아트 디렉션을 사용하여 시각적 프레젠테이션을 개선합니다. 예를 들어 이 데모의 다양한 이미지 자르기를 사용하면 디스플레이에 관계없이 관심 장소 (꽃)가 항상 세부적으로 표시됩니다. 아트 디렉션의 이점은 순전히 미학적입니다. 반응형 이미지에 비해 성능 이점을 제공하지는 않습니다.

코드 보기

• index.html에서 이 데모의 아트 디렉션 코드를 확인하세요.

코드 작동 방식

아트 디렉션은 <picture>, <source>, <img> 태그를 사용합니다.

사진

<picture> 태그는 0개 이상의 <source> 태그와 하나의 <image> 태그를 위한 래퍼를 제공합니다.

소스

<source> 태그는 미디어 리소스를 지정합니다.

브라우저는 true를 반환하는 미디어 쿼리와 함께 첫 번째 <source> 태그를 사용합니다. 일치하는 미디어 쿼리가 없으면 브라우저는 <img>로 지정된 이미지를 로드하는 대체로 전환됩니다. 태그 바로 앞에 추가해야 합니다.

img

<img> 태그를 사용하면 이 코드가 <picture> 태그를 지원하지 않는 브라우저에서 작동합니다.

브라우저가 <picture> 태그를 지원하지 않으면 <img> 태그로 지정된 이미지를 로드합니다.