안정적인 브라우저에 도입되는 컨테이너 쿼리

이번 발렌타인 데이에는 모든 안정화된 브라우저에서 실행되는 컨테이너 쿼리와 컨테이너 쿼리 단위가 출시됩니다.

Una Kravets

컨테이너 쿼리가 애용되고 있습니다. 이번 발렌타인 데이에는 크기 컨테이너 쿼리와 컨테이너 쿼리 단위가 모든 최신 브라우저에서 안정적으로 작동합니다.

컨테이너 쿼리를 사용하면 inline-size와 같은 상위 요소의 스타일 지정 정보를 쿼리할 수 있습니다. 미디어 쿼리를 사용하면 표시 영역의 크기를 쿼리할 수 있고, 컨테이너 쿼리를 사용하면 구성요소가 UI의 위치에 따라 변경될 수 있습니다.

컨테이너 쿼리는 반응형 디자인 및 재사용 가능한 구성요소에 특히 유용합니다. 예를 들어 사이드바에 배치될 때 한 가지 방식으로 배치될 수 있는 카드 구성요소를 사용 설정하고 제품 그리드 내에서 다른 구성으로 배치할 수 있습니다.

컨테이너 쿼리 사용

컨테이너 쿼리를 사용하려면 먼저 상위 요소에 포함을 설정합니다. 상위 컨테이너에서 container-type를 설정하거나 container 약식을 사용하여 유형과 이름을 동시에 제공하면 됩니다.

.card-container {
  container: card / inline-size;
}

container-type를 inline-size로 설정하면 상위 요소의 인라인 방향 크기를 쿼리합니다. 영어와 같은 라틴 언어에서는 텍스트가 왼쪽에서 오른쪽으로 인라인으로 흐르므로 카드의 너비가 이에 해당합니다.

이제 이 컨테이너를 사용하여 @container로 하위 요소에 스타일을 적용할 수 있습니다.

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
 .card-child {
  grid-template-columns: 1fr;
 }
}

또한 컨테이너 쿼리 길이 단위 값을 표시 영역 기반 단위 값과 동일한 방식으로 사용할 수 있습니다. 차이점은 컨테이너 단위가 표시 영역이 아닌 컨테이너에 해당한다는 것입니다. 다음 예는 컨테이너 쿼리 단위와 clamp() 함수를 사용하여 최소 및 최대 크기 값을 제공하는 반응형 서체를 보여줍니다.

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

위의 15cqi는 컨테이너 인라인 크기의 15% 를 나타냅니다. clamp() 함수는 여기에 최소 2rem, 최대 4rem을 제공합니다. 그동안 15cqi가 이러한 값 사이에 있으면 이에 따라 텍스트도 축소되고 늘어납니다.

컨테이너 쿼리 Valentine

이번 연휴에 컨테이너 쿼리를 애용하는 분들을 위해 현재 사용 중인 안정적 브라우저 (최신 버전)와 상관없이 모두가 즐길 수 있는 밸런타인데이를 준비했습니다.