🌞css 프레임워크

CSS 프레임워크는 웹 개발에서 일반적으로 사용되는 CSS 코드를 미리 작성해 둔 라이브러리이다. CSS 프레임워크는 일반적으로 디자인 요소를 간편하게 적용할 수 있는 클래스를 제공하며, 일관된 디자인을 쉽게 구현할 수 있도록 도와준다.

대표적인 css 프레임워크로는

• Bootstrap
• Foundation
• Bulma
• Semantic UI
• Materialize

이 있다.

⭐TailWindCSS란

🪐TailWindCSS란

Tailwind CSS는 CSS 클래스를 미리 정의해둔 CSS 프레임워크로, 개발자가 HTML 요소에 적용할 클래스를 직접 작성하지 않고도 디자인을 쉽게 구현할 수 있습니다.
Tailwind CSS는 반응형 웹 디자인을 쉽게 구현할 수 있도록 클래스를 제공하며, 커스터마이즈 가능한 다양한 기능을 제공합니다.
Tailwind CSS는 커뮤니티에서 지속적으로 업데이트되고, 다양한 라이브러리와 통합되어 있어 프로젝트 개발 시 효율적으로 사용할 수 있습니다. -chatGPT

🪐TailWindCSS의 장점

Tailwind CSS는 부트스트랩과 비슷하게 m-1, flex와 같이 미리 세팅된 Uitility Class 를 활용하
는 방식으로 HTML 에서 스타일링을 할 수 있다.

1. 그러기에 빠른 스타일링 작업이 가능하며
2. class 혹은 id 명을 작성하기 위한 고생을 하지 않아도 된다.
3. 유틸리티 클래스가 익숙해지는 시간이 필요할 수 있지만 IntelliSense 플러그인이 제공돼서 금방 익숙해질 수 있다.

예시

<div key={id}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
            ref={provided.innerRef}
            className={`${snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"} 'flex item-center justify-between w-full px-4 py-1 my-2 text-gray-600 bg-gray-100 border rounded`}>

JSX에서 div 태그를 생성하면서 해당 태그에 css 스타일링을 해주는 예시이다.

주목해야할 점은 두 가지이다.
하나는 flex item-center... 처럼 기존에 이미 작성된 css 코드를 통해서 스타일링을 한다는 점이고 하나는 JSX문법과 시너지 효과를 발휘한다는 점이다. 위 예제에서는 snapshot.isDragging의 boolean 값에 따라서 다른 스타일링을 줄 수 있으며 두 스타일링이 극명하게 다른 css디자인이라고 할 지라도 직접 스타일링을 하지 않고 이미 정의된 css 디자인을 사용하기 때문에 빠르고 간편다.