[CSS] CSS 프레임워크(Bootstrap, TailwindCSS)

tailwindCSS를 사용해 보려고 하다가 문득 이게 뭐지? 하는 의문이 들었다.... 정리를 해보자.

---

Bootstrap

https://getbootstrap.kr/

Bootstrap

무료 or 유료로 사용 가능한 미리 만들어진 컴포넌트들을 파는 마켓.

로컬에 설치 후 마켓에 등록되어 있는 클래스 명을 가져와 사용할 수 있다.

• 컴포넌트 기반: 미리 디자인된 UI 컴포넌트(버튼, 네비게이션, 모달 등)를 제공합니다.
• 빠른 프로토타이핑: 표준화된 디자인과 컴포넌트를 활용하여 빠르게 웹사이트를 구축할 수 있습니다.
• 일관된 디자인: 기본 제공하는 스타일 덕분에 전체적인 디자인의 일관성을 쉽게 유지할 수 있습니다.
• 커스터마이징 한계: 기본 스타일을 재정의하거나 커스터마이징 하려면 CSS나 Sass 변수 등을 수정해야 합니다.
• 클래스 이름: 컴포넌트 이름 기반의 클래스(예: btn, navbar)를 사용합니다.

---

Tailwind CSS

https://tailwindcss.com/

작성이 쉽도록 정해놓은 css 규칙을 정의

로컬에 설치 후 사용

• 유틸리티 우선(Utility-First): 미리 정의된 작은 단위의 클래스들(예: p-4, text-center, bg-blue-500)을 조합하여 디자인합니다.
• 높은 커스터마이징: 기본 디자인이 거의 없으며, 유틸리티 클래스를 조합해 자유롭게 디자인할 수 있습니다.
• 재사용성 및 유지보수: 코드의 재사용성과 수정이 용이하지만, 클래스가 HTML 요소에 많이 붙어 길어질 수 있습니다.
• 퍼포먼스 최적화: PurgeCSS 같은 도구를 이용해 사용하지 않는 CSS를 제거하여 최종 빌드 크기를 줄일 수 있습니다.
• 개발자 경험: 디자인의 유연성과 커스터마이징을 중시하는 개발자에게 인기가 많습니다.

 

	Bootstrap	Tailwind CSS
	미리 디자인된 컴포넌트 기반	유틸리티 클래스 기반
커스터마이징 용이	X(복잡함)	O
컴포넌트	다양한 UI 컴포넌트(버튼, 모달 등) 제공	기본 컴포넌트 없음, 직접 조합하여 디자인
개발 속도	FAST	FAST
HTML 클래스	의미 중심 클래스 (예: btn, navbar)	기능 중심 클래스 (예: p-4, bg-blue-500)
파일 크기 및 최적화	기본 스타일이 많아 비교적 무거울 수 있음	PurgeCSS로 최적화하여 파일 크기 줄일 수 있음
커뮤니티 및 지원	오랜 기간 사용되어 안정적인 생태계와 문서 제공	최신 트렌드에 맞는 빠른 업데이트와 활발한 커뮤니티