Tailwind CSS: 유틸리티 클래스로 요소 스타일링하기

소개

이 랩에서는 매우 인기 있는 유틸리티 우선 (utility-first) CSS 프레임워크인 Tailwind CSS 를 소개합니다. 사용자 정의 클래스를 작성하는 기존 CSS 와 달리, Tailwind 는 HTML 에서 직접 조합하여 어떤 디자인이든 구축할 수 있는 저수준 유틸리티 클래스를 제공합니다. CDN 을 통해 Tailwind 를 설정하고, 배경, 텍스트, 패딩 및 레이아웃을 위해 기본 유틸리티 클래스를 간단한 웹 페이지 요소에 적용하는 방법을 배우게 됩니다. 이를 통해 유틸리티 우선 CSS 의 강력함과 속도를 직접 경험하게 될 것입니다.

필요한 index.html 파일은 ~/project 디렉토리에 미리 생성되어 있습니다. Tailwind 스타일을 적용하기 위해 이 파일을 수정하는 데 집중하게 됩니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 95%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

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} 명명 규칙을 사용합니다.

참고: https://tailwindcss.com/docs/background-color

중간 정도의 파란색 배경을 적용하는 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 클래스를 사용합니다.

참고: https://tailwindcss.com/docs/text-color

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} 형식으로 패딩 유틸리티를 제공합니다.

참고: https://tailwindcss.com/docs/padding

요소의 네 면 모두에 중간 정도의 패딩 (기본값 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) 에 대한 유틸리티 사용법을 익혔습니다. 이러한 기초 지식은 더 복잡하고 반응성이 뛰어난 디자인을 빠르고 일관성 있게 구축하는 데 도움이 될 것입니다.

Tailwind 를 사용한 현대적인 CSS 유틸리티

소개

HTML head 에 Tailwind CSS CDN 링크 추가하기

배경색을 위해 bg-blue-500 클래스 적용하기

텍스트 색상을 위해 text-white 클래스 사용하기

패딩을 위해 p-4 클래스 적용하기

레이아웃을 위해 flex justify-center 클래스 추가하기

요약