소개
이 랩에서는 매우 인기 있는 유틸리티 우선 (utility-first) CSS 프레임워크인 Tailwind CSS 를 소개합니다. 사용자 정의 클래스를 작성하는 기존 CSS 와 달리, Tailwind 는 HTML 에서 직접 조합하여 어떤 디자인이든 구축할 수 있는 저수준 유틸리티 클래스를 제공합니다. CDN 을 통해 Tailwind 를 설정하고, 배경, 텍스트, 패딩 및 레이아웃을 위해 기본 유틸리티 클래스를 간단한 웹 페이지 요소에 적용하는 방법을 배우게 됩니다. 이를 통해 유틸리티 우선 CSS 의 강력함과 속도를 직접 경험하게 될 것입니다.
필요한 index.html 파일은 ~/project 디렉토리에 미리 생성되어 있습니다. Tailwind 스타일을 적용하기 위해 이 파일을 수정하는 데 집중하게 됩니다.
HTML head 에 Tailwind CSS CDN 링크 추가하기
이 단계에서는 프로젝트에 Tailwind CSS 를 추가합니다. 빠른 설정 및 학습 목적으로 가장 쉬운 방법은 Tailwind CSS CDN 을 사용하는 것입니다. 이는 HTML 파일의 <head> 섹션에 단일 <script> 태그를 추가하는 것을 포함합니다.
CSS 파일이 없는 이유? 기존 CSS 프레임워크와 달리 Tailwind CSS 는 유틸리티 우선 (utility-first) 입니다. 외부 파일에 CSS 규칙을 작성하는 대신, 미리 만들어진 유틸리티 클래스를 HTML 에 직접 적용하게 됩니다. 이 접근 방식은 사용자 정의 CSS 파일을 완전히 없애줍니다.
공식 문서: 전체 Tailwind CSS 참조는 다음을 방문하십시오: https://tailwindcss.com/docs
먼저 WebIDE 왼쪽의 파일 탐색기를 사용하여 ~/project 디렉토리에 있는 index.html 파일을 엽니다.
이제 index.html 파일의 <head> 섹션 안에 다음 <script> 태그를 추가합니다.
<script src="https://cdn.tailwindcss.com"></script>
이 줄을 추가한 후 index.html 파일은 다음과 같이 보여야 합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Lab</title>
<!-- Tailwind CSS CDN will be added here -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div>Hello, Tailwind!</div>
</body>
</html>
Ctrl+S를 눌러 파일을 저장합니다. 아직 시각적인 변경 사항은 보이지 않겠지만, Tailwind 의 유틸리티 클래스는 이제 프로젝트에서 사용할 수 있습니다. 스타일이 적용되지 않은 페이지를 보려면 Web 8080 탭을 열 수 있습니다.
배경색을 위해 bg-blue-500 클래스 적용하기
이 단계에서는 첫 번째 Tailwind 유틸리티 클래스를 적용하여 <div> 요소의 배경색을 변경합니다. Tailwind 는 배경색에 bg-{color}-{shade} 명명 규칙을 사용합니다.
중간 정도의 파란색 배경을 적용하는 bg-blue-500 클래스를 사용하겠습니다.
index.html 파일이 아직 열려 있지 않다면 다시 엽니다. <div> 요소를 찾아서 class="bg-blue-500"을 추가합니다.
<div class="bg-blue-500">Hello, Tailwind!</div>
이제 전체 index.html 파일은 다음과 같이 보여야 합니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Lab</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="bg-blue-500">Hello, Tailwind!</div>
</body>
</html>
파일을 저장 (Ctrl+S) 하고 Web 8080 탭으로 전환합니다. 이제 파란색 배경이 있는 상자 안에 "Hello, Tailwind!" 텍스트가 표시될 것입니다.
이전 랩에서 외부 파일에 CSS 규칙을 작성했던 것과 달리, Tailwind 는 HTML 에 직접 적용하는 미리 만들어진 유틸리티 클래스를 제공합니다. 사용자 정의 CSS 작성은 필요 없습니다. bg-blue-500, text-white, p-4와 같은 유틸리티를 조합하여 디자인을 구축하기만 하면 됩니다.
주요 장점:
- 더 빠른 개발: 파일을 전환하지 않고 HTML 에서 직접 스타일링
- 신속한 프로토타이핑: 유틸리티 클래스로 즉시 레이아웃 구축
- 일관된 디자인: 표준화된 간격, 색상 및 크기 조정
- 내장된 반응형: 모바일 우선 반응형 유틸리티 포함
- AI 친화적: Tailwind 는 ChatGPT 와 같은 AI 도구와 함께 사용하도록 설계되어 코드 생성을 더 쉽게 합니다.
텍스트 색상을 위해 text-white 클래스 사용하기
이 단계에서는 파란색 배경에 더 잘 보이도록 텍스트 색상을 변경합니다. Tailwind 의 텍스트 색상 유틸리티는 text-{color} 패턴을 따릅니다. 텍스트를 흰색으로 만들려면 text-white 클래스를 사용합니다.
class 속성 내에서 공백으로 구분하여 요소에 여러 클래스를 추가할 수 있습니다.
index.html 파일의 <div>를 수정하여 text-white 클래스를 포함시킵니다.
<div class="bg-blue-500 text-white">Hello, Tailwind!</div>
class 속성 내의 클래스 순서는 중요하지 않습니다.
변경 후 index.html 파일의 body 는 다음과 같이 보일 것입니다.
<body>
<div class="bg-blue-500 text-white">Hello, Tailwind!</div>
</body>
파일을 저장 (Ctrl+S) 하고 Web 8080 탭을 확인합니다. 이제 "Hello, Tailwind!" 텍스트가 흰색으로 표시되어 파란색 배경과의 대비가 더 좋아질 것입니다.
패딩을 위해 p-4 클래스 적용하기
이 단계에서는 <div> 요소에 내부 간격, 즉 패딩을 추가합니다. 이렇게 하면 텍스트가 파란색 상자의 가장자리에 닿는 것을 방지할 수 있습니다. Tailwind 는 p-{size} 형식으로 패딩 유틸리티를 제공합니다.
요소의 네 면 모두에 중간 정도의 패딩 (기본값 1rem 또는 16px) 을 적용하는 p-4 클래스를 사용하겠습니다.
index.html의 <div> 요소 class 속성에 p-4 클래스를 추가합니다.
<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
이제 index.html 파일의 body 는 다음과 같아야 합니다.
<body>
<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>
파일을 저장 (Ctrl+S) 하고 Web 8080 탭을 새로고침합니다. 이제 텍스트와 파란색 상자 테두리 사이에 공간이 생겨 디자인이 더 깔끔해진 것을 확인할 수 있습니다.
레이아웃을 위해 flex justify-center 클래스 추가하기
이 마지막 단계에서는 스타일이 적용된 <div> 요소를 페이지 중앙에 배치합니다. Tailwind 의 Flexbox 유틸리티를 사용하여 이를 달성할 수 있습니다.
이를 위해 <body> 태그에 클래스를 적용하여 flex 컨테이너로 만들고 내용을 중앙에 정렬합니다.
flex: 이 클래스는 요소에display: flex를 적용합니다.justify-center: 이 클래스는 flex 항목을 주 축 (기본적으로 수평) 을 따라 중앙에 정렬합니다.h-screen: 이 클래스는 요소의 높이를 뷰포트 높이의 100% 로 설정합니다. 이는 세로 중앙 정렬이 작동하는 데 필요합니다 (여기서는 수평 중앙 정렬만 수행하지만 전체 페이지 레이아웃에 좋은 습관입니다).
index.html 파일의 <body> 태그를 수정하여 이러한 클래스를 추가합니다.
<body class="flex justify-center h-screen">
<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>
이제 전체 index.html 파일은 다음과 같이 보일 것입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind CSS Lab</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex justify-center h-screen">
<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>
</html>
파일을 저장 (Ctrl+S) 하고 Web 8080 탭에서 결과를 확인합니다. 이제 스타일이 적용된 상자가 페이지 중앙에 수평으로 정렬된 것을 볼 수 있습니다.
요약
실습을 완료하신 것을 축하드립니다! Tailwind CSS 의 세계에 첫 발을 내디디셨습니다. 이 실습에서는 CDN 을 사용하여 HTML 파일에 Tailwind 를 통합하는 방법을 배웠습니다. 그런 다음 여러 클래스를 HTML 요소에 직접 적용하여 유틸리티 우선 프레임워크의 핵심 개념을 연습했습니다. 이제 배경색 (bg-blue-500), 텍스트 색상 (text-white), 패딩 (p-4), Flexbox 레이아웃 (flex, justify-center, h-screen) 에 대한 유틸리티 사용법을 익혔습니다. 이러한 기초 지식은 더 복잡하고 반응성이 뛰어난 디자인을 빠르고 일관성 있게 구축하는 데 도움이 될 것입니다.
