Tailwind CSS: 반응형 디자인 가이드

KUKJIN LEE • 6개월 전 작성

반응형 디자인 기본 개념

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의 반응형 유틸리티 클래스를 사용하면 다양한 화면 크기에 맞춰 손쉽게 스타일을 조정할 수 있습니다. 이를 통해 모든 장치에서 일관된 사용자 경험을 제공할 수 있습니다.

New Tech Posts