CSS Container Query Playground
컨테이너 너비와 브레이크포인트를 조정해 반응형 CSS를 즉시 생성하세요.
실시간 미리보기
INACTIVE
분석 카드
현재 컨테이너 폭과 브레이크포인트를 비교해 쿼리 적용 여부를 확인합니다.
레이아웃 카드
기본/쿼리 열 수를 조절해 카드 배치가 어떻게 바뀌는지 테스트하세요.
타이포 카드
쿼리 조건 충족 시 폰트 크기까지 동적으로 변경할 수 있습니다.
생성된 CSS
필요하면 선택자 이름만 바꿔서 바로 프로젝트에 붙여넣으세요.