유연한 확장

웹 기능: 컨테이너 쿼리 (크기)

개요

유연한 확장을 사용하면 구성요소가 현재 크기에 따라 내부 비율 (예: 글꼴 크기, 간격)을 조정할 수 있습니다. 이렇게 하면 고정된 중단점 사이를 이동하는 것보다 더 일관된 디자인을 만들 수 있습니다.

과거에는 표시 영역 단위를 사용하여 유연한 확장을 구현했지만 (화면 크기에 따라 확장) 최신 컨테이너 쿼리 단위를 사용하면 구성요소가 상위 컨테이너를 기준으로 확장할 수 있습니다. 이렇게 하면 레이아웃에서 구성요소가 배치되는 위치와 관계없이 구성요소가 보기 좋게 표시되므로 구성요소 격리와 재사용성이 향상됩니다.

구현

1. 컨테이너 정의

컨테이너 쿼리 단위를 사용하려면 먼저 상위 요소에 포함 컨텍스트를 정의해야 합니다.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. 컨테이너 쿼리 단위 사용

컨테이너 쿼리 단위 (cqi, cqb 등)를 사용하여 컨테이너 크기에 상대적인 크기를 설정합니다.

  • cqi: 컨테이너 인라인 크기의 1%(가로 쓰기 모드의 너비)
  • cqb: 컨테이너 블록 크기의 1%(가로 쓰기 모드의 높이)입니다.

참고: 컨테이너 단위는 @container 쿼리 규칙 없이도 모든 속성에서 직접 사용할 수 있습니다. 정의된 container-type가 있는 가장 가까운 상위 요소를 기반으로 자동으로 확인됩니다.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. clamp()로 값 제한

크기가 너무 작거나 너무 커지지 않도록 하려면 CSS clamp() 함수를 사용하세요. 이는 사용자가 기본 글꼴 크기를 확대하거나 조정하는 기능에 영향을 미칩니다. 텍스트가 접근성 가이드라인을 충족하려면 최대 크기가 최소 크기의 2.5배를 넘지 않아야 합니다.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

대체 전략

브라우저에서 컨테이너 쿼리를 지원하지 않는 경우 표시 영역 단위 또는 표준 미디어 쿼리를 사용하여 대체 기능을 제공해야 합니다.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

이 대체는 텍스트가 여전히 확장되지만 구성요소의 너비가 아닌 화면 너비를 기반으로 합니다. 사용 사례에서 작동하는지 확인하기 위해 테스트해야 합니다.