내용으로 건너뛰기 문서 내비게이션으로 건너뛰기
GitHub에서 보기

타이포그래피

// Typography

전역 설정, 제목, 본문 텍스트, 목록 등을 포함하여 Bootstrap 타이포그래피에 대한 문서 및 예시입니다.

전역 설정

Bootstrap은 기본 전역 표시, 타이포그래피 및 링크 스타일을 설정합니다. 더 많은 제어가 필요한 경우 텍스트 유틸리티 클래스를 확인해보세요.

  • 각 OS 및 기기에 가장 적합한 font-family를 선택하는 기본 글꼴 스택을 사용합니다.
  • 보다 포괄적이고 접근 가능한 유형 척도를 위해 브라우저의 기본 루트 font-size (일반적으로 16px)를 사용하여 방텍스트가 필요에 따라 브라우저 기본값을 사용자 지정할 수 있습니다.
  • <body>에 적용된 타이포그래피 기반으로 $font-family-base, $font-size-base$line-height-base 속성을 사용합니다.
  • $link-color를 통해 글로벌 링크 색상을 설정합니다.
  • $body-bg를 사용하여 <body>background-color를 설정합니다 (기본적으로 #fff).

이러한 스타일은 _reboot.scss에서 찾을 수 있으며 전역 변수는 _variables.scss에서 정의됩니다. rem$ font-size-base를 설정해야 합니다.

제목

<h1>부터 <h6>까지의 모든 제목을 사용할 수 있습니다.

Heading Example
<h1></h1> h1. Bootstrap heading
<h2></h2> h2. Bootstrap heading
<h3></h3> h3. Bootstrap heading
<h4></h4> h4. Bootstrap heading
<h5></h5> h5. Bootstrap heading
<h6></h6> h6. Bootstrap heading
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

제목의 글꼴 스타일과 일치시키고 싶지만 관련 HTML 요소를 사용할 수 없는 경우 .h1부터 .h6 클래스도 사용할 수 있습니다.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

사용자 정의 제목

포함된 유틸리티 클래스를 사용하여 Bootstrap 3에서의 작은 보조 제목 텍스트를 다시 만듭니다.

Fancy display heading With faded secondary text

<h3>
  Fancy display heading
  <small class="text-muted">With faded secondary text</small>
</h3>

제목 표시

기존 제목 요소는 페이지 콘텐츠의 핵심에서 가장 잘 작동하도록 설계되었습니다. 눈에 띄는 제목이 필요한 경우 표시 제목을 사용하는 것이 좋습니다. 이 제목은 좀 더 크고 약간 더 독선적인 제목 스타일입니다.

Display 1
Display 2
Display 3
Display 4
Display 5
Display 6
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

디스플레이 제목은 $display-font-sizes Sass 맵과 두 개의 변수 $display-font-weight$display-line-height를 통해 구성됩니다.

$display-font-sizes: (
  1: 5rem,
  2: 4.5rem,
  3: 4rem,
  4: 3.5rem,
  5: 3rem,
  6: 2.5rem
);

$display-font-weight: 300;
$display-line-height: $headings-line-height;

서두

.lead를 추가하여 단락을 눈에 띄게 만드십시오.

This is a lead paragraph. It stands out from regular paragraphs.

<p class="lead">
  This is a lead paragraph. It stands out from regular paragraphs.
</p>

인라인 텍스트 요소

일반적인 인라인 HTML5 요소의 스타일링입니다.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

이러한 태그는 시맨틱 목적으로 사용되어야합니다:

  • <mark>는 참조 또는 표기 목적으로 표시되거나 강조된 텍스트를 나타냅니다.
  • <small>은 저작권 및 법적 텍스트와 같은 부가적인 댓글과 작은 텍스트를 나타냅니다.
  • <s>는 더 이상 관련이 없거나 더 이상 정확하지 않은 요소를 나타냅니다.
  • <u>는 텍스트가 아닌 주석이 있음을 나타내는 방식으로 렌더링되어야 하는 인라인 텍스트의 범위를 나타냅니다.

텍스트 스타일을 지정해야 된다면 다음 클래스를 사용할 수도 있습니다.

  • .mark<mark>와 동일한 스타일을 적용합니다.
  • .small<small>과 동일한 스타일을 적용합니다.
  • .text-decoration-underline<u>와 동일한 스타일을 적용합니다.
  • .text-decoration-line-through<s>와 동일한 스타일을 적용합니다.

위에는 표시되지 않았지만 HTML5에서 <b><i>를 자유롭게 사용하세요. <b>는 추가 중요성을 전달하지 않고 단어나 구문을 강조하는 반면 <i>는 대부분 음성, 기술 용어 등에 사용됩니다.

텍스트 유틸리티

텍스트 유틸리티색상 유틸리티를 사용하여 텍스트 정렬, 변형, 스타일, 두께, 선 높이, 장식 및 색상을 변경하십시오.

약어

약어 및 두텍스트어에 대한 HTML의 <abbr> 요소를 스타일링하여 마우스 오버시 확장된 버전을 표시합니다. 약어에는 기본 밑줄이 있으며 도움말 커서를 통해 마우스 오버 시 및 보조 기술 사용자에게 추가 컨텍스트를 제공합니다.

약간 더 작은 글꼴 크기의 약어에 .initialism을 추가합니다.

attr

HTML

<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

인용문

문서 내의 다른 소스에서 콘텐츠 블록을 인용합니다. HTML을 인용문으로 <blockquote class="blockquote">로 감쌉니다.

A well-known quote, contained in a blockquote element.

<blockquote class="blockquote">
  <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

출처 표기

HTML 사양에서는 인용구 속성이 <blockquote>외부에 배치되어야 합니다. 어트리뷰션을 제공할 때 <blockquote><figure>로 감싸고 <figcaption> 또는 블록 레벨 요소 (예: <p>)를 .blockquote-footer 클래스와 함께 사용하세요. 소스 작품의 이름도 <cite>로 감싸야 합니다.

A well-known quote, contained in a blockquote element.

<figure>
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

정렬

인용구의 정렬을 변경하려면 필요에 따라 텍스트 유틸리티를 사용하세요.

A well-known quote, contained in a blockquote element.

<figure class="text-center">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

A well-known quote, contained in a blockquote element.

<figure class="text-end">
  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    Someone famous in <cite title="Source Title">Source Title</cite>
  </figcaption>
</figure>

목록

스타일 제거

기본 list-style과 목록 항목의 왼쪽 여백을 제거합니다 (직계 자식만 해당). 이 부분은 직계 자식 목록 항목에만 적용됩니다. 즉, 중첩된 목록에 대해서도 클래스를 추가해야 합니다.

  • This is a list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.
<ul class="list-unstyled">
  <li>This is a list.</li>
  <li>It appears completely unstyled.</li>
  <li>Structurally, it's still a list.</li>
  <li>However, this style only applies to immediate child elements.</li>
  <li>Nested lists:
    <ul>
      <li>are unaffected by this style</li>
      <li>will still show a bullet</li>
      <li>and have appropriate left margin</li>
    </ul>
  </li>
  <li>This may still come in handy in some situations.</li>
</ul>

인라인

목록의 글 머리 기호를 제거하고 .list-inline.list-inline-item의 두 클래스 조합으로 약간의 margin을 적용합니다.

  • This is a list item.
  • And another one.
  • But they're displayed inline.
<ul class="list-inline">
  <li class="list-inline-item">This is a list item.</li>
  <li class="list-inline-item">And another one.</li>
  <li class="list-inline-item">But they're displayed inline.</li>
</ul>

설명 목록 정렬

그리드 시스템의 사전 정의된 클래스 (또는 시맨틱 믹스인)를 사용하여 용어와 설명을 수평으로 정렬합니다. 더 긴 용어의 경우 선택적으로 .text-truncate 클래스를 추가하여 줄임표로 텍스트를 자를 수 있습니다.

Description lists
A description list is perfect for defining terms.
Term

Definition for the term.

And some more placeholder definition text.

Another term
This definition is short, so no extra paragraphs or anything.
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.
<dl class="row">
  <dt class="col-sm-3">Description lists</dt>
  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">
    <p>Definition for the term.</p>
    <p>And some more placeholder definition text.</p>
  </dd>

  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>

  <dt class="col-sm-3">Nesting</dt>
  <dd class="col-sm-9">
    <dl class="row">
      <dt class="col-sm-4">Nested definition list</dt>
      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
    </dl>
  </dd>
</dl>

반응형 글꼴 크기

Bootstrap 5에서는 기본적으로 반응형 글꼴 크기를 활성화하여 텍스트가 장치 및 뷰포트 크기에 따라 더 자연스럽게 확장될 수 있도록 했습니다. 어떻게 작동하는지 알아보려면 RFS 페이지를 살펴보십시오.

Sass

변수

제목에는 크기 및 간격에 대한 전용 변수가 있습니다.

$headings-margin-bottom:      $spacer * .5;
$headings-font-family:        null;
$headings-font-style:         null;
$headings-font-weight:        500;
$headings-line-height:        1.2;
$headings-color:              null;

여기와 Reboot에서 다루는 기타 타이포그래피 요소에도 전용 변수가 있습니다.

$lead-font-size:              $font-size-base * 1.25;
$lead-font-weight:            300;

$small-font-size:             .875em;

$sub-sup-font-size:           .75em;

$text-muted:                  $gray-600;

$initialism-font-size:        $small-font-size;

$blockquote-margin-y:         $spacer;
$blockquote-font-size:        $font-size-base * 1.25;
$blockquote-footer-color:     $gray-600;
$blockquote-footer-font-size: $small-font-size;

$hr-margin-y:                 $spacer;
$hr-color:                    inherit;
$hr-height:                   $border-width;
$hr-opacity:                  .25;

$legend-margin-bottom:        .5rem;
$legend-font-size:            1.5rem;
$legend-font-weight:          null;

$mark-padding:                .2em;

$dt-font-weight:              $font-weight-bold;

$nested-kbd-font-weight:      $font-weight-bold;

$list-inline-padding:         .5rem;

$mark-bg:                     #fcf8e3;

믹스인

타이포그래피 전용 믹스인은 없지만 Bootstrap은 반응형 글꼴 크기 (Responsive Font Sizing, RFS)을 사용합니다.