본문 바로가기

카테고리 없음

BootStrap과 Tailwind CSS

BootStrap이란??

BootStrap은 트위터에서 사용하고 있는 레이아웃과 버튼, 네비게이션 바 등의 CSS와 JS를 이용해서 만든것들의

집합이라고 생각하면 편합니다.

 

 

BootStrap의 장점은??

 

먼저 앞서 설명 한듯이 CSS와 JS를 통해 이미 만들어져 있기 때문에 만들어진 것들을 자신이 원할때 마음껏 사용가능하다는 것이 가장 큰 장점입니다.

또 다른 장점으로는 반응형으로 핸드폰이나 노트북, 다른 디바이스에서도 잘 동작가능합니다.

 

하지만 장점이 명확한 만큼 단점도 장점에 관련이 있습니다.

 

BootStrap의 단점은??

 

앞서 말했듯이 많은 사람들이 쉽게 접하고 쉽게 만들 수 있기 때문에 본인만의 독자적인 커스터마이징이 힘든 편입니다.

자신만의 독자적인 커스터 마이징과 팀원들과 협업하여 퍼블리싱을 할때는 이미 짜여져 있는 레이아웃에 삽입해야하기

때문에 !important를 남발하는 경우가 나올 수 있습니다.

또, 페이지 로딩 속도가 다른 프레임워크와 비교하였을때 상당히 무거운 편이기 때문에 느린편입니다.

 

 

Tailwind CSS는??

 

Tailwind Labs에서 개발한 CSS 프레임워크이자 아래 자료에 따르면 인지도와 사용량 부분에서는 BootStrap이 우수하지만

관심도와 만족도 부분에서 Tailwind가 우수한 것을 볼 수 있습니다. 

 

 

 

Tailwind CSS의 장점과 단점

 

장점은??

 

클래스 이름을 더이상 고민하지 않아도 됩니다.

위 그림처럼 정해져 있는 클래스 이름을 사용하면 됩니다.

 

두번째 장점은 화면을 번갈아가면서 개발하지 않아도 됩니다.

애초에 html파일 안에서 개발하기 때문에 css파일로 넘어가서 개발하고, html파일로 다시 넘어가는

귀찮은 일을 하지 않아도 된다는 것입니다.

 

단점은??

 

아까 사진처럼 Tailwind CSS를 사용하지 않았다면 className을 이해하기 어려울 수 있는 불편함이 있습니다.

즉, 코드의 가독성이 떨어질 수 있습니다.

또 다른 단점으로는 시작하기 자체가 어렵다는 단점이 있습니다.

애초에 Tailwind CSS에서 클래스이름을 정의해버렸기 때문에 클래스이름 자체를 전부 다 알고 사용을 해야하기 때문에

처음 시작할때의 시간소요가 걸릴 수 있다는 단점이 있습니다.

 

블로그를 읽어주셔서 감사합니다 ^^