반응형 디자인 기본 개념
Tailwind CSS는 미디어 쿼리를 처리하기 위해 여러 반응형 유틸리티 클래스를 제공합니다. 각 클래스는 특정 브레이크포인트에서만 적용됩니다. Tailwind CSS에서 사용되는 기본 브레이크포인트는 아래와 같습니다.
-
sm(작은 화면):640px이상 -
md(중간 화면):768px이상 -
lg(큰 화면):1024px이상 -
xl(매우 큰 화면):1280px이상 -
2xl(최대 화면):1536px이상
브레이크포인트는 개인 설정도 가능합니다.
반응형 유틸리티 클래스 사용법
반응형 유틸리티 클래스는 특정 브레이크포인트에서만 스타일을 적용할 수 있도록 돕습니다. 클래스 이름 앞에 브레이크포인트 접두사를 추가하여 사용할 수 있습니다. 예를 들어, 다음과 같이 기본적으로 text-base 크기를 가지고, 큰 화면에서는 text-lg 크기를 적용할 수 있습니다.
<p class="text-base lg:text-lg">
This text is responsive
</p>
기본적으로 text-base 크기를 가지며, 화면 크기가 1024px 이상일 때 text-lg 크기로 변경됩니다. 즉 lg 밑에서는 text-base가, 1024px 부터는 text-lg가 적용됩니다.
레이아웃 조정
다양한 화면 크기에서 레이아웃을 조정하는 방법도 간단합니다. 예를 들어, 작은 화면에서는 한 열, 큰 화면에서는 두 열로 나누는 방법은 다음과 같습니다.
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-red-500">Column 1</div>
<div class="bg-blue-500">Column 2</div>
</div>
숨기기 및 보이기
특정 화면 크기에서 요소를 숨기거나 표시하는 것도 가능합니다. 예를 들어, 작은 화면에서는 요소를 숨기고, 중간 화면 이상에서는 표시하는 방법은 다음과 같습니다.
반응형 마진 및 패딩
Tailwind CSS는 반응형 마진 및 패딩을 적용하는 유틸리티 클래스도 제공합니다. 예를 들어, 작은 화면에서는 p-4 패딩을 적용하고, 중간 화면에서는 p-8 패딩을 적용하는 방법은 다음과 같습니다.
<div class="p-4 md:p-8">
Responsive padding
</div>
Tailwind CSS의 반응형 유틸리티 클래스를 사용하면 다양한 화면 크기에 맞춰 손쉽게 스타일을 조정할 수 있습니다. 이를 통해 모든 장치에서 일관된 사용자 경험을 제공할 수 있습니다.