Tailwind CSS로 손쉽게 컬럼 레이아웃 만들기

Tailwind CSS를 도입하고, 컬럼 레이아웃을 구성하는 실전 예제를 통해 유용한 팁과 노하우를 공유하겠습니다.

기본 컬럼 레이아웃 만들기

Tailwind CSS를 사용하여 기본적인 컬럼 레이아웃을 만드는 방법을 알아보겠습니다. 예를 들어, 3개의 컬럼을 수평으로 배치하려면 다음과 같이 작성할 수 있습니다.

 

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500 p-4">Column 1</div>
  <div class="bg-green-500 p-4">Column 2</div>
  <div class="bg-red-500 p-4">Column 3</div>
</div>

 

반응형 컬럼 레이아웃

반응형 디자인은 현대 웹 개발의 핵심입니다. Tailwind CSS는 이를 손쉽게 구현할 수 있도록 도와줍니다. 다양한 화면 크기에 따라 컬럼 수를 조절하는 방법을 살펴보겠습니다.

 

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="bg-blue-500 p-4">Column 1</div>
  <div class="bg-green-500 p-4">Column 2</div>
  <div class="bg-red-500 p-4">Column 3</div>
  <div class="bg-yellow-500 p-4">Column 4</div>
</div>

 

위 코드에서는 화면 크기에 따라 컬럼 수가 동적으로 변합니다. 작은 화면에서는 1개의 컬럼, 중간 크기 화면에서는 2개의 컬럼, 큰 화면에서는 4개의 컬럼이 배치됩니다.

 

컬럼 간격 조절하기 (gap 활용)

컬럼 간격을 Tailwind CSS의 유틸리티 클래스를 사용하여 쉽게 조절할 수 있습니다. gap 클래스를 사용하여 컬럼 간격을 설정합니다.

 

<div class="grid grid-cols-3 gap-6">
  <div class="bg-blue-500 p-4">Column 1</div>
  <div class="bg-green-500 p-4">Column 2</div>
  <div class="bg-red-500 p-4">Column 3</div>
</div>

 

실전 예제: 카드 레이아웃

실제 프로젝트에서 자주 사용되는 카드 레이아웃을 예제로 들어보겠습니다. 여러 개의 카드를 컬럼 레이아웃으로 배치하는 방법입니다.

 

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-6">
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="image1.jpg" alt="Image 1">
    <div class="p-4">
      <h2 class="font-bold text-xl mb-2">Card Title 1</h2>
      <p class="text-gray-700">Card description goes here. This is a sample text.</p>
    </div>
  </div>
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="image2.jpg" alt="Image 2">
    <div class="p-4">
      <h2 class="font-bold text-xl mb-2">Card Title 2</h2>
      <p class="text-gray-700">Card description goes here. This is a sample text.</p>
    </div>
  </div>
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="image3.jpg" alt="Image 3">
    <div class="p-4">
      <h2 class="font-bold text-xl mb-2">Card Title 3</h2>
      <p class="text-gray-700">Card description goes here. This is a sample text.</p>
    </div>
  </div>
</div>

 

Tailwind CSS를 사용하면 다양한 컬럼 레이아웃을 손쉽게 구현할 수 있습니다. 이 가이드를 통해 Tailwind CSS의 강력한 유틸리티 클래스들을 활용하여 반응형 웹 디자인을 더욱 효율적으로 작업할 수 있게 되기를 바랍니다.