Block

Block (블록)

Bulma의 가장 기본적인 스페이서(spacer) 요소예요. 형제(sibling) HTML 요소들 사이에 일정한 여백을 만들어 주는 간단한 도구예요.

출처: 문서

본문

block 요소는 아주 간단한 스페이서 도구예요. 형제인 HTML 요소끼리 일정한 margin을 유지할 수 있게 해 줘요.

Example

<div class="block">
  This text is within a <strong>block</strong>.
</div>
<div class="block">
  This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>
<div class="block">
  This text is within a <strong>third block</strong>. This block has no margin at the bottom.
</div>

보시다시피 처음 두 블록에는 margin-bottom이 적용되지만, 세 번째 블록에는 적용되지 않아요. Bulma는 마지막 블록을 제외한 모든 블록에 공간을 넣기 때문이에요. 즉 블록을 몇 개든 원하는 만큼 사용할 수 있고, 간격은 블록 사이에만 생겨요.

block을 사용하지 않으면 HTML 요소 사이에 아무 공간도 없어요.

Example

<div>
  This text is <em>not</em> within a <strong>block</strong>.
</div>
<div>
  This text <em>isn't</em> within a <strong>block</strong> either. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
</div>
<div>
  This text is also <em>not</em> within a <strong>block</strong>.
</div>

사실 이미 사용하고 있어요

사실, 여러분은 이미 모르는 사이에 block을 사용하고 있어요. block의 CSS 속성은 여러 Bulma 요소와 컴포넌트에 걸쳐 공유되고 있어요.

• breadcrumb
• level
• message
• pagination
• tabs
• box
• content
• notification
• other
• progress
• table
• title

이것은 @extend %block Sass 플레이스홀더(placeholder) 기능 덕분이에요.

어떤 Bulma 요소와 컴포넌트를 사용하든, 그리고 그 순서가 어떻든 간에 요소 사이에는 항상 일정한 공간이 생겨요.

CSS 한 줄

보시다시피 block의 CSS는 아주 단순해요. 마지막 요소를 제외한 모든 형제 요소에 margin-bottom을 적용해요.

.block:not(:last-child) {
  margin-bottom: 1.5rem;
}

이렇게 하면 마지막 형제 요소가 불필요한 공간을 아래에 추가하지 않도록 막아 줘요.

Sass와 CSS 변수

더 알아보기 (Learn more)

• Box 요소
• Button 요소