본문으로 건너뛰기

TailwindCSS 개요.

소개​

Tailwind CSS는 사용자 인터페이스를 구축하기 위한 사전 정의된 매우 사용자 정의 가능한 클래스 세트를 제공하는 유틸리티 중심 CSS 프레임워크입니다. 사전 디자인된 컴포넌트가 있는 전통적인 CSS 프레임워크와 달리 Tailwind CSS는 유틸리티 클래스를 제공하여 고유하고 사용자 정의 가능한 디자인을 만들 수 있도록 중점을 둡니다.

이 튜토리얼에서는 Tailwind CSS의 역사, 기능 및 예제를 살펴보겠습니다.

역사​

Tailwind CSS는 Adam Wathan, Jonathan Reinink, Steve Schoger 및 David Hemphill에 의해 만들어졌습니다. 기존 CSS 프레임워크와는 달리 Tailwind CSS는 사용하지 않는 스타일로 인해 비대해지는 문제와 사용자 정의 디자인을 위해 기본 스타일을 무효화해야 하는 문제를 해결하기 위해 2017년에 출시되었습니다.

개발자들이 성능이나 유지 관리성을 희생하지 않고 빠르게 프로토타입을 만들고 사용자 정의 디자인을 구축할 수 있는 프레임워크를 구축하고자 했습니다. 유틸리티 중심 접근 방식을 통해 Tailwind CSS는 유연성과 간결함을 중요시하는 개발자들 사이에서 인기를 얻었습니다.

기능​

1. 유틸리티 중심 접근 방식​

Tailwind CSS는 각 CSS 클래스가 단일 유틸리티를 나타내는 유틸리티 중심 접근 방식을 따릅니다. 이러한 유틸리티 클래스는 모듈식이고 재사용 가능한 방식으로 다양한 요소에 스타일을 적용하는 데 사용할 수 있습니다.

예를 들어, 요소에 여백을 추가하려면 m-{size} 클래스를 사용할 수 있습니다. 여기서 {size}는 다른 여백 크기를 나타냅니다. 모든 면에 4단위의 여백을 추가하려면 m-4 클래스를 사용할 수 있습니다.

<div class="m-4">
  이 요소는 모든 면에 4단위의 여백이 있습니다.
</div>

2. 사용자 정의​

Tailwind CSS는 광범위한 사용자 정의 옵션을 제공합니다. 색상, 글꼴 크기, 브레이크포인트 등 프레임워크의 다양한 측면을 프로젝트의 디자인 요구에 맞게 구성할 수 있습니다.

Tailwind CSS를 사용자 정의하려면 tailwind.config.js 파일을 수정하여 기본 구성 값을 재정의할 수 있습니다.

3. 반응형 디자인​

Tailwind CSS를 사용하면 반응형 디자인을 간편하게 만들 수 있습니다. 다양한 화면 크기에 따라 요소의 외관을 제어할 수 있는 반응형 유틸리티 클래스를 제공합니다.

예를 들어, 작은 화면에서 요소를 숨기려면 hidden sm:block 클래스를 사용할 수 있습니다. 이 클래스는 작은 브레이크포인트(sm)보다 작은 화면에서 요소를 숨깁니다.

<div class="hidden sm:block">
  이 요소는 작은 화면에서 숨겨집니다.
</div>

4. Flexbox 및 Grid 유틸리티​

Tailwind CSS에는 Flexbox와 CSS Grid를 사용하여 유연하고 반응형 레이아웃을 구축하기 위한 포괄적인 유틸리티 클래스 세트가 포함되어 있습니다.

예를 들어, flex와 justify-center 클래스를 사용하여 가운데 정렬된 내용을 포함하는 플렉스 컨테이너를 만들 수 있습니다.

<div class="flex justify-center">
  이 내용은 수평으로 가운데 정렬됩니다.
</div>

5. 다크 모드 지원​

Tailwind CSS는 내장된 다크 모드 지원을 제공합니다. 애플리케이션의 루트 요소에 하나의 클래스를 추가함으로써 밝은 색상과 어두운 색상 스킴 사이를 전환할 수 있습니다.

<body class="dark">
  <!-- 다크 모드 스타일이 적용됩니다 -->
</body>

예제​

Tailwind CSS의 사용법을 보여주기 위해 몇 가지 예제를 살펴보겠습니다:

예제 1: 버튼​

Tailwind CSS를 사용하면 유틸리티 클래스를 조합하여 사용자 정의 스타일의 버튼을 쉽게 생성할 수 있습니다. 다음은 기본 버튼의 예입니다:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  클릭하세요
</button>

위 코드에서 버튼은 파란색 배경(bg-blue-500), 마우스 오버시 더 어두운 색상으로 변경(hover:bg-blue-700)되며 흰색 텍스트 색상(text-white)을 사용합니다. 또한 패딩(py-2 px-4)과 둥근 모서리(rounded)가 있습니다.

예제 2: 반응형 레이아웃​

Tailwind CSS를 사용하면 반응형 레이아웃을 간편하게 만들 수 있습니다. 다음은 작은 화면에서는 단일 열로 축소되는 두 개의 열 레이아웃의 예입니다:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2">
    왼쪽 열
  </div>
  <div class="w-full md:w-1/2">
    오른쪽 열
  </div>
</div>

위 코드에서 flex와 flex-col 클래스는 열 레이아웃을 가진 플렉스 컨테이너를 생성합니다. 중간 브레이크포인트(md)보다 큰 화면에서는 열의 너비가 절반(w-1/2)로 설정되고, 더 작은 화면에서는 열이 수직으로 쌓입니다.

Tailwind CSS에 대해 자세히 알아보고 다양한 기능과 문서를 탐색하려면 공식 웹사이트를 방문하세요: https://tailwindcss.com.