- Tailwind V4의 컨테이너 쿼리 기능을 통해 더욱 정교한 반응형 디자인이 가능해졌습니다. 🎉
- 기존 Tailwind의 브레이크포인트는 viewport 너비에만 의존하여, 특정 컨테이너 크기에 따른 스타일 조정이 어려웠습니다. 🧱
- 컨테이너 쿼리(@container)를 사용하면 특정 컨테이너의 너비에 따라 반응형 스타일을 적용할 수 있습니다. 🎯
- 컨테이너 쿼리의 브레이크포인트는 일반 Tailwind 브레이크포인트와 다르므로 주의해야 합니다. ⚠️
- 컨테이너 쿼리는 임의의 값(예: 548px)도 사용 가능하여 더욱 세밀한 조정이 가능합니다. 📏
- 컨테이너 쿼리를 적용할 컨테이너 요소에
@container를 추가하고, 컨테이너 이름을 지정하여 사용합니다. 🏷️ - 컨테이너 쿼리는 컨테이너 요소의 자식 요소에만 적용 가능합니다. 📦
- 컨테이너 쿼리를 사용하면 복잡한 CSS에서도 각 요소의 크기에 맞는 스타일을 정확하게 적용할 수 있습니다. ✨
Recommanded Videos
