클로스트 이야기

[Css] 유용한 css 프레임워크 소개 (Bulma) 본문

개발이야기/Css

[Css] 유용한 css 프레임워크 소개 (Bulma)

클로스트 2023. 1. 23. 00:59

요즘은 css 도 처음부터 코딩하는 경우는 잘 없습니다.

그래서 일반 html, css 작성이나 혹은 프론트엔드 프레임워크를 이용하는 경우에도

css 프레임워크를 하나정도는 채용하여 개발합니다.

(웹 프론트를 개발하는 경우 전부 해당됩니다.)

그래서 이때까지 여러가지를 써본 결과 제일 저한테는 맘에 들었던 프레임워크를 소개하려고 합니다.

결론부터 말하자면 Bulma 를 추천하고 싶습니다.

공식 웹사이트는 아래와 같습니다.

https://bulma.io/ 

 

Bulma: Free, open source, and modern CSS framework based on Flexbox

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

bulma.io

 

저는 기존에는 bootstrap도 써보고 

vue를 개발할때 사용하는 프레임워크인 vuetify, quasar 도 써보고

최근에 핫하다는 tailwind css 도 조금 써보고 내린 결론입니다.

(물론 어디까지나 제의견입니다.)

각각의 것들의 제가 느낀 단점은요.

bootstrap 은 의존성이 많고, vuetify, quasar 역시 쓸만하긴 하지만 커스터마이징이 어려운 단점이 있었습니다.

tailwind는 클래스명이 너무 지저분해지는게 단점이구요.

그러한 갈증에서 찾은 css 프레임워크가 bulma 였고 

한번 사용한 이후로는 쭉 사용하고 있습니다.

불마(bulma) 의 장점 몇가지를 소개해 드리겠습니다.

  1. 100% 반응형 모바일 퍼스트 입니다.
  2. js 의존성이 없습니다.
  3. 오직 하나의 cdn 만으로도 사용할 수 있습니다.
  4. 사스파일들을 통째로 포함시킬수도 있으며, 커스터마이징이 쉽습니다.
  5. 클래스명이 매우 직관적이며, 사용하기 매우 편합니다.(ex. column is-4, button is-small)

일단 이정도의 장점을 설명 드릴수 있고, 여러분들도 한번 사용해보시면 매력을 느낄 수 있을겁니다.

'개발이야기 > Css' 카테고리의 다른 글

[CSS] linear-gradient() 사용하기  (0) 2022.08.09
Comments