여러 슬롯 너비 지정

Katie Hempenius
Katie Hempenius
X

이 데모 사용해 보기

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

  • 다른 크기의 브라우저 창에서 앱을 새로고침하여 브라우저 로드 확인 다양한 이미지를 사용하고 여러 브라우저 크기에서 다른 레이아웃을 사용할 수 있습니다.

코드 보기

  • 이를 가능하게 하는 코드는 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 속성 값은 이미지 표시 너비를 다음과 같이 지정합니다. '표시 영역 너비의 100%' 최대 너비 480px의 표시 영역에서는 너비" 481~1024px 화면, 1024px보다 넓은 화면 800px 이러한 CSS에 지정된 너비와 일치합니다.

여러 슬롯 너비를 지정하는 기능은 표시 영역 크기별로 다른 스타일 (즉, 이미지 너비)을 지정할 수 있습니다.

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

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

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

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

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

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