멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

🌊 Tailwind

• ＊utility-first 목적으로 만들어진＊CSS 프레임워크
  • 미리 정의된 CSS의 특성들을 class를 통해 불러와 적용시킴
• CSS 문서로 가지 않고, 오직 HTML 문서 내에서 웹 사이트 구축이 가능하게 만듦

＊utility-first란?
-미리 세팅된 유틸리티 클래스를 활용하여 HTML코드 내에서 CSS를 적용시키는 것

＊CSS 프레임워크란?
-웹 디자인을 빠르고 쉽게 구축할 수 있도록 미리 개발된 완성형 디자인을 가져다 사용할 수 있는 도구

장점

• 클래스 이름 고민하지 않아도 됨
• 속도와 생산성 향상
• 일관성있는 디자인
• 유지보수 용이성
• 반응형 디자인

단점

• HTML 파일 크기 증가
• 기존 CSS코드와 충돌

✍🏻 Tailwind 실습

Tailwind 미적용 - HTML/CSS

Tailwind 적용 - HTML

[코드 해석]

<!-- Tailwind연결 -->
<script src="https://cdn.tailwindcss.com"></script> 

<!-- text-2xl의미: font-size: 1.5rem; /* 24px */line-height: 2rem; /* 32px */ -->
<!-- font-bold의미: font-weight: 700; -->
<h1 class="text-2xl font-bold">Hello, World!</h1> 

<!-- text-red-500의미: color: rgb(239 68 68); -->
<p class="text-red-500 font-bold">This is a red bold text.</p>

<!-- underline의미: text-decoration: underline; -->
<!-- decoration-wavy의미: text-decoration-style: wavy; -->
<p class="text-blue-700 underline decoration-wavy">
  This is a wavy underline blue text.</p>

[느낀 점]
html 작성과 동시에 표현하고자 하는 스타일과 디자인 요소를 class에 작성하여 바로 적용할 수 있는 점이 굉장히 편리하게 느껴졌다.
다만, 클래스가 많아진다면 가독성 측면에서는 조금 아쉬울 것 같다는 생각이 든다. 더 사용해보고 경험해보아야 장단점을 확실히 느낄 수 있겠다.