Spacing helpers

Spacing helpers (간격 헬퍼)

편리한 마진(margin) m*과 패딩(padding) p* 헬퍼를 모든 방향으로 제공해요. 짧은 접두어와 방향 접미어를 조합해서 쓰면 돼요.

출처: 문서

본문

Bulma는 모든 방향에서 마진 m*과 패딩 p* 헬퍼를 제공해요:

  • *t는 위(top)
  • *r는 오른쪽(right)
  • *b는 아래(bottom)
  • *l는 왼쪽(left)
  • *x는 가로 방향으로 왼쪽과 오른쪽
  • *y는 세로 방향으로 위와 아래

여기서 마진/패딩 접두어와 방향 접미어를 조합해야 해요. 예를 들어:

  • margin-top은 mt-*를 사용해요.
  • padding-bottom은 pb-*를 사용해요.
  • margin-left와 margin-right 둘 다는 mx-*를 사용해요.

이러한 property-direction(속성-방향) 조합 각각에는 6가지 값 접미어 중 하나를 붙여야 해요:

*-0 0
*-1 0.25rem
*-2 0.5rem
*-3 0.75rem
*-4 1rem
*-5 1.5rem
*-6 3rem

모든 간격 헬퍼 목록 (List of all spacing helpers)

선택할 수 있는 112개의 간격 헬퍼가 있어요:

속성 단축어 클래스 ↓
값 → 0 0.25rem
margin m m-0
margin-top mt mt-0
margin-right mr mr-0
margin-bottom mb mb-0
margin-left ml ml-0
margin-left와 margin-right mx mx-0
margin-top와 margin-bottom my my-0
padding p p-0
padding-top pt pt-0
padding-right pr pr-0
padding-bottom pb pb-0
padding-left pl pl-0
padding-left와 padding-right px px-0
padding-top와 padding-bottom py py-0

이 클래스들을 사용하려면 아무 HTML 요소에나 붙이면 돼요:

<!-- 아래에 1rem의 마진을 추가 -->
<p class="mb-4">Margin bottom</p>

<!-- 왼쪽과 오른쪽에 0.25rem의 패딩을 추가 -->
<p class="px-1">Horizontal padding</p>

<!-- 오른쪽 마진을 제거하고 위에 0.75rem 패딩을 추가 -->
<p class="mr-0 pt-3">Both</p>

설정 (Configuration)

모든 개발자가 제각각의 취향을 가지고 있고, Bulma의 커스터마이징 기능을 충족시키기 위해, 자신만의 클래스 이름 단축어와 간격 값을 지정할 수 있어요.

예를 들어 이런 걸 원한다고 해 볼게요:

  • margin을 mg로 줄여 쓰고,
  • padding은 완전히 제외하고,
  • horizontal을 h로 줄이고,
  • vertical도 제외하고,
  • 값은 "small" 은 10px, "medium" 은 30px, "large" 는 60px의 3가지만 두고 싶어요.

다음 SCSS 변수들을 커스터마이징해서 CSS 출력을 간단하게 만들 수 있어요:

$spacing-shortcuts: ("margin": "mg");
$spacing-horizontal: "h";
$spacing-vertical: null;
$spacing-values: ("small": 10px, "medium": 30px, "large": 60px);
속성 단축어 클래스 ↓
값 → 10px 30px
margin mg mg-small
margin-top mgt mgt-small
margin-right mgr mgr-small
margin-bottom mgb mgb-small
margin-left mgl mgl-small
margin-left와 margin-right mgh mgh-small

이렇게 출력을 커스터마이징하면 간격 헬퍼 목록이 112개에서 18개로 줄어들어요.

더 알아보기 (Learn more)