컨테이너 쿼리 데모
오른쪽 하단의 핸들을 드래그하여 컨테이너의 크기를 조절해보세요.
컨테이너의 너비에 따라 카드 레이아웃이 어떻게 변하는지 확인하세요.
컨테이너에 반응하는 카드
이 카드의 레이아웃은 뷰포트가 아닌 부모 컨테이너의 너비에 따라 변경됩니다.
컨테이너 너비가 32rem (512px) 이상이면 수평으로 바뀝니다.
현재 클래스: `@lg:flex`
이 데모는 `@tailwindcss/container-queries` 플러그인과 `react-resizable`을 사용합니다.
`@container` 클래스를 부모 요소에 추가하고 `@lg` 등의 변형을 자식 요소에 사용하여 컨테이너 크기에 따라 스타일을 지정할 수 있습니다.