반응형
이 포스팅에서는 Tailwind CSS에 대해 다뤄보려고 한다.
TailwindCSS란?
- Utility-first CSS Framework로 부트스트랩과 비슷하게 이미 지정된 단어들을 클래스명에 선언하게 되면 해당 CSS가 적용
되는 방식이다.
Layout, Flex, Effects, Space 등 다양한 CSS가 클래스명에 따라 적용되어있어 찾아서 사용하면 보다 간편하게 웹사이트에 스타일을 입힐 수 있다.
내가 생각한 Tailwind CSS의 장단점
1) 장점
- 클래스의 이름을 고민하지 않아도 된다.
- 쉽게 반응형 페이지를 구현할 수 있다.
- 공식문서를 통해 쉽게 사용 가능
- 반복되는 스타일은 컴포넌트 추상화, 클래스 추상화를 통해서 재사용 가능
2) 단점
- 지정된 클래스명을 알아야 사용할 수 있다.
- CSS속성들의 우선 순위 문제
장점이자 단점인것 같은 부분은 HTML 코드에 CSS style이 동시에 적혀 코드의 직관성은 좋으나 가시성이 떨어진다. 즉 이 부분이 편리하면서도 때로는 불편함이 있는것 같다.
** VS Code를 사용할 경우 Tailwind CSS IntelliSense 플러그인을 사용하여 자동완성 기능과 오류나 버그를 함께 확인하면서 작업하는것이 좋다.
아래는 간단한 예시코드이다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tailwind CSS</title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<div id="root">
<div class="p-6 mt-6 rounded-lg shadow-md transition-colors duration-500 hover:bg-green-100">
<div class="flex">
<div class="flex-auto">
<a href="#">Hello</a>
</div>
<div class="text-center text-sm">
<div class="w-10 text-white bg-green-300 rounded-lg px-0 py-2">works</div>
</div>
</div>
<div class="flex mt-3">
<div class="grid grid-cols-3 text-sm text-gray-500">
<div><i class="fas fa-user mr-1"></i>User</div>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
실행 시
Hover style 동작
Tailwind CSS에 대한 더 많은 정보는 메인 사이트에서 확인하시면 됩니다.
반응형
'IT Tech & Terms' 카테고리의 다른 글
| 코딩테스트란? (0) | 2023.12.11 |
|---|---|
| RTMP(Real Time Messaging Protocol) (1) | 2023.12.11 |
| SMTP for GMAIL (2) | 2023.11.28 |
| SMTP 설명 및 정리 (2) | 2023.11.28 |
| [IT] Webhook(웹훅)이란? (0) | 2023.11.16 |
