Post Cover
공지사항

2026.01.07

브루마 프레임워크 100% 활용법

에디터 김브루 · 주니어 개발자

모바일 퍼스트 환경에서 웹을 개발할 때 가장 고민되는 부분은 복잡한 설정 없이도 얼마나 깔끔한 UI를 뽑아낼 수 있는가입니다. 브루마(Bulma)는 Flexbox 기반의 현대적인 CSS 프레임워크로, 자바스크립트가 포함되어 있지 않아 매우 가볍습니다.

"별도의 CSS 파일 없이 브루마가 제공하는 클래스만으로도 충분히 완성도 높은 모바일 UI를 구축할 수 있습니다."

특히 헬퍼 클래스들을 적재적소에 활용하면 여백(Margin, Padding), 텍스트 정렬, 반응형 숨김 처리 등을 HTML 안에서 한 번에 해결할 수 있습니다. 예를 들어 is-flexis-align-items-center 조합은 모바일 상단 바를 구성할 때 가장 유용합니다.

  • is-fluid: 너비 제한 없이 가득 채우기
  • is-rounded: 부드러운 모서리 처리
  • has-background-light: 은은한 회색 배경색 적용