Tailwind 실전 가이드
Tailwind의 핵심 개념과 실무 활용
학습 항목
이미지 로딩 중...
Tailwind CSS 초급 가이드
Tailwind CSS의 핵심 개념과 유틸리티 클래스를 배우는 초급 가이드입니다. 실용적인 예제를 통해 반응형 디자인과 스타일링 기법을 익힐 수 있습니다.
들어가며
이 글에서는 Tailwind CSS 초급 가이드에 대해 상세히 알아보겠습니다. 총 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