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