Tailwind CSS - 기초

김명원·2025년 1월 16일

learnTailwindCSS

목록 보기

2/10

Typography 스타일링

tailwind CSS를 사용하여 폰트를 스타일 하는 방법입니다.
폰트 크기, 폰트 두께, 텍스트 정렬, 라인 높이 등의 스타일 속성을 Tailwind의 유틸리티 클래스로 빠르게 적용하는 방법을 알아봅니다.

폰트 크기 조절 (font-size)
Tailwind CSS의 폰트 크기 유틸리티를 사용하여 다양한 폰트 크기를 지정할 수 있습니다.
예: text-sm, text-lg, text-xl 등

<p class="text-sm">이 문장은 작은 크기입니다.</p>
<p class="text-lg">이 문장은 큰 크기입니다.</p>
<p class="text-2xl">이 문장은 더 큰 크기입니다.</p>

위예 결과

폰트 두께 설정 (font-weight)
텍스트의 두께를 Tailwind 유틸리티 클래스로 설정할 수 있습니다.
예: font-light, font-normal, font-bold

<p class="font-light">이 문장은 얇은 폰트입니다.</p>
<p class="font-normal">이 문장은 일반 두께입니다.</p>
<p class="font-bold">이 문장은 굵은 폰트입니다.</p>

위에 결과

텍스트 정렬 (text-align)
텍스트를 좌, 우, 중앙 정렬할 때 사용하는 유틸리티 클래스.
예: text-left, text-center, text-right

<p class="text-left">이 문장은 왼쪽 정렬되었습니다.</p>
<p class="text-center">이 문장은 중앙 정렬되었습니다.</p>
<p class="text-right">이 문장은 오른쪽 정렬되었습니다.</p>

위에 결과

라인 높이 조절 (line-height)
Tailwind의 라인 높이 조절 유틸리티를 사용하여 텍스트 간격을 조정할 수 있습니다.
예: leading-none, leading-normal, leading-loose

<p class="leading-none">이 문장은 라인 간격이 매우 좁습니다.</p>
<p class="leading-loose">이 문장은 라인 간격이 넓습니다.</p>

위에 결과

텍스트 색상 (text-color)
텍스트의 색상을 Tailwind의 유틸리티 클래스를 통해 쉽게 변경할 수 있습니다.
예: text-black, text-gray-500, text-blue-600

<p class="text-red-500">이 문장은 빨간색입니다.</p>
<p class="text-green-500">이 문장은 녹색입니다.</p>
<p class="text-blue-500">이 문장은 파란색입니다.</p>

위에 결과

컬러 및 배경, 보더 처리

배경색 설정 (background-color)
Tailwind CSS의 배경색 유틸리티 클래스를 사용하여 다양한 배경색을 적용할 수 있습니다.
예: bg-white, bg-gray-100, bg-blue-500, bg-green-500

<div class="bg-blue-500 p-6 text-white">
  배경색이 파란색입니다.
</div>
<div class="bg-gray-100 p-6 text-black">
  배경색이 연한 회색입니다.
</div>

위에 결과

텍스트 색상 설정 (text-color)
텍스트의 색상을 Tailwind CSS의 유틸리티 클래스를 통해 쉽게 변경할 수 있습니다.
예: text-black, text-gray-700, text-blue-600, text-red-500

<p class="text-red-500">이 문장은 빨간색 텍스트입니다.</p>
<p class="text-green-500">이 문장은 녹색 텍스트입니다.</p>
<p class="text-blue-600">이 문장은 파란색 텍스트입니다.</p>

위에 결과

보더 스타일 설정 (border)
Tailwind CSS는 보더 두께, 색상, 모양 등을 쉽게 설정할 수 있는 다양한 유틸리티 클래스를 제공합니다.
예: border, border-2, border-gray-300, rounded-lg, rounded-full

<div class="border border-gray-300 p-6 rounded-lg">
  이 상자는 회색 보더와 둥근 모서리를 가지고 있습니다.
</div>
<div class="border-2 border-blue-500 p-6 rounded-full">
  이 상자는 파란색 보더와 완전히 둥근 모서리를 가지고 있습니다.
</div>

위에 결과

간격 조절(Margin, Padding, Spacing)

패딩 설정 (`padding`)

Tailwind CSS에서 패딩은 p 유틸리티 클래스를 통해 쉽게 설정할 수 있습니다. 사이즈를 숫자로 지정하며, 각 숫자는 Tailwind의 내부 간격 시스템에 의해 정의됩니다.
예: p-4는 모든 방향에 1rem의 패딩을 적용하고, px-4는 좌우에만 패딩을 적용합니다.

<div class="p-4 bg-gray-100">
  이 박스는 모든 방향에 1rem 패딩이 있습니다.
</div>
<div class="px-6 py-2 bg-gray-200">
  이 박스는 좌우에 1.5rem, 상하에 0.5rem 패딩이 있습니다.
</div>

위에 결과

마진 설정 (`margin`)

마진은 m 유틸리티 클래스를 사용하여 설정할 수 있습니다. 패딩과 유사하게, 숫자 값으로 크기를 설정하며 각 방향에 맞게 지정할 수 있습니다.
예: m-4는 모든 방향에 마진을 적용하고, mt-4는 상단에만 마진을 적용합니다.

<div class="m-4 bg-blue-100">
  이 박스는 모든 방향에 1rem의 마진이 있습니다.
</div>
<div class="mt-6 mb-2 bg-blue-200">
  이 박스는 상단에 1.5rem, 하단에 0.5rem의 마진이 있습니다.
</div>

위에 결과

요소 간의 공간 조정 (`space-between`)

요소 간의 간격을 조정할 때는 space-x(좌우) 또는 space-y(상하) 유틸리티를 사용합니다. 이 클래스를 통해 자식 요소 간의 간격을 자동으로 조정할 수 있습니다.

<div class="flex space-x-4 bg-gray-300 p-4">
  <div class="bg-white p-4">첫 번째 박스</div>
  <div class="bg-white p-4">두 번째 박스</div>
  <div class="bg-white p-4">세 번째 박스</div>
</div>