CSS 컨테이너 쿼리: 컴포넌트 크기로 반응형 스타일 정하기
CSS 컨테이너 쿼리는 뷰포트가 아니라 조상 컨테이너의 크기를 기준으로 하위 컴포넌트 스타일을 선택합니다. 컨테이너 선언, 축별 containment, @container 규칙과 실제 적용의 한계를 설명합니다.
발행·오류 제보: infostoa · 편집 기준
이 글의 개별 작성자와 전문 검토자 정보는 제공되지 않습니다.
뷰포트 미디어 쿼리는 화면 전체를 기준으로 스타일을 바꿉니다. 그러나 같은 카드나 도구막대가 넓은 본문과 좁은 사이드바에 함께 쓰이면 화면 폭만으로 내부 배치를 결정하기 어렵습니다. CSS 컨테이너 크기 쿼리는 조상 요소의 크기를 기준으로 자손에 스타일을 적용하므로 재사용 컴포넌트가 자신이 놓인 공간에 대응할 수 있습니다.
1. 뷰포트 기준에서 컴포넌트 공간 기준으로
미디어 쿼리는 뷰포트나 미디어 특성을 평가하지만, 컨테이너 쿼리는 문서 안의 query container 크기 같은 조건을 평가합니다. 따라서 브라우저 창이 같아도 같은 컴포넌트가 배치된 열의 너비에 따라 다른 스타일을 사용할 수 있습니다. 이 차이는 컴포넌트를 페이지마다 복제하지 않고 여러 레이아웃에서 재사용할 때 유용합니다.
컨테이너 크기를 질의하려면 먼저 조상 요소에 container-type을 지정해야 합니다. inline-size는 인라인 축을 기준으로 한 크기 containment를 설정하고, size는 두 축을 대상으로 합니다. containment는 단순한 이름표가 아닙니다. 컨테이너의 크기 산정이 자식 콘텐츠에 의존하는 방식을 제한하므로, 선언 전후의 intrinsic sizing과 레이아웃을 확인해야 합니다. 어떤 값을 선택할지는 실제로 질의할 축과 요소의 크기 결정 방식에 맞춰야 합니다.
2. 컨테이너 선언과 이름 지정
간단한 경우 container-type: inline-size로 인라인 축을 질의할 수 있게 합니다. 여러 중첩 컨테이너가 있거나 의미를 분명히 하고 싶다면 container-name 또는 container 단축 속성으로 이름을 붙입니다. 예를 들어 카드 바깥 래퍼를 card 컨테이너로 만들고, 그 안의 자손에 @container card (width > 30rem) 조건을 적용할 수 있습니다. 이름을 생략하면 조건에 맞는 가장 가까운 조상 query container가 선택됩니다.
쿼리 규칙은 컨테이너 자신을 그 크기로 스타일링하는 장치가 아니라, 컨테이너의 하위 요소에 조건부 스타일을 적용합니다. 이 경계 덕분에 컴포넌트가 자기 스타일을 바꾸어 자기 크기를 바꾸고 다시 조건을 뒤집는 순환을 만들지 않습니다. 대신 실제로 어느 조상이 선택되는지 DOM 구조와 이름으로 분명히 해야 합니다. 이름이 중첩되는 경우도 각 규칙이 의도한 컨테이너를 참조하는지 확인하세요.
3. @container 조건과 컨테이너 단위
@container 안에는 너비나 높이 등 지원되는 컨테이너 특성 조건을 적고, 조건을 만족할 때 자손의 스타일을 선언합니다. 인라인 축만 containment한 경우에는 그 축의 조건을 기준으로 삼고, 세로 방향 조건이 필요하다면 해당 컨테이너 선언이 그 질의를 뒷받침하는지 확인해야 합니다. cqi, cqb 같은 컨테이너 상대 길이 단위도 조상의 크기에 비례하는 값을 표현하는 데 쓰입니다. 단위는 미디어 쿼리를 대신하는 보편적 화면 크기가 아니라 query container 문맥에 종속됩니다.
조건을 지나치게 촘촘하게 만들기 전에 컴포넌트가 실제로 바뀌어야 하는 경계를 정하세요. 예를 들어 카드 너비가 충분할 때만 이미지와 본문을 나란히 두고, 좁아지면 쌓을 수 있습니다. 임계값은 디자인이 놓인 컨테이너와 콘텐츠 최소 너비에서 도출해야 하며, 특정 기기 목록을 그대로 옮기는 값일 필요는 없습니다.
4. 실무자 관점: containment와 중첩을 함께 점검
먼저 컨테이너가 자식 콘텐츠와 독립적으로 의도한 크기를 갖는지 확인합니다. 그다음 쿼리 대상 자손이 올바른 가장 가까운 컨테이너를 참조하는지, 중첩 컨테이너 이름이 충돌하지 않는지 검토합니다. 실제 긴 문구, 현지화된 버튼, 이미지 비율, 좁은 열을 넣어 콘텐츠가 잘리거나 예상하지 못하게 줄어들지 않는지 확인하세요.
컨테이너 쿼리는 컴포넌트가 공간에 적응하도록 하지만, 모든 반응형 결정을 자동화하지는 않습니다. 페이지 전체의 탐색 구조나 뷰포트 단위의 전환은 여전히 미디어 쿼리가 적합할 수 있습니다. 브라우저 지원 범위와 대체 스타일도 프로젝트에서 직접 확인해야 합니다.