이번에 새로 들어가는 프로젝트에서 Tailwind css를 사용하기로 하여 공부를 시작했다.
Tailwind CSS 란?
CSS 프레임워크 중 하나로 클래스명을 사용하여 스타일을 적용하는 방식으로 사용한다.
<h1 class="text-xs font-bold">Hello world!</h1>
이런 식으로 Style 태그를 사용하지 않고 class 속성에 스타일을 지정한다.
장점
- 별도의 css 파일을 생성하여 연결해주지 않아도 된다.
- 스타일을 지정하는 데 사용하는 코드의 길이가 짧아진다.
- ⭐클래스 이름을 고민할 필요가 없다. (이건 너무 큰 장점이라고 생각함)
- 반응형 스타일을 구현하기 쉬워진다.
단점
- class 속성에 여려 스타일을 지정하면 HTML 코드가 지저분해진다. (개인적으로 이게 너무 거슬림)
- class 속성 속 여러 코드를 익히는데 시간이 걸린다. (css 코드를 알고 있다면 시간을 단축할 수 있다.)
사용하며 느낀점
많은 기업에서도 쓰일정도의 기능을 가지고 있고 웬만한 스타일은 문서를 통해 쉽게 만들 수 있어 편리했다. 다만 html 코드가 길어지는 건 아직도 익숙하지 않아서 보기 좀 안 좋지만 class명을 매번 지어줄 필요 없는 건 너무 좋았다!! 이게 정말 시간이 오래 걸렸는데
개인 프로젝트에서도 한번 사용해보면서 점점 익숙해져야 할 것 같다
'HTML,CSS' 카테고리의 다른 글
HTML tag <meta> 정의 특징 (0) | 2023.02.02 |
---|---|
[CSS]font-size 속성 크기 단위 (0) | 2022.08.14 |
[css] 색상 단위 (rgba rgb) (0) | 2022.07.31 |
[CSS] -webkit-autofill <input /> 자동 완성 배경 색 삭제 (0) | 2022.07.15 |
Form Validator 폼 유효성 검사 (0) | 2022.07.07 |