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

컨테이너 쿼리로 컴포넌트 반응형 CSS 만들기

컨테이너 이름과 포함 유형을 정하고 재사용 가능한 @container 규칙을 복사하세요.

CSS 준비 완료

생성된 컨테이너 쿼리

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.