Title and Subtitle

Title and Subtitle (제목과 부제목)

제목(heading)에는 title과 subtitle 두 종류가 있어요. 페이지에 깊이(depth)를 더하는 아주 간단한 방법이에요.

출처: 문서

본문

Example

<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>

크기 (Sizes)

6가지 크기를 사용할 수 있어요.

Example

<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
<h4 class="title is-4">Title 4</h4>
<h5 class="title is-5">Title 5</h5>
<h6 class="title is-6">Title 6</h6>

Example

<h1 class="subtitle is-1">Subtitle 1</h1>
<h2 class="subtitle is-2">Subtitle 2</h2>
<h3 class="subtitle is-3">Subtitle 3</h3>
<h4 class="subtitle is-4">Subtitle 4</h4>
<h5 class="subtitle is-5">Subtitle 5</h5>
<h6 class="subtitle is-6">Subtitle 6</h6>

title과 subtitle을 조합하면 두 요소가 서로 가까워져요.

일반적인 규칙으로, 크기 차이를 2로 두는 것을 권장해요. 즉 title is-1을 쓴다면 subtitle is-3과 조합하세요.

Example

<p class="title is-1">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>

<p class="title is-2">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>

<p class="title is-3">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>

첫 번째 요소에 is-spaced 수정자를 붙이면 title과 subtitle 사이의 기본 간격을 유지할 수 있어요.

Example

<p class="title is-1 is-spaced">Title 1</p>
<p class="subtitle is-3">Subtitle 3</p>

<p class="title is-2 is-spaced">Title 2</p>
<p class="subtitle is-4">Subtitle 4</p>

<p class="title is-3 is-spaced">Title 3</p>
<p class="subtitle is-5">Subtitle 5</p>

Sass와 CSS 변수

더 알아보기 (Learn more)

• Content 요소
• Section 레이아웃