CSS 컨테이너 쿼리 생성기

사용 방법

1. 1

   컨테이너 선택자와 이름 정하기

   .card-wrap이나 #sidebar처럼 감싸는 요소의 선택자를 입력하고, card, sidebar처럼 영문 소문자·숫자·하이픈으로 된 32자 이하의 소문자 이름을 정합니다.

2. 2

   컨테이너 유형 고르기

   컨테이너 폭만 추적하려면 inline-size, 폭과 높이를 모두 추적하려면 size를 고릅니다. size가 일으키는 높이 접힘은 도구가 경고합니다.

3. 3

   폭 범위와 단위 정하기

   최소 폭, 최대 폭 또는 둘 다 켜고 px, rem, em 중에서 고릅니다. 단위를 바꾸면 16px 기준으로 값을 환산해 브레이크포인트 위치가 유지됩니다.

4. 4

   컨테이너를 끌어 시험하기

   실시간 컨테이너의 오른쪽 가장자리를 끌거나 방향키를 누릅니다. 실제 너비에서 켜짐·꺼짐 판정이 나타나고, 쿼리가 일치하면 예제 카드의 레이아웃이 바뀝니다.

5. 5

   복사 후 반응형 스타일 채우기

   컨테이너 규칙과 @container 블록을 복사하고 자리표시 주석을 컴포넌트 자식 요소의 스타일로 바꿔 넣습니다. 컨테이너 폭이 범위 안에 있는 동안 적용됩니다.

작동 원리

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

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

실제 예시

선택자 .card-wrap, 이름 card, 유형 inline-size, 최소 30rem, 최대 꺼짐

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

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

선택자 .sidebar, 이름 sidebar, 유형 inline-size, 최소 20rem, 최대 40rem

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 20rem) and (max-width: 40rem) {
  /* Responsive component styles */
}

선택자 .pricing-tile, 이름 pricing, 유형 inline-size, 최소 360px

.pricing-tile {
  container-type: inline-size;
  container-name: pricing;
}

@container pricing (min-width: 360px) {
  /* Responsive component styles */
}

선택자 #hero, 이름 hero, 유형 size, 최소 꺼짐, 최대 25em

#hero {
  container-type: size;
  container-name: hero;
}

@container hero (max-width: 25em) {
  /* Responsive component styles */
}

이름 default, 폭은 아무 값

오류: card, sidebar-widget처럼 소문자 이름을 입력해 주세요

자주 하는 실수

• 컨테이너는 자기 자신을 쿼리할 수 없습니다

  container-type과 바꾸려는 스타일을 같은 요소에 두면 효과가 없습니다. 컨테이너가 바뀌는 요소들의 부모가 되도록 컴포넌트를 감싸세요.

• size 유형은 높이를 접어 버립니다

  container-type: size에서는 요소가 내용으로 높이를 얻지 못합니다. 높이를 지정하지 않으면 높이 0으로 보입니다. 폭 기반 레이아웃에는 inline-size를 쓰세요.

• container-type은 레이아웃 동작을 바꿉니다

  격리 때문에 컨테이너가 fixed·absolute 후손의 기준 블록이 됩니다. 안쪽의 position: fixed 툴팁은 뷰포트가 아니라 컨테이너를 기준으로 배치됩니다.

• rem·em은 컨테이너 너비 기준이 아닙니다

  30em 조건은 쿼리 컨테이너의 계산된 글꼴 크기를 기준으로 하고, 30rem은 루트 요소의 글꼴 크기를 기준으로 합니다. 어느 쪽도 컨테이너 너비에 상대적인 단위는 아닙니다. 컨테이너를 따라가는 크기가 필요하면 블록 안에서 cqw 같은 컨테이너 쿼리 단위를 쓰세요.

• 여러 요소에 일치하는 선택자

  div 같은 포괄적인 선택자는 모든 div를 같은 이름의 컨테이너로 만들고 가장 가까운 것이 선택됩니다. 쿼리가 의도한 컨테이너에 닿도록 감싸는 요소에 구체적인 클래스를 쓰세요.

자주 묻는 질문

더 깊이 읽기

• 7분 읽기Flexbox와 Grid의 차이, 언제 무엇을 쓸까: 판단표와 바로 쓰는 CSSFlexbox는 콘텐츠 크기를 기준으로 한 축 위에 요소를 늘어놓고, Grid는 먼저 정한 2차원 구조에 요소를 끼워 넣습니다. 레이아웃 버그는 대개 둘 중 하나를 골라 놓고 그 성질을 거스르면서 생깁니다.