도구스개발

CSS 컨테이너 쿼리 생성기

container-type·container-name과 @container 조건을 고르면 CSS 컨테이너 쿼리 코드를 만들어 줍니다.

1. 컨테이너 선언

비워두면 무명 컨테이너 쿼리가 됩니다

2. @container 규칙

한 줄에 하나씩. 세미콜론(;)까지 적어주세요.

CSS

.card-wrap {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
컨테이너 쿼리는 뷰포트가 아니라 컨테이너 자신의 크기를 기준으로 스타일을 바꿉니다. container-type을 지정해야 그 요소가 쿼리 가능한 컨테이너가 되고, 이름(container-name)은 컨테이너가 여러 겹 중첩될 때 특정 컨테이너를 콕 집어 가리키고 싶을 때만 필요합니다.
cqw(너비의 1%)·cqh(높이의 1%)·cqi·cqb·cqmin·cqmax 단위는 vw·vh처럼 쓰되 뷰포트 대신 컨테이너를 기준으로 삼습니다. CSS 선언 안에서 font-size: 4cqw처럼 자유롭게 쓸 수 있습니다.

사용 방법

  1. 1컨테이너로 쓸 요소의 선택자와 container-type을 고릅니다(가로 크기만 기준으로 삼는 inline-size가 가장 흔합니다).
  2. 2조건(min-width·max-width)과 기준값을 정합니다.
  3. 3조건이 맞을 때 적용할 CSS 선언을 적으면 @container 규칙이 완성됩니다.

자주 묻는 질문

미디어 쿼리(@media)는 브라우저 «뷰포트»의 크기를 기준으로 스타일을 바꾸지만, 컨테이너 쿼리(@container)는 그 요소를 담고 있는 «컨테이너»의 크기를 기준으로 바꿉니다. 같은 카드 컴포넌트를 좁은 사이드바에 넣든 넓은 본문에 넣든, 컴포넌트 스스로 자기 폭을 보고 레이아웃을 바꿀 수 있어 재사용 가능한 컴포넌트 설계에 유리합니다.

어떤 요소든 기본적으로는 컨테이너 쿼리의 기준이 되지 않습니다. container-type을 inline-size(가로 크기만) 또는 size(가로+세로)로 지정해야 그 요소가 "쿼리할 수 있는 컨테이너"가 됩니다. normal은 컨테이너 쿼리 기준으로 쓰이지 않고 스타일 쿼리 등 다른 용도에 씁니다.

cqw는 컨테이너 너비의 1%, cqh는 컨테이너 높이의 1%를 나타내는 상대 단위입니다. cqi·cqb는 글쓰기 방향에 따른 inline·block 축 기준이고, cqmin·cqmax는 그중 더 작은 값·큰 값을 씁니다. vw·vh가 뷰포트 기준인 것처럼, 이 단위들은 컨테이너 기준으로 폰트 크기나 여백을 반응형으로 정할 때 씁니다.

아닙니다. 생략하면 무명 컨테이너 쿼리가 되어 가장 가까운 조상 컨테이너를 기준으로 삼습니다. 컨테이너가 여러 겹 중첩되어 특정 컨테이너를 콕 집어 기준으로 삼아야 할 때만 이름을 지정하면 됩니다.

알아두면 좋은 점

  • container-type·container-name·@container 문법과 cqw·cqh·cqi·cqb·cqmin·cqmax 단위 정의는 CSS-Tricks 'Container query units' 글과 MDN 컨테이너 쿼리 가이드를 WebSearch로 교차 확인했습니다(2026-09-05). CSS 스펙에 정의된 값이라 이견이 없습니다.
  • 이 도구는 문법 조립만 합니다. 실제 필요한 브레이크포인트 값·선언 내용은 프로젝트 상황에 맞게 직접 정해야 합니다.

함께 보면 좋은 도구

CSS 그리드행·열과 간격을 고르면 CSS 그리드 코드를 만들어 주고 결과를 미리 보여줍니다.CSS 플렉스박스flex-direction·justify-content·align-items 등을 고르면 CSS 플렉스박스 코드를 만들어 주고 결과를 미리 보여줍니다.clamp() 생성기뷰포트 너비 구간과 그때의 최소·최대 값을 입력하면 반응형 폰트 크기·여백에 쓸 CSS clamp() 코드를 생성합니다.gitignore 판정.gitignore 규칙과 경로를 넣으면 그 파일이 무시되는지, 어느 줄이 마지막으로 이겼는지 알려줍니다.울프람 규칙규칙 번호 0~255를 8비트로 풀어 세 칸 이웃에 대응시키고 세대를 쌓아 무늬를 그립니다.

마지막 검증: 2026년 9월 5일 · 결과는 참고용 추정치입니다.