[Tailwind CSS] 04. 색상, 배경, 글자 크기, 폰트 굵기

[Tailwind CSS] 04. 색상, 배경, 글자 크기, 폰트 굵기

지난 글에서는 Tailwind CSS의 핵심 개념인 Utility Class에 대해 알아보았습니다. 이번 글에서는 실제 화면에서 가장 자주 사용하는 색상, 배경색, 글자 크기, 폰트 굵기 관련 클래스를 정리해보겠습니다.

화면의 분위기는 대부분 색상과 글자 스타일에서 결정됩니다. Tailwind를 사용할 때도 bg-, text-, font- 계열 클래스만 잘 이해해도 훨씬 빠르게 UI를 만들 수 있습니다.

---

1. 이번 글에서 배울 클래스

이번 글에서 다룰 Tailwind 클래스는 크게 네 가지입니다.

분류	예시	역할
배경색	bg-blue-600, bg-slate-50	요소의 배경색 지정
글자색	text-white, text-slate-700	텍스트 색상 지정
글자 크기	text-sm, text-xl	텍스트 크기 지정
글자 굵기	font-medium, font-bold	텍스트 굵기 지정

이 네 가지는 버튼, 카드, 제목, 설명 문구, 배지, 입력 폼 등 거의 모든 UI에서 반복해서 사용됩니다.

---

2. 배경색 클래스: bg-

Tailwind에서 배경색을 지정할 때는 bg-로 시작하는 클래스를 사용합니다.

<div class="bg-blue-600">
  파란색 배경
</div>

위 코드에서 bg-blue-600은 배경색을 파란색 계열로 지정하는 클래스입니다.

클래스	의미	자주 쓰는 곳
bg-white	흰색 배경	카드, 모달, 폼 영역
bg-slate-50	아주 연한 회색 계열 배경	페이지 전체 배경
bg-blue-600	파란색 계열 배경	주요 버튼
bg-red-500	빨간색 계열 배경	삭제, 경고 버튼
bg-transparent	투명 배경	아이콘 버튼, 보조 버튼

---

3. 색상 숫자 이해하기

Tailwind 색상 클래스에는 숫자가 붙는 경우가 많습니다. 예를 들어 blue-100, blue-500, blue-900처럼 작성합니다.

<div class="bg-blue-100">연한 파란색</div>
<div class="bg-blue-500">기본에 가까운 파란색</div>
<div class="bg-blue-900">진한 파란색</div>

일반적으로 숫자가 작을수록 밝고, 숫자가 클수록 진한 색상에 가깝습니다.

색상 단계	느낌	사용 예시
50, 100	매우 연함	페이지 배경, 알림 박스 배경
200, 300	연한 색상	배지 배경, 강조 영역
500, 600	선명한 색상	버튼, 링크, 강조 텍스트
700, 800, 900	진한 색상	제목, hover 색상, 강한 강조

실무나 포트폴리오에서는 보통 50은 배경, 600은 버튼, 900은 제목 색상으로 자주 사용합니다.

---

4. 글자색 클래스: text-

글자색을 지정할 때는 text-로 시작하는 클래스를 사용합니다.

<p class="text-slate-700">
  설명 문구입니다.
</p>

위 코드에서 text-slate-700은 글자색을 회색 계열로 지정합니다.

클래스	의미	자주 쓰는 곳
text-white	흰색 글자	진한 배경 위의 버튼 텍스트
text-slate-900	진한 회색 글자	제목
text-slate-600	중간 회색 글자	설명 문구
text-blue-600	파란색 글자	링크, 강조 문구
text-red-600	빨간색 글자	에러 메시지, 경고 문구

---

5. text-는 글자색일 수도 있고 글자 크기일 수도 있다

Tailwind를 처음 배울 때 헷갈리는 부분이 있습니다. text-로 시작하는 클래스가 항상 글자색을 의미하는 것은 아닙니다.

클래스	의미	분류
text-blue-600	글자색을 파란색으로 지정	색상
text-slate-700	글자색을 회색 계열로 지정	색상
text-sm	글자 크기를 작게 지정	크기
text-xl	글자 크기를 크게 지정	크기

즉, text-blue-600처럼 색상 이름이 붙으면 글자색이고, text-sm, text-xl처럼 크기 단위가 붙으면 글자 크기입니다.

---

6. 글자 크기 클래스

글자 크기를 지정할 때도 text- 계열 클래스를 사용합니다.

<p class="text-sm">작은 설명 글자</p>
<p class="text-base">기본 본문 글자</p>
<p class="text-xl">큰 제목 글자</p>

클래스	느낌	사용 예시
text-xs	매우 작음	라벨, 보조 문구
text-sm	작음	설명 문구, 버튼 텍스트
text-base	기본 크기	본문
text-lg	조금 큼	소제목
text-xl	큼	카드 제목
text-2xl, text-3xl	매우 큼	페이지 제목

처음에는 text-sm, text-base, text-xl, text-2xl 정도만 익숙해져도 충분합니다.

---

7. 글자 굵기 클래스: font-

글자 굵기를 지정할 때는 font-로 시작하는 클래스를 사용합니다.

<p class="font-normal">기본 굵기</p>
<p class="font-medium">살짝 두꺼운 글자</p>
<p class="font-bold">굵은 글자</p>

클래스	느낌	사용 예시
font-light	얇은 글자	감성적인 제목, 보조 텍스트
font-normal	기본 굵기	본문
font-medium	조금 강조	메뉴, 라벨
font-semibold	적당히 굵음	버튼, 카드 제목
font-bold	굵은 글자	페이지 제목, 강한 강조

포트폴리오 UI에서는 font-normal, font-medium, font-semibold, font-bold를 가장 많이 사용합니다.

---

8. 버튼 예제로 한 번에 이해하기

색상, 배경색, 글자 크기, 글자 굵기는 버튼을 만들 때 자주 함께 사용됩니다.

<button class="bg-blue-600 text-white text-sm font-semibold">
  저장하기
</button>

클래스	역할
bg-blue-600	버튼 배경색을 파란색으로 지정
text-white	버튼 글자색을 흰색으로 지정
text-sm	버튼 글자 크기를 작게 지정
font-semibold	버튼 글자를 적당히 굵게 지정

실제 버튼에서는 여백과 모서리 클래스까지 함께 사용하는 경우가 많습니다.

<button class="rounded-lg bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700">
  저장하기
</button>

여기서 hover:bg-blue-700은 마우스를 올렸을 때 배경색을 더 진하게 바꾸는 클래스입니다.

---

9. 카드 UI 예제로 보기

이번에는 카드 UI에서 색상과 글자 스타일을 어떻게 사용하는지 살펴보겠습니다.

<article class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
  <p class="text-sm font-semibold text-blue-600">
    Tailwind CSS
  </p>

  <h3 class="mt-2 text-xl font-bold text-slate-900">
    색상과 글자 스타일
  </h3>

  <p class="mt-3 text-sm leading-6 text-slate-600">
    bg, text, font 클래스를 사용하면 화면의 분위기를 빠르게 정리할 수 있습니다.
  </p>
</article>

위 예제를 나누어 보면 다음과 같습니다.

• bg-white : 카드 배경을 흰색으로 지정
• text-blue-600 : 작은 라벨을 파란색으로 강조
• text-xl : 카드 제목 크기를 크게 지정
• font-bold : 카드 제목을 굵게 지정
• text-slate-900 : 제목에 진한 글자색 적용
• text-slate-600 : 설명 문구에 부드러운 회색 적용

---

10. 배경색 투명도 조절하기

Tailwind에서는 색상 뒤에 / 값을 붙여 투명도를 조절할 수 있습니다.

<div class="bg-blue-600/100">100% 배경색</div>
<div class="bg-blue-600/75">75% 배경색</div>
<div class="bg-blue-600/50">50% 배경색</div>

예를 들어 bg-blue-600/50은 파란색 배경을 50% 정도의 투명도로 보여줍니다. 알림 박스나 은은한 강조 영역을 만들 때 사용할 수 있습니다.

<div class="rounded-lg bg-blue-600/10 p-4 text-blue-700">
  Tailwind 색상은 투명도까지 함께 조절할 수 있습니다.
</div>

---

11. 자주 쓰는 색상 조합

처음에는 색상을 너무 많이 쓰기보다, 자주 쓰는 조합을 정해두는 것이 좋습니다. 아래 조합만 익혀도 깔끔한 UI를 만들 수 있습니다.

용도	추천 클래스	설명
페이지 배경	bg-slate-50	부담 없는 연한 배경
카드 배경	bg-white	본문 영역을 깔끔하게 분리
제목	text-slate-900	진하고 읽기 쉬운 제목
본문 설명	text-slate-600	부드러운 설명 문구
주요 버튼	bg-blue-600 text-white	가장 중요한 액션 강조
에러 메시지	text-red-600	문제 상황을 명확하게 표시

---

12. React 예제로 적용하기

이제 React 컴포넌트에서 색상, 배경색, 글자 크기, 폰트 굵기를 함께 사용해보겠습니다.

function App() {
  return (
    <main className="min-h-screen bg-slate-50 px-6 py-10">
      <section className="mx-auto max-w-md rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        <p className="text-sm font-semibold text-blue-600">
          Tailwind CSS
        </p>

        <h1 className="mt-3 text-2xl font-bold text-slate-900">
          색상과 글자 스타일
        </h1>

        <p className="mt-4 text-sm leading-6 text-slate-600">
          bg, text, font 클래스를 조합하면
          화면의 분위기를 빠르게 만들 수 있습니다.
        </p>

        <button className="mt-6 rounded-lg bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700">
          시작하기
        </button>
      </section>
    </main>
  )
}

export default App

이 예제에는 이번 글에서 배운 핵심 클래스들이 모두 들어 있습니다.

• bg-slate-50 : 전체 페이지 배경
• bg-white : 카드 배경
• text-blue-600 : 강조 라벨
• text-2xl : 제목 크기
• font-bold : 제목 굵기
• text-slate-600 : 설명 문구 색상
• bg-blue-600 text-white : 버튼 색상

---

13. 처음 배울 때 추천하는 기준

Tailwind 색상과 글자 스타일을 처음 사용할 때는 아래 기준으로 시작하면 좋습니다.

• 페이지 배경은 bg-slate-50처럼 연한 색을 사용한다.
• 카드는 bg-white를 사용해 배경과 구분한다.
• 제목은 text-slate-900과 font-bold를 사용한다.
• 설명 문구는 text-slate-600처럼 부드러운 색을 사용한다.
• 주요 버튼은 bg-blue-600 text-white처럼 명확한 대비를 준다.
• 한 화면에서 너무 많은 색상을 사용하지 않는다.

처음부터 색상을 많이 쓰기보다, 회색 계열과 포인트 색상 하나를 정해서 사용하는 것이 가장 안전합니다. 예를 들어 회색 계열은 slate, 포인트 색상은 blue로 정하면 전체 UI가 깔끔하게 보입니다.

---

14. 정리

이번 글에서는 Tailwind CSS에서 자주 사용하는 색상, 배경색, 글자 크기, 폰트 굵기 클래스를 정리했습니다.

핵심은 다음과 같습니다.

1. bg-는 배경색을 지정할 때 사용한다.
2. text-blue-600처럼 색상 이름이 붙은 text-는 글자색이다.
3. text-sm, text-xl처럼 크기 단위가 붙은 text-는 글자 크기다.
4. font-semibold, font-bold는 글자 굵기를 지정한다.
5. 색상은 많이 쓰기보다 일관된 조합으로 쓰는 것이 좋다.

Tailwind에서는 작은 클래스들을 조합해서 화면을 만듭니다. 색상과 글자 스타일을 잘 다루면 버튼, 카드, 제목, 설명 문구를 훨씬 깔끔하게 만들 수 있습니다.

---

다음 편 예고

[Tailwind CSS] 05. margin, padding, gap으로 여백 잡기

다음 글에서는 m-, p-, mt-, px-, gap- 클래스를 사용해서 화면의 간격을 잡는 방법을 정리해보겠습니다.

---

GWDEVELBlog