Tailwind CSS 초급 가이드

Tailwind CSS의 핵심 개념과 유틸리티 클래스를 배우는 초급 가이드입니다. 실용적인 예제를 통해 반응형 디자인과 스타일링 기법을 익힐 수 있습니다.

---

---

들어가며

이 글에서는 Tailwind CSS 초급 가이드에 대해 상세히 알아보겠습니다. 총 8가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 기본_유틸리티_클래스
2. 플렉스박스_레이아웃
3. 반응형_디자인
4. 호버_효과
5. 그리드_레이아웃
6. 텍스트_스타일링
7. 간격_조절
8. 그림자_효과

---

1. 기본 유틸리티 클래스

개요

Tailwind CSS는 미리 정의된 클래스를 HTML에 직접 적용하여 스타일링합니다. 텍스트, 색상, 여백 등을 클래스 이름으로 제어할 수 있습니다.

코드 예제

<div class="bg-blue-500 text-white p-4 rounded-lg">
  <h1 class="text-2xl font-bold">안녕하세요!</h1>
  <p class="mt-2 text-sm">Tailwind CSS 시작하기</p>
</div>

설명

bg-blue-500은 파란 배경, text-white는 흰색 텍스트, p-4는 패딩, rounded-lg는 둥근 모서리를 적용합니다. 클래스 이름만으로 스타일이 완성됩니다.

---

2. 플렉스박스 레이아웃

개요

flex 클래스를 사용하면 요소를 유연하게 배치할 수 있습니다. justify와 items 클래스로 정렬 방향을 제어합니다.

코드 예제

<div class="flex justify-between items-center p-4">
  <div class="w-20 h-20 bg-red-400 rounded"></div>
  <div class="w-20 h-20 bg-green-400 rounded"></div>
  <div class="w-20 h-20 bg-blue-400 rounded"></div>
</div>

설명

flex로 플렉스박스를 활성화하고, justify-between으로 요소를 양 끝에 배치하며, items-center로 수직 중앙 정렬합니다.

---

3. 반응형 디자인

개요

sm, md, lg 등의 접두사를 사용하여 화면 크기에 따라 다른 스타일을 적용할 수 있습니다. 모바일 우선 방식으로 작동합니다.

코드 예제

<div class="w-full md:w-1/2 lg:w-1/3 p-4">
  <div class="bg-purple-500 text-white p-6 rounded">
    <h2 class="text-lg md:text-xl lg:text-2xl">반응형 카드</h2>
  </div>
</div>

설명

모바일에서는 전체 너비, 태블릿(md)에서는 50%, 데스크톱(lg)에서는 33% 너비로 표시됩니다. 텍스트 크기도 반응형으로 조정됩니다.

---

4. 호버 효과

개요

hover: 접두사를 사용하면 마우스를 올렸을 때 스타일이 변경됩니다. 인터랙티브한 UI를 쉽게 만들 수 있습니다.

코드 예제

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-300">
  클릭하세요
</button>

설명

기본 상태는 파란색이지만, 마우스를 올리면 더 진한 파란색으로 변합니다. transition으로 부드러운 색상 전환 효과를 추가합니다.

---

5. 그리드 레이아웃

개요

grid 클래스로 격자 레이아웃을 만들 수 있습니다. grid-cols로 열의 개수를 지정하고, gap으로 간격을 조절합니다.

코드 예제

<div class="grid grid-cols-3 gap-4 p-4">
  <div class="bg-yellow-400 h-24 rounded"></div>
  <div class="bg-pink-400 h-24 rounded"></div>
  <div class="bg-indigo-400 h-24 rounded"></div>
</div>

설명

3개의 열로 구성된 그리드를 생성하고, 각 요소 사이에 4단위의 간격을 둡니다. 동일한 높이의 박스들이 균등하게 배치됩니다.

---

6. 텍스트 스타일링

개요

텍스트의 크기, 굵기, 정렬, 색상을 클래스로 간단히 제어할 수 있습니다. 다양한 조합으로 원하는 타이포그래피를 구현합니다.

코드 예제

<div class="text-center p-4">
  <h1 class="text-4xl font-extrabold text-gray-800">제목</h1>
  <p class="text-base font-normal text-gray-600 mt-2">본문 내용</p>
  <p class="text-sm font-light text-gray-400 italic">부가 설명</p>
</div>

설명

text-4xl은 큰 제목, font-extrabold는 매우 굵은 글씨, text-gray-800은 진한 회색을 적용합니다. 각 텍스트마다 다른 크기와 굵기를 설정할 수 있습니다.

---

7. 간격 조절

개요

margin(m)과 padding(p) 클래스로 요소의 여백을 제어합니다. 숫자는 4px 단위로 증가하며, 방향을 지정할 수 있습니다.

코드 예제

<div class="p-4">
  <div class="mb-4 p-6 bg-green-200">위쪽 마진</div>
  <div class="mx-auto w-1/2 p-4 bg-blue-200">수평 중앙</div>
  <div class="mt-4 pl-8 pr-2 bg-red-200">다양한 패딩</div>
</div>

설명

mb-4는 아래쪽 마진, mx-auto는 좌우 마진 자동(중앙 정렬), pl-8은 왼쪽 패딩, pr-2는 오른쪽 패딩을 적용합니다.

---

8. 그림자 효과

개요

shadow 클래스로 요소에 그림자를 추가하여 입체감을 줄 수 있습니다. 강도를 조절하여 다양한 깊이감을 표현합니다.

코드 예제

<div class="p-4 space-y-4">
  <div class="shadow-sm p-4 bg-white rounded">가벼운 그림자</div>
  <div class="shadow-md p-4 bg-white rounded">중간 그림자</div>
  <div class="shadow-xl p-4 bg-white rounded">강한 그림자</div>
</div>

설명

shadow-sm은 미세한 그림자, shadow-md는 중간 강도, shadow-xl은 강한 그림자를 적용합니다. 카드나 버튼에 깊이감을 더할 때 유용합니다.

---

마치며

이번 글에서는 Tailwind CSS 초급 가이드에 대해 알아보았습니다. 총 8가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Tailwind #Utility-Classes #Responsive-Design #Flexbox #Grid