본문 바로가기
개발

웹디자인 입문자를 위한 TailwindCSS 튜토리얼 가이드

달빛캠퍼 2025. 6. 12. 20:44
반응형

웹디자인을 처음 시작하는 입문자도 쉽게 사용할 수 있는 CSS 프레임워크, TailwindCSS. 이 튜토리얼에서는 HTML만 알아도 가능한 TailwindCSS의 기초 개념부터 적용 예제까지 단계별로 안내합니다.

오늘은 아래와 같은 페이지를 만드는 법을 알아봅니다.

웹디자인을 시작해볼까요?

TailwindCSS를 활용한 스타일 예제입니다.

다양한 버튼 예제

Flexbox 정렬

중앙 정렬된 콘텐츠

Grid 레이아웃

1번 박스
2번 박스

반응형 텍스트

다양한 화면 크기에서도 잘 보이는 글자 크기

기본 카드 디자인

카드 제목

깔끔한 UI를 구성하는 데 필요한 기본 클래스 조합입니다.

TailwindCSS란?

TailwindCSS는 스타일을 CSS 파일이 아닌 HTML 클래스 속성에서 직접 지정하는 유틸리티 퍼스트 CSS 프레임워크입니다. 초보자도 복잡한 CSS 없이 깔끔한 디자인을 구현할 수 있습니다.

왜 입문자에게 TailwindCSS가 좋은가요?

  • 코드 복잡도 ↓, 생산성 ↑
  • 스타일링 결과를 즉시 확인 가능
  • 반응형 웹 제작이 쉬움

TailwindCSS 설치 방법 (CDN 사용 – 입문자 추천)

<script src="https://cdn.tailwindcss.com"></script>

단 한 줄로 설치 끝! 브라우저만 있으면 바로 사용 가능합니다.

🔗 TailwindCSS 공식 문서 바로가기

텍스트 스타일링 기초

<h1 class="text-3xl font-bold text-indigo-600">웹디자인을 시작해볼까요?</h1>
<p class="text-gray-700 mt-2">TailwindCSS를 활용한 스타일 예제입니다.</p>

버튼 만들기 (다양한 스타일)

TailwindCSS는 다양한 버튼 디자인을 간단한 클래스 조합으로 구성할 수 있습니다.

1. 기본 버튼

<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded">
  기본 버튼
</button>

2. 아웃라인 버튼

<button class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-semibold py-2 px-4 rounded">
  아웃라인 버튼
</button>

3. 아이콘 포함 버튼

<button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded flex items-center space-x-2">
  <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
  </svg>
  <span>아이콘 버튼</span>
</button>

4. 전체 너비 버튼

<button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded text-center font-bold">
  전체 너비 버튼
</button>

5. 투명 배경 버튼

<button class="bg-transparent hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 border border-gray-300 rounded">
  투명 배경 버튼
</button>

Flexbox를 이용한 중앙 정렬

<div class="flex justify-center items-center h-40 bg-gray-100">
  <p class="text-gray-800">중앙 정렬된 콘텐츠</p>
</div>

그리드 레이아웃 구성

<div class="grid grid-cols-2 gap-4">
  <div class="bg-indigo-100 p-4">1번 박스</div>
  <div class="bg-indigo-200 p-4">2번 박스</div>
</div>

반응형 웹도 Tailwind로 간단하게

<p class="text-sm md:text-lg lg:text-xl">
  다양한 화면 크기에서도 잘 보이는 글자 크기
</p>

모바일 우선 설계 방식으로, 작은 화면부터 큰 화면까지 단계적으로 스타일을 지정할 수 있습니다.

기본 카드 디자인 예시

<div class="bg-white p-6 rounded shadow">
  <h2 class="text-2xl font-semibold text-gray-800">카드 제목</h2>
  <p class="mt-2 text-gray-600">깔끔한 UI를 구성하는 데 필요한 기본 클래스 조합입니다.</p>
</div>

마무리

TailwindCSS는 초보자도 효율적으로 웹디자인을 시작할 수 있는 훌륭한 도구입니다. 설치도 간단하고, 스타일 조정도 직관적이며, 반응형 웹도 쉽게 구현할 수 있습니다.
모든 예제가 포함된 전체 소스 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>웹디자인 입문자를 위한 TailwindCSS 튜토리얼 예제</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-10 space-y-10 text-gray-800">

  <!-- 텍스트 스타일링 -->
  <section>
    <h1 class="text-3xl font-bold text-indigo-600">웹디자인을 시작해볼까요?</h1>
    <p class="text-gray-700 mt-2">TailwindCSS를 활용한 스타일 예제입니다.</p>
  </section>

  <!-- 다양한 버튼 스타일 -->
  <section class="space-y-3">
    <h2 class="text-2xl font-semibold mb-2">다양한 버튼 예제</h2>

    <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded">
      기본 버튼
    </button>

    <button class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-semibold py-2 px-4 rounded">
      아웃라인 버튼
    </button>

    <button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded flex items-center space-x-2">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
      </svg>
      <span>아이콘 버튼</span>
    </button>

    <button class="w-full bg-purple-600 hover:bg-purple-700 text-white py-3 px-4 rounded text-center font-bold">
      전체 너비 버튼
    </button>

    <button class="bg-transparent hover:bg-gray-200 text-gray-800 font-semibold py-2 px-4 border border-gray-300 rounded">
      투명 배경 버튼
    </button>
  </section>

  <!-- Flexbox 정렬 예제 -->
  <section>
    <h2 class="text-2xl font-semibold mb-4">Flexbox 정렬</h2>
    <div class="flex justify-center items-center h-40 bg-gray-200 rounded">
      <p class="text-gray-800">중앙 정렬된 콘텐츠</p>
    </div>
  </section>

  <!-- Grid 레이아웃 예제 -->
  <section>
    <h2 class="text-2xl font-semibold mb-4">Grid 레이아웃</h2>
    <div class="grid grid-cols-2 gap-4">
      <div class="bg-indigo-100 p-4 rounded text-center">1번 박스</div>
      <div class="bg-indigo-200 p-4 rounded text-center">2번 박스</div>
    </div>
  </section>

  <!-- 반응형 텍스트 예제 -->
  <section>
    <h2 class="text-2xl font-semibold mb-4">반응형 텍스트</h2>
    <p class="text-sm md:text-lg lg:text-xl bg-white p-4 rounded shadow">
      다양한 화면 크기에서도 잘 보이는 글자 크기
    </p>
  </section>

  <!-- 카드 컴포넌트 예제 -->
  <section>
    <h2 class="text-2xl font-semibold mb-4">기본 카드 디자인</h2>
    <div class="bg-white p-6 rounded shadow">
      <h3 class="text-2xl font-semibold text-gray-800">카드 제목</h3>
      <p class="mt-2 text-gray-600">깔끔한 UI를 구성하는 데 필요한 기본 클래스 조합입니다.</p>
    </div>
  </section>

</body>
</html>

 

다음 글에서는 TailwindCSS를 사용한 블로그형 UI 제작 실습을 소개하겠습니다.

반응형

'개발' 카테고리의 다른 글

디자이너를 위한 TailwindCSS 활용 튜토리얼  (0) 2025.06.13
실무에 바로 적용 가능한 TailwindCSS 튜토리얼  (1) 2025.06.13
단계별로 배우는 TailwindCSS 기초 튜토리얼  (0) 2025.06.12
2025년 최신 TailwindCSS 튜토리얼, 시작부터 마스터까지  (0) 2025.06.11
TailwindCSS 튜토리얼: 완전 초보도 따라할 수 있는 설치부터 활용까지  (0) 2025.06.11

'개발' Related Articles

티스토리툴바