여러 슬롯 너비 지정

Katie Hempenius

데모 사용해 보기

• 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 을 누릅니다.

• 브라우저가 다른 이미지를 로드하고 브라우저 크기별로 다른 레이아웃을 사용하려면 앱을 다른 크기의 브라우저 창에서 새로고침합니다.

코드 보기

• 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 속성의 값은 이미지 표시 너비가 최대 너비 480픽셀인 표시 영역에서는 '표시 영역 너비의 100%', 너비가 481~1,024픽셀인 화면에서는 '표시 영역 너비의 50%', 1,024픽셀보다 넓은 화면에서 800픽셀이 되도록 지정합니다. 이러한 너비는 CSS에 지정된 너비와 일치합니다.

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

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

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

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

• 100px

• 33vw

• 20em

• calc(50vw-10px)

다음은 올바른 너비가 아닙니다.

• 25% (비율은 크기 속성과 함께 사용할 수 없음)