반응형 디자인이란, 데스크탑, 태블릿, 모바일 등 다양한 기기에서 웹사이트가 기기의 화면 크기에 맞춰 자동으로 레이아웃을 조정하는 방법입니다. 이를 통해 사용자가 어떤 기기를 사용하든 최적의 경험을 제공받을 수 있도록 합니다.
Tailwind CSS는 미디어 쿼리를 사용하지 않고, 미리 정의된 브레이크포인트 유틸리티를 통해 손쉽게 반응형 디자인을 구현할 수 있습니다.
Tailwind CSS에서 사용되는 브레이크포인트는 다음과 같습니다:
| Prefix | Minimum Width | Media Query | Description |
|---|---|---|---|
| sm | 640px | @media (min-width: 640px) {} |
최소 640px 이상 부터 sm 사이즈! |
| md | 768px | @media (min-width: 768px) {} |
최소 768px 이상 부터 md 사이즈! |
| lg | 1024px | @media (min-width: 1024px) {} |
최소 1024px 이상 부터 lg 사이즈! |
| xl | 1280px | @media (min-width: 1280px) {} |
최소 1280px 이상 부터 xl 사이즈! |
| 2xl | 1536px | @media (min-width: 1536px) {} |
최소 1536px 이상 부터 2xl 사이즈! |
<aside> ❓
브레이크포인트란, 웹사이트가 화면 크기에 따라 레이아웃이나 스타일을 변경해야 할 때 설정하는 기준이 되는 화면 너비입니다. 이를 통해 다양한 기기에서 최적의 사용자 경험을 제공할 수 있습니다.
</aside>
Tailwind의 반응형 유틸리티를 사용하기 전에, 반드시 <meta> 태그를 HTML 문서의 <head> 섹션에 추가해야 합니다. 이 태그는 브라우저가 페이지의 크기를 기기 화면 크기에 맞게 조정하도록 지시합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
왜 필요한가?