Bulma CSS 프레임워크 치트시트

Bulma Bulma는 순수하게 Flexbox를 기반으로 구축된 모던 오픈소스 CSS 프레임워크입니다.

반응형 중단점 (Breakpoints)

         768px       1024px              1216px       1408px
<---------^------------^------------------^-------------^------------->
  Mobile      Tablet         Desktop         Widescreen      FullHD

• 모바일: 최대 768px
• 태블릿: 769px부터
• 데스크톱: 1024px부터
• 와이드스크린: 1216px부터
• FullHD: 1408px부터

---

컬럼 그리드 시스템

.columns 플렉스 컨테이너 내부에 .column 자식 요소를 배치합니다:

<div class="columns">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

컬럼 너비 한정자

<div class="column is-half">1/2 너비</div>
<div class="column is-one-third">1/3 너비</div>
<div class="column is-three-quarters">3/4 너비</div>
<div class="column is-4">4 / 12 (1/3)</div>

---

핵심 한정자 (Core Modifiers)

색상 테마

• .is-primary: 터콰이즈
• .is-link: 블루
• .is-info: 시안
• .is-success: 그린
• .is-warning: 옐로우
• .is-danger: 레드

크기 한정자

• .is-small
• .is-normal
• .is-medium
• .is-large

상태 한정자

• .is-outlined: 투명 배경과 색상 테두리
• .is-loading: 내장 애니메이션 로딩 스피너
• .is-disabled: 비활성화 상태

---

타이포그래피 헬퍼

폰트 크기

정렬 및 대소문자 변환

• .has-text-centered: 가운데 정렬
• .has-text-left: 왼쪽 정렬
• .has-text-right: 오른쪽 정렬
• .has-text-justified: 양쪽 맞춤 정렬
• .is-capitalized: 각 단어의 첫 글자 대문자화
• .is-lowercase: 모두 소문자
• .is-uppercase: 모두 대문자

---

WYSIWYG 콘텐츠 래퍼

.content 클래스를 사용하여 마크다운이나 CMS 사용자 본문의 서식을 지정합니다:

<div class="content">
  <h1>메인 제목</h1>
  <p>타이포그래피 비율이 자동 조정된 표준 단락 텍스트입니다.</p>
  <ul>
    <li>글머리 기호 목록 항목 1</li>
    <li>글머리 기호 목록 항목 2</li>
  </ul>
</div>