Tailwind CSS 소개 및 설치 과정
Tailwind CSS란 무엇인가?
Tailwind CSS는 별도의 CSS 파일을 작성할 필요 없이, HTML 안에서 유틸리티 클래스를 이용해 빠르게 스타일링할 수 있는 도구입니다.
Utility-First CSS Framework란?
미리 정의된 작은 클래스들을 조합하여 바로 HTML 안에서 원하는 디자인을 만드는 방식입니다. 이로 인해 코드의 재사용성과 가독성이 높아집니다.
Tailwind CSS의 이점
- 일관된 스타일 유지
- 프로젝트 전반에서 동일한 스타일 규칙을 재사용할 수 있습니다.
- 이를 통해 유지보수성과 협업 시 효율성이 크게 증가합니다.
- 성능 최적화
- Tailwind CSS는 실제로 사용된 CSS만 포함하도록 최적화됩니다.
- 사용되지 않는 CSS는 제외되므로 최종 CSS 파일 크기가 작아집니다.
학습 목표
React를 배우는 과정에서 가볍게 Tailwind CSS를 접했지만, 이번에는 공식 문서를 기반으로 아래와 같은 내용을 익히고자 합니다:
- Tailwind CSS의 기초
- 레이아웃 구성
- 반응형 웹 제작
개발 툴: Visual Studio Code (VS Code)
Tailwind CSS 설치
Tailwind CSS는 다음과 같이 간단히 설치할 수 있습니다.
공식 설치 가이드
공식문서 설치 가이드를 참고하세요.
간단한 HTML 파일 작성
아래 스크립트를 HTML 파일에 추가하면 Tailwind CSS를 사용할 수 있습니다.
<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>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>코드 설명
text-3xl: 텍스트 크기를 3배로 키웁니다.font-bold: 텍스트를 두껍게 표시합니다.underline: 텍스트에 밑줄을 그립니다.
Snippets 설정으로 반복 작업 자동화
HTML 파일을 반복적으로 작성할 때, 작업 효율성을 높이기 위해 Snippets 기능을 설정할 수 있습니다.
Snippets 설정 방법 (Windows 기준)
-
Ctrl + Shift + P를 누릅니다.
-
Snippets를 검색합니다.
-
아래와 같은 화면에서 코드 조각 구성을 선택합니다.
-
html.json 파일을 열고 기존 내용을 삭제한 뒤 아래 코드를 입력합니다:
Snippets 코드 예제
{
"Tailwind CDN Template": {
"prefix": "tailwind-cdn",
"body": [
"<!DOCTYPE html>",
"<html lang='ko'>",
"<head>",
" <meta charset='UTF-8'>",
" <meta name='viewport' content='width=device-width, initial-scale=1.0'>",
" <title>Tailwind CSS</title>",
" <script src='https://cdn.tailwindcss.com'></script>",
"</head>",
"<body>",
" $1",
"</body>",
"</html>"
],
"description": "Basic Tailwind CSS CDN Template"
}
}- 사용 방법
- HTML 파일에서
tailwind-cdn을 입력한 뒤 Tab 키를 누르면 기본 템플릿이 자동으로 생성됩니다.
- HTML 파일에서
결론
- Tailwind CSS는 HTML 내에서 유틸리티 클래스를 활용해 빠르고 효율적으로 스타일링할 수 있는 도구입니다.
- 설치는 매우 간단하며, CDN을 활용해 기본적인 환경을 바로 구축할 수 있습니다.
- Snippets를 설정하면 반복 작업을 줄이고, 개발 효율성을 극대화할 수 있습니다.
개발자가 되고 싶은 정치학도생의 기술 블로그