여러 슬롯 너비 지정

Katie Hempenius

이 데모 사용해 보기

• 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면을 누릅니다.

• 크기가 다른 브라우저 창에서 앱을 새로고침하여 브라우저가 다른 이미지를 로드하고 브라우저 크기에 따라 다른 레이아웃을 사용하는지 확인합니다.

코드 보기

• index.html에서 이를 실행하는 코드를 확인합니다.

<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

어떻게 된 것일까요?

sizes 속성의 값에 따라 이미지 표시 너비는 최대 480px 너비의 뷰포트에서는 '뷰포트 너비의 100%', 481~1024px 너비의 화면에서는 '뷰포트 너비의 50%', 1024px보다 큰 화면에서는 800px입니다. 이 너비는 CSS에 지정된 너비와 일치합니다.

여러 개의 슬롯 너비를 지정할 수 있는 기능은 다양한 표시 영역 크기에 서로 다른 스타일(예: 이미지 너비)을 사용하는 페이지 레이아웃을 수용합니다.

여러 슬롯 너비를 지정하는 방법

• 쉼표로 구분된 목록을 사용하여 여러 슬롯 너비를 지정하세요. 마지막 항목을 제외한 각 목록 항목은 미디어 조건(예: max-width 또는 min-width)과 슬롯 너비로 구성됩니다.
• 이 목록의 마지막 항목은 기본 슬롯 너비입니다. 이는 기본값이므로 미디어 조건을 지정할 필요가 없습니다.
• 슬롯 너비를 원하는 만큼 나열할 수 있습니다. srcset에 나열된 이미지 수는 중요하지 않습니다.

• 슬롯 너비는 다양한 단위를 사용하여 지정할 수 있습니다. 다음은 모두 유효한 너비입니다.

• 100px

• 33vw

• 20em

• calc(50vw-10px)

다음은 유효한 너비가 아닙니다.

• 25%(크기 속성에는 비율을 사용할 수 없음)