[CSS] "Tailwind CSS 핵심 정리! 유틸리티 클래스로 스타일링 끝내기"

Tailwind CSS는 다양한 스타일을 미리 정의된 유틸리티 클래스로 제공한다.

(* 유틸리티 클래스란 특정 스타일을 적용할 수 있도록 미리 정의된 단일 클래스)

 

대표적인 유틸리티 클래스를 몇 가지 예시로 정리해보자!

 

색상 (Colors)

 

1) bg-색상-단계: 배경색 설정

<div class="bg-blue-500"></div> <!-- 파란색 배경 --> 
<div class="bg-red-300"></div> <!-- 연한 빨간색 배경 -->

 

2) text-색상-단계: 글자색 설정

<p class="text-green-600">글자색 초록</p>

 

 

크기 (Sizing)

 

1) w-숫자: 너비 설정

<div class="w-64"></div> <!-- 너비 16rem (64px * 4) -->

 

2) h-숫자: 높이 설정

<div class="h-32"></div> <!-- 높이 8rem -->

 

 

여백 (Spacing: Margin, Padding)

 

1) m-숫자: 바깥 여백 (margin)

<div class="m-4"></div> <!-- 전체 마진 1rem -->

 

2) p-숫자: 안쪽 여백 (padding)

<div class="p-2"></div> <!-- 전체 패딩 0.5rem -->

 

(1) 방향별 적용

• - mt-4: 위쪽 마진
• mr-2: 오른쪽 마진
• px-6: 좌우 패딩
• py-3: 상하 패딩

 

 

글꼴 및 텍스트 (Typography)

 

1) text-숫자: 글자 크기

<p class="text-xl">큰 글씨</p>

 

2) font-bold: 글씨 굵게

<p class="font-bold">굵은 글씨</p>

 

3) uppercase: 대문자 변환

<p class="uppercase">이 문장은 대문자로 변환됨</p>

 

 

정렬 (Flex, Grid)

 

1) flex: 플렉스 컨테이너

<div class="flex"></div>

 

2) justify-center: 가운데 정렬

<div class="flex justify-center"></div>

 

3) items-center: 세로축 중앙 정렬

<div class="flex items-center"></div>

 

 

버튼 스타일링의 예제로 적용해보기

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

• bg-blue-500: 파란색 배경
• text-white: 흰색 글씨
• font-bold: 글씨 굵게
• py-2 px-4: 상하, 좌우 패딩
• rounded-lg: 둥근 모서리
• hover:bg-blue-700: 마우스를 올리면 진한 파란색으로 변경

 

 

 

---

 

오늘은 Tailwind CSS에서  미리 정의된 유틸리티 클래스로 제공하는 다양한 스타일을 사용해보았다!

 

조금 더 친숙해지고 가까워지는 데 도움이 되면 좋겠다.