Pre Built-in과 Utility-first

🍰 Pre Built-in과 Utility-first는 뭐고 차이는 무엇인가?

: CSS 프레임워크와 스타일링 접근 방식에서 중요한 개념

🍴 Pre Built-in

: CSS 프레임워크가 미리 정의된 스타일과 컴포넌트 세트를 제공하는 접근 방식

1. 미리 정의된 스타일과 컴포넌트 - 버튼, 폼, nav바 같은 UI 요소들이 미리 스타일링 되어 제공됨
2. 일관된 디자인 - 프레임워크 내의 모든 컴포넌트가 동일한 디자인 패턴 따름
3. 쉽고 빠른 개발 - 미리 준비된 것들을 사용하여 개발 속도 높임

ex) Bootstrap, Bulma, Foundation

🍴 Utility-first

: CSS 클래스를 통해 작은 스타일 단위(유틸리티 클래스) 제공, 이들을 조합해 원하는 스타일 만들어감

1. 작은 단위의 클래스 - 각 클래스는 하나의 특정 스타일 정의함(ex - mt-4는 마진 탑을 4단위로 설정)
2. 조합 가능한 스타일 - 여러 유틸리티 클래스를 조합해 복잡한 스타일 만들 수 있음
3. 높은 유연성 - 스타일 재사용, 필요에 따라 수정 가능

ex) Tailwind CSS

🍴 Tailwind vs. Bootstrap

• 사전에 제작된 컴포넌트 제공 X
• 쉽게 해석 가능한 class 속성
• 사용자 정의 구성(Config)을 통한 높은 커스터마이징