CSS Container Query
생성기
시각적 GUI로 CSS @container 쿼리를 만드세요. container-type/name 설정, 브레이크포인트, 6가지 사전 설정 및 실시간 미리보기를 제공합니다. 기존 미디어 쿼리를 쉽게 변환할 수 있습니다.
컨테이너 설정
사전 설정
브레이크포인트
실시간 미리보기
생성된 코드
🔄 미디어 쿼리 → 컨테이너 쿼리 변환
CSS Container Query 생성기 소개
CSS Container Query 생성기는 반응형 디자인의 새로운 표준인 "@container" 쿼리를 GUI를 통해 시각적으로 구축할 수 있게 해주는 개발자 도구입니다. 미디어 쿼리가 뷰포트 너비에 의존하는 반면, 컨테이너 쿼리는 부모 요소(컨테이너)의 너비에 의존하여 컴포넌트 단위로 유연하게 레이아웃을 전환할 수 있습니다.
이 도구는 container-type/name 설정, 브레이크포인트 추가 및 실시간 미리보기를 원활하게 처리합니다. 또한 기존 미디어 쿼리를 위한 일괄 변환 기능을 제공하여 새로운 사양으로의 전환을 돕습니다. 모든 작업은 브라우저 내에서 안전하게 실행됩니다.
사용 방법
컨테이너 설정 및 브레이크포인트 추가
컨테이너 선택자와 container-type(일반적으로 inline-size)을 설정합니다. 그런 다음 "브레이크포인트 추가"를 클릭하고 컨테이너가 특정 크기에 도달했을 때 적용할 CSS 스타일을 입력합니다. 사전 설정에서 시작할 수도 있습니다.
실시간 미리보기 테스트
미리보기 영역의 오른쪽 가장자리를 드래그하여 컨테이너 크기를 조절하고 설정한 브레이크포인트에서 스타일이 올바르게 전환되는지 확인합니다. 프로젝트의 사용자 지정 HTML을 적용하여 테스트할 수도 있습니다.
코드 내보내기 및 변환
생성된 CSS 코드를 복사하여 프로젝트에 붙여넣습니다. "미디어 쿼리 변환기"를 사용하여 기존 @media 구문을 @container로 쉽게 교체하고 마이그레이션 노력을 줄이세요.
Container Query 용어 사전
- 컨테이너 쿼리 (@container)
- 뷰포트가 아닌 특정 부모 요소(컨테이너)의 크기를 기준으로 스타일을 변경하는 CSS 기능입니다.
- container-type
- 요소를 쿼리 컨테이너로 정의하는 속성입니다. inline-size는 가로 축을, size는 양 축을 대상으로 합니다.
- container-name
- 컨테이너의 이름을 명시적으로 지정하는 속성으로, 여러 컨테이너가 중첩될 때 유용합니다.
- Containment (컨테인먼트)
- 요소의 레이아웃/스타일 계산을 나머지 DOM으로부터 격리하는, 컨테이너 쿼리에 필요한 개념입니다.
- 인라인 축 (Inline-axis)
- 텍스트가 흐르는 방향의 축입니다. 가로 쓰기에서는 너비(width)에 해당합니다.
- 미디어 쿼리 (@media)
- 뷰포트 크기 또는 기기 특성에 따라 스타일을 적용하는 기존 CSS 기능입니다.
- cqw / cqh / cqi / cqb
- vw/vh와 유사하게 컨테이너의 너비/높이/인라인/블록 크기의 1%를 나타내는 컨테이너 쿼리용 상대 단위입니다.
자주 묻는 질문
- Q.입력한 데이터가 서버로 전송되나요?
- 아니요. 이 도구는 전적으로 클라이언트 측(브라우저)에서 실행됩니다. HTML/CSS 및 생성된 코드는 절대 외부 서버로 전송되지 않습니다.
- Q.미디어 쿼리와 컨테이너 쿼리 중 어느 것을 사용해야 하나요?
- 헤더, 사이드바와 같은 매크로 레이아웃에는 미디어 쿼리를 사용하고, 사용 가능한 공간에 따라 레이아웃을 최적화해야 하는 카드, 버튼과 같은 마이크로 레이아웃(컴포넌트)에는 컨테이너 쿼리를 사용하세요.
- Q.브라우저 호환성은 어떤가요?
- Chrome 105, Safari 16, Firefox 110을 포함하여 2023년 이후의 모든 주요 최신 브라우저에서 지원됩니다. 구형 브라우저는 지원되지 않지만 적절한 폴백(fallback)을 구현할 수 있습니다.
- Q.container-type: size 사용 시 주의사항이 있나요?
- size를 사용하면 블록 축(높이) 컨테인먼트가 적용됩니다. 명시적인 높이를 설정하지 않으면 요소의 높이가 0으로 축소될 수 있습니다. 일반적으로 inline-size를 사용하는 것을 권장합니다.
- Q.사용자 지정 HTML 미리보기는 어떻게 격리되나요?
- Shadow DOM을 사용하여 미리보기 영역을 격리함으로써, 생성기 자체의 CSS가 미리보기의 마크업에 영향을 미치지 않도록 보장합니다.
활용 사례
재사용 가능한 카드 컴포넌트
3단 메인 영역이나 1단 사이드바에 모두 적응하는 독립적인 카드 UI를 설계하는 데 완벽합니다.
CMS 및 위젯 통합
위젯 영역의 너비에 관계없이 레이아웃을 자동으로 조정하는 WordPress와 같은 CMS용 블록을 만듭니다.
복잡한 대시보드 UI
크기 조절이 가능한 대시보드 패널 내에서 차트 및 통계 배치를 동적으로 최적화하는 데 이상적입니다.
레거시 코드 현대화
변환기를 사용하여 거대한 미디어 쿼리 블록을 유지 관리가 쉬운 컴포넌트 기반 컨테이너 쿼리로 전환하세요.
CSS Container Query 기술 문서
CSS Container 쿼리는 @container 규칙과 container-type 속성을 결합하여 구현됩니다. 이는 기존 미디어 쿼리와 근본적으로 다른 접근 방식입니다.
미디어 쿼리와의 차이점
미디어 쿼리(@media)는 뷰포트 크기에 따라 스타일을 변경합니다. 컨테이너 쿼리(@container)는 부모 컨테이너의 크기에 따라 스타일을 변경합니다. 사이드바와 메인 콘텐츠 양쪽에 같은 컴포넌트를 배치할 때, 미디어 쿼리는 각각 별도의 처리가 필요했지만 컨테이너 쿼리는 올바른 레이아웃을 자동으로 적용합니다.
container-type 값
inline-size는 가로(인라인) 축에서만 쿼리를 허용하며 가장 일반적으로 사용됩니다. size는 가로와 세로 양 축을 쿼리하지만 높이 컨테인먼트가 필요합니다. normal은 기본값이며 요소를 컨테이너 쿼리 대상에서 제외합니다.
브라우저 지원
Chrome 105+, Safari 16+, Firefox 110+, Edge 105+에서 지원됩니다. 2023년 이후 모든 최신 브라우저에서 완전히 지원됩니다. 지원하지 않는 브라우저는 @container 규칙을 안전하게 무시합니다(점진적 향상).
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.