로컬 CSS 컨테이너 쿼리 생성기

컨테이너 쿼리를 사용하여 구성요소 반응형 CSS 구축

컨테이너 이름을 지정하고, 포함 유형을 선택하고, 재사용 가능한 구성 요소에 초점을 맞춘 @container 규칙을 복사하세요.

준비 완료

생성된 컨테이너 쿼리

container-name: cardinline-size

Component responds to its parent container.

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

@container card (min-width: 30rem) and (max-width: 60rem) {
  /* Responsive component styles */
}

파일을 업로드하지 않습니다. 처리는 이 브라우저 탭에서만 진행됩니다.

컨테이너 쿼리를 쓰는 이유

Viewport media queries describe the screen; container queries let a component respond to the space its parent gives it.

Declare a query container with container-type, then target its descendants with a named @container rule.

Keep the name close to the component responsibility so nested layouts remain readable.

컨테이너 쿼리 질문

What is inline-size?

It enables queries on the container's inline dimension, usually its width, and is a good default for cards and panels.

When would size help?

Use size when the component needs both inline and block dimensions for its layout decisions.

Does the rule include the setup?

Yes. The output includes the container declaration and the named query block.