TailwindCSS 튜토리얼로 만드는 첫 반응형 웹사이트

웹표준에 맞춘 반응형 웹사이트를 처음부터 완성해보는 TailwindCSS 튜토리얼입니다. 이 글에서는 모바일 퍼스트 접근으로 TailwindCSS의 유틸리티 클래스를 활용해 헤더, 히어로 섹션, 카드 그리드, 푸터까지 순차적으로 구현하는 방법을 단계별로 소개합니다.

1. 프로젝트 초기 설정

CDN 방식 (빠른 테스트)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>첫 반응형 웹사이트</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <!-- 이후 내용 -->
</body>
</html>

별도 빌드 없이 바로 TailwindCSS 사용 가능.
학습용, 프로토타입에 적합.

NPM 방식 (실무 프로젝트)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.js에 content 경로 설정:
module.exports = { content: ["./**/*.{html,js}"], theme: { extend: {} }, plugins: [], };
src/index.css:
@tailwind base; @tailwind components; @tailwind utilities;
빌드 스크립트:
"build:css": "tailwindcss -i ./src/index.css -o ./dist/styles.css --minify"

2. 모바일 퍼스트 레이아웃 설계

TailwindCSS의 반응형 접두사(sm:, md:, lg:)는 모바일 우선으로 작은 화면 기본 스타일을 먼저 작성하고, 더 큰 화면에서만 추가 스타일을 지정할 수 있게 해줍니다.

<div class="container mx-auto px-4">
  <!-- 기본 (모바일) 레이아웃 -->
  <div class="flex flex-col lg:flex-row">
    <div class="flex-1 p-4">콘텐츠 A</div>
    <div class="flex-1 p-4">콘텐츠 B</div>
  </div>
</div>

flex-col → lg:flex-row 전환으로 데스크탑에서 가로 레이아웃 적용

3. 반응형 네비게이션 바 구현

<nav class="bg-white shadow-md">
  <div class="container mx-auto px-4 flex items-center justify-between h-16">
    <a href="#" class="text-xl font-bold">MySite</a>
    <ul class="hidden md:flex space-x-6">
      <li><a href="#" class="hover:text-blue-600">Home</a></li>
      <li><a href="#" class="hover:text-blue-600">About</a></li>
      <li><a href="#" class="hover:text-blue-600">Contact</a></li>
    </ul>
    <button class="md:hidden p-2 text-gray-700" id="menu-btn">
      <!-- 햄버거 아이콘 -->
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"/>
      </svg>
    </button>
  </div>
  <!-- 모바일 메뉴 -->
  <div class="md:hidden hidden bg-white" id="mobile-menu">
    <a href="#" class="block px-4 py-2 hover:bg-gray-100">Home</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-100">About</a>
    <a href="#" class="block px-4 py-2 hover:bg-gray-100">Contact</a>
  </div>
</nav>

<script>
  document.getElementById('menu-btn').addEventListener('click', () => {
    document.getElementById('mobile-menu').classList.toggle('hidden');
  });
</script>

hidden md:flex으로 데스크탑, 모바일 메뉴 토글
JavaScript로 토글 클래스 제어

4. 히어로 섹션

<section class="bg-blue-600 text-white py-20">
  <div class="container mx-auto px-4 text-center">
    <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-4">
      Welcome to MySite
    </h1>
    <p class="text-base sm:text-lg md:text-xl mb-6">TailwindCSS로 만든 첫 반응형 웹</p>
    <a href="#features" class="inline-block bg-white text-blue-600 font-semibold py-3 px-6 rounded hover:bg-gray-100">
      지금 시작하기
    </a>
  </div>
</section>

text-3xl sm:text-4xl md:text-5xl으로 뷰포트 크기에 맞춰 헤딩 크기 조정
CTA 버튼에 호버 효과 추가

5. 카드 그리드 섹션

<section id="features" class="py-16 bg-gray-100">
  <div class="container mx-auto px-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-white p-6 rounded-lg shadow-lg">
      <h2 class="text-xl font-semibold mb-2">Feature A</h2>
      <p class="text-gray-600">A에 대한 설명을 여기에 추가하세요.</p>
    </div>
    <div class="bg-white p-6 rounded-lg shadow-lg">
      <h2 class="text-xl font-semibold mb-2">Feature B</h2>
      <p class="text-gray-600">B에 대한 설명을 여기에 추가하세요.</p>
    </div>
    <div class="bg-white p-6 rounded-lg shadow-lg">
      <h2 class="text-xl font-semibold mb-2">Feature C</h2>
      <p class="text-gray-600">C에 대한 설명을 여기에 추가하세요.</p>
    </div>
  </div>
</section>

grid-cols-1 sm:grid-cols-2 lg:grid-cols-3로 반응형 카드 배치
gap-8으로 일정한 간격 유지

6. 푸터 구성

<footer class="bg-white py-6">
  <div class="container mx-auto px-4 text-center text-gray-600">
    © 2025 MySite. All rights reserved.
  </div>
</footer>

심플한 중앙 정렬 푸터

7. 디자인 커스터마이징

커스텀 색상: tailwind.config.js에서 브랜드 컬러 추가
폰트 설정: Google Fonts 연동 후 fontFamily 확장
유틸리티 재사용: @layer components에 .btn, .card 등 정의

// tailwind.config.js 예시
module.exports = {
  theme: {
    extend: {
      colors: { brand: "#1E3A8A" },
      fontFamily: { sans: ["Inter", "sans-serif"] },
    },
  },
};

마무리하며

이 튜토리얼을 통해 헤더 → 히어로 → 카드 그리드 → 푸터로 이어지는 첫 반응형 웹사이트 구조를 TailwindCSS만으로 완성했습니다. 모바일 퍼스트, 유틸리티 클래스 조합, 반응형 접두사를 활용해 간결하고 유지보수하기 쉬운 코드를 작성할 수 있습니다. 더 깊이 있는 커스터마이징과 컴포넌트화는 다음 포스트에서 다뤄보겠습니다!

참고 링크

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

Next.js 시작하기 - Introduction. App Router (0)	2025.06.17
Next.js 시작하기 - 처음 배우는 개발자를 위한 완벽 가이드 (0)	2025.06.16
TailwindCSS 애니메이션과 트랜지션 심화 가이드 (1)	2025.06.13
디자이너를 위한 TailwindCSS 활용 튜토리얼 (0)	2025.06.13
실무에 바로 적용 가능한 TailwindCSS 튜토리얼 (1)	2025.06.13

CodeWriter

TailwindCSS 튜토리얼로 만드는 첫 반응형 웹사이트

1. 프로젝트 초기 설정

CDN 방식 (빠른 테스트)

NPM 방식 (실무 프로젝트)

2. 모바일 퍼스트 레이아웃 설계

3. 반응형 네비게이션 바 구현

4. 히어로 섹션

5. 카드 그리드 섹션

6. 푸터 구성

7. 디자인 커스터마이징

마무리하며

참고 링크

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

티스토리툴바

TailwindCSS 튜토리얼로 만드는 첫 반응형 웹사이트

1. 프로젝트 초기 설정

CDN 방식 (빠른 테스트)

NPM 방식 (실무 프로젝트)

2. 모바일 퍼스트 레이아웃 설계

3. 반응형 네비게이션 바 구현

4. 히어로 섹션

5. 카드 그리드 섹션

6. 푸터 구성

7. 디자인 커스터마이징

마무리하며

참고 링크

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

'개발' Related Articles

티스토리툴바