0Pricing
Tailwind CSS Academy · 강의

첫 번째 Tailwind 페이지

Tailwind 유틸리티 클래스만 사용해 간단한 히어로 섹션을 만들며 클래스 기반 작업 흐름에 익숙해집니다.

첫 번째 Tailwind 페이지은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Planning a Hero Section

A hero section is the first thing visitors see: a headline, subheadline, and a button or two. You will build a full one using only Tailwind utilities.

Setting Up the HTML Shell

Start with an HTML shell and link your compiled CSS. Add min-h-screen so the body fills the viewport and bg-gray-50 for a soft canvas to build on.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="./dist/output.css" rel="stylesheet" />
  <title>My First Tailwind Page</title>
</head>
<body class="min-h-screen bg-gray-50">
  <!-- content goes here -->
</body>
</html>

Creating the Navigation Bar

Build a navbar with flex items-center justify-between to push the logo left and links right. Add bg-white shadow-sm and some padding for a clean, lifted look.

<nav class="bg-white shadow-sm px-8 py-4 flex items-center justify-between">
  <span class="text-xl font-bold text-indigo-600">MyBrand</span>
  <div class="flex gap-6">
    <a href="#" class="text-gray-600 hover:text-indigo-600">Home</a>
    <a href="#" class="text-gray-600 hover:text-indigo-600">About</a>
    <a href="#" class="text-gray-600 hover:text-indigo-600">Contact</a>
  </div>
</nav>

Building the Hero Container

Center the hero container with max-w-4xl mx-auto so it stays readable on big screens, then add px-6 py-24 for space and text-center to line everything up.

<section class="px-6 py-24">
  <div class="max-w-4xl mx-auto text-center">
    <!-- headline, subheadline, buttons -->
  </div>
</section>

Writing the Headline

Write a bold headline: text-5xl font-extrabold for size and weight, text-gray-900 for strong contrast, and tracking-tight so big letters feel cohesive.

<h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
  Build beautiful UIs
  <span class="text-indigo-600">faster than ever</span>
</h1>

Adding the Subheadline

Add a subheadline below it: text-xl text-gray-500 keeps it quiet and supporting, max-w-2xl mx-auto holds a comfy line length, and mb-10 spaces the buttons.

<p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
  Tailwind CSS lets you design any component directly in your HTML
  without writing a single line of custom CSS.
</p>

Creating Call-to-Action Buttons

Add two CTA buttons: a filled primary with bg-indigo-600 text-white and an outline secondary. Wrap them in a flex container with a gap to sit side by side.

<div class="flex flex-col sm:flex-row gap-4 justify-center">
  <a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
    Get Started
  </a>
  <a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
    Learn More
  </a>
</div>

Adding a Background Gradient

Give the hero depth with a gradient. Use bg-gradient-to-* for direction plus from-* and to-* for colors — a soft from-white to-indigo-50 adds a subtle lift.

<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
  <!-- hero content -->
</section>

Putting the Hero Together

Here is the full hero with everything combined. Notice the whole design lives in the class names — read them top to bottom and you can picture it exactly.

<section class="bg-gradient-to-b from-white to-indigo-50 px-6 py-24">
  <div class="max-w-4xl mx-auto text-center">
    <h1 class="text-5xl font-extrabold text-gray-900 tracking-tight mb-6">
      Build beautiful UIs
      <span class="text-indigo-600">faster than ever</span>
    </h1>
    <p class="text-xl text-gray-500 max-w-2xl mx-auto mb-10">
      Tailwind CSS lets you design any component directly in your HTML.
    </p>
    <div class="flex flex-col sm:flex-row gap-4 justify-center">
      <a href="#" class="bg-indigo-600 text-white font-semibold py-3 px-8 rounded-lg hover:bg-indigo-700 transition-colors">
        Get Started
      </a>
      <a href="#" class="border-2 border-indigo-600 text-indigo-600 font-semibold py-3 px-8 rounded-lg hover:bg-indigo-50 transition-colors">
        Learn More
      </a>
    </div>
  </div>
</section>

Adding a Features Row

Below the hero, add a features row. Use grid grid-cols-1 md:grid-cols-3 gap-8 so cards stack on mobile and sit side by side on larger screens.

<section class="max-w-5xl mx-auto px-6 py-16">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="text-center p-6">
      <div class="text-4xl mb-4">&#9889;</div>
      <h3 class="text-lg font-semibold text-gray-900 mb-2">Fast</h3>
      <p class="text-gray-500 text-sm">JIT compilation generates only what you use.</p>
    </div>
    <!-- repeat for other features -->
  </div>
</section>

Finishing With a Footer

Finish with a footer: bg-gray-800 text-gray-400 for a dark contrast and text-center py-8 to keep it compact. That is a full page, built only with utilities.

<footer class="bg-gray-800 text-gray-400 text-center py-8">
  <p class="text-sm">&copy; 2024 MyBrand. Built with Tailwind CSS.</p>
</footer>

Quick Check

Quick check! See how your first page came together. 🎨

Lesson Recap

You built a real page! A hero blends layout, type, and color, gradients use from-* and to-*, and flex and grid handle columns. Next up: Tailwind vs CSS.

자주 묻는 질문

“첫 번째 Tailwind 페이지” 강의는 무료인가요?

네 — “첫 번째 Tailwind 페이지” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“첫 번째 Tailwind 페이지”에서 뭘 배우나요?

Tailwind 유틸리티 클래스만 사용해 간단한 히어로 섹션을 만들며 클래스 기반 작업 흐름에 익숙해집니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“첫 번째 Tailwind 페이지” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 유틸리티 우선 CSS 이해하기
  2. Tailwind 설치 및 구성
  3. 첫 번째 Tailwind 페이지
  4. Tailwind와 기존 CSS 비교
← Tailwind CSS Academy(으)로 돌아가기