안녕하세요, 오늘은 Tailwind CSS 를 사용해보겠습니다.
Tailwind 는 CSS 프레임워크 중 하나로, HTML 안에서 CSS 스타일을 쉽고 빠르게 만들 수 있게 도와줍니다. 스타일 코드가 HTML 안에 있기 때문에 HTML과 CSS 파일을 따로 관리할 필요가 없어집니다. 그리고 부트스트랩과 비슷하게 미리 정해진 유틸리티 클래스를 사용함으로써 일관된 디자인이 가능하며 클래스명을 고민하는 수고를 덜 수 있습니다.
예를 들어, 다음과 같은 버튼 3개를 구현 할 때,
Tailwind CSS 를 사용하지 않고 일반 CSS 스타일링을 하면 다음과 같은 코드가 필요합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tailwindcss</title>
<style>
div {
margin: 16px;
}
#red {
background-color: red;
color: white;
padding: 8px 16px;
border-radius: 24px;
margin-right: 8px;
}
#green {
background-color: green;
color: white;
padding: 12px 32px;
font-weight: 600;
margin-right: 8px;
}
#black {
background-color: black;
color: white;
padding: 20px 64px;
font-size: x-large;
border-radius: 16px;
}
</style>
</head>
<body>
<div>
<button id="red">빨간색 버튼</button>
<button id="green">녹색 버튼</button>
<button id="black">검은색 버튼</button>
</div>
</body>
</html>
Tailwind CSS 를 사용하는 경우에는 다음과 같이 코드를 작성할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.tailwindcss.com"></script>
<title>tailwindcss</title>
</head>
<body>
<div class="m-4 block">
<button class="bg-red-500 text-white px-4 py-2 rounded-3xl mr-2">빨간색 버튼</button>
<button class="bg-green-700 text-white px-8 py-3 font-semibold mr-2">녹색 버튼</button>
<button class="bg-black text-white px-16 py-5 text-2xl rounded-2xl">검은색 버튼</button>
</div>
</body>
</html>
tailwind 를 설치하려면 여러 방법이 있지만 이번에는 간단히 CDN을 이용해보았습니다. <head> 태그 안에 아래 코드를 작성하면 됩니다.
<script src="https://cdn.tailwindcss.com"></script>
그리고 Tailwind CSS 의 또다른 장점은 쉽고 자유롭게 커스텀이 가능하다는 것인데요. CDN 방식을 사용할 경우 <head> 태그 안에 <script> 태그를 하나 더 아래처럼 추가한 다음에 원하는 커스텀 스타일을 지정할 수 있습니다.
<script>
tailwind.config = {
theme: {
extend: {
colors: {
myCustomColor: '#ffd600',
}
}
}
}
</script>
위에서 직접 설정한 커스텀 클래스인 'myCustomColor'를 사용해보겠습니다.
<div class="m-4 block">
<button class="bg-red-500 text-white px-4 py-2 rounded-3xl mr-2">빨간색 버튼</button>
<button class="bg-myCustomColor text-black px-8 py-3 font-semibold mr-2">커스텀노란색 버튼</button>
<button class="bg-black text-white px-16 py-5 text-2xl rounded-2xl">검은색 버튼</button>
</div>
커스텀 클래스가 반영이 잘 된 것을 확인할 수 있습니다.
Tailwind CSS에는 사용 가능한 클래스가 수 백개 이상이기 때문에 그것들을 전부 외워서 사용하기는 어렵습니다. Visual Studio Code 에서 제공하는 확장 프로그램인 Tailwind CSS IntelliSense 를 사용하면 미리보기, 자동완성 등의 기능을 이용해서 쉽게 개발할 수 있습니다.
이상으로 Tailwind CSS에 대해 알아보았습니다.
참고사이트:
'HTML／CSS' 카테고리의 다른 글
| [ HTML / CSS ] 파비콘(favicon) 적용해보기 (0) | 2022.09.20 |
|---|---|
| [HTML/CSS] 아날로그 시계 구현해보기 (0) | 2022.09.10 |
| [HTML/CSS] 다이나믹한 리스트 만들어보기 (0) | 2022.08.26 |
| [ HTML / CSS ] 늘어나는 textarea 만들기 (0) | 2022.08.21 |
| [HTML/CSS] 사진 로딩 애니메이션 사용하기 (0) | 2022.08.11 |
