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

이번 발렌타인 데이를 맞아 모든 안정적인 브라우저에서 크기 컨테이너 쿼리 및 컨테이너 쿼리 단위가 방문하게 된 것을 기념합니다.

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가 이 값 사이에 있으면 텍스트가 이에 따라 축소되고 커집니다.

컨테이너 쿼리 밸런타인데이

컨테이너 쿼리에 대한 사랑을 담아, 이번 연말연시에는 어떤 (최신 버전) 안정적인 브라우저를 사용하든 여러분 모두가 즐길 수 있는 밸런타인데이를 준비했습니다.