섹션

섹션 (Section)

section 컴포넌트는 반응형 패딩을 가진 간단한 레이아웃 요소예요. body의 직계 자식으로 사용하기 가장 좋지요. 크기 수식어를 활용하는 방법도 함께 알아볼게요.

출처: 문서

본문

section 컴포넌트는 반응형 padding을 가진 간단한 레이아웃 요소예요. 주로 body의 직계 자식으로 사용합니다.

Example

Section / A simple container to divide your page into sections, like the one you're currently reading.

HTML

<section class="section">
<h1 class="title">Section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like
the one you're currently reading.
</h2>
</section>

크기 (Sizes)

is-medium과 is-large 수식어로 spacing을 바꿀 수 있어요.

Example

Medium section / A simple container to divide your page into sections...

HTML

<section class="section is-medium">
<h1 class="title">Medium section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like
the one you're currently reading.
</h2>
</section>

Example

Large section / A simple container to divide your page into sections...

HTML

<section class="section is-large">
<h1 class="title">Large section</h1>
<h2 class="subtitle">
A simple container to divide your page into <strong>sections</strong>, like
the one you're currently reading.
</h2>
</section>

Sass 및 CSS 변수 (Sass and CSS variables)

더 알아보기 (Learn more)

• Hero 문서
• Level 문서