Typography

Typography (타이포그래피)

전역 설정, 제목, 본문 텍스트, 목록 등을 포함한 Bootstrap 타이포그래피의 문서와 예시를 다룹니다.

출처: 문서

본문

전역 설정 (Global settings)

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

  • 각 OS와 기기에 가장 좋은 font-family를 선택하는 네이티브 글꼴 스택을 사용합니다.
  • 더 포용적이고 접근성 높은 타입 스케일을 위해 브라우저의 기본 루트 font-size(대개 16px)를 사용해 방문자가 필요에 따라 브라우저 기본값을 커스터마이즈할 수 있게 합니다.
  • $font-family-base, $font-size-base, $line-height-base 속성을 <body>에 적용되는 타입그래픽 기본값으로 사용합니다.
  • $link-color로 전역 링크 색상을 설정합니다.
  • $body-bg를 사용해 <body>에 background-color를 설정합니다(기본 #fff).

이 스타일들은 _reboot.scss에서 찾을 수 있고, 전역 변수들은 _variables.scss에 정의되어 있습니다. $font-size-base를 rem으로 설정해야 합니다.

제목 (Headings)

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

제목 예시
<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>

.h1부터 .h6 클래스도 사용할 수 있습니다. 제목의 글꼴 스타일을 맞추고 싶지만 관련 HTML 요소를 사용할 수 없을 때 유용합니다.

<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>

제목 커스터마이즈 (Customizing headings)

포함된 유틸리티 클래스를 사용해 Bootstrap 3의 작은 보조 제목 텍스트를 재현하세요.

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

Display 제목 (Display headings)

전통적인 제목 요소는 페이지 콘텐츠의 본문에 가장 잘 맞도록 설계되었습니다. 제목이 눈에 띄어야 할 때는 display 제목 — 더 크고, 다소 더 의견이 담긴 제목 스타일 — 을 사용하는 것을 고려하세요.

<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 제목은 $display-font-sizes Sass 맵과 $display-font-weight, $display-line-height 두 변수를 통해 구성됩니다.

Display 제목은 $display-font-family와 $display-font-style 두 변수로 커스터마이즈할 수 있습니다.

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

$display-font-family: null;
$display-font-style:  null;
$display-font-weight: 300;
$display-line-height: $headings-line-height;

Lead

.lead를 추가해 단락이 눈에 띄게 만드세요.

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

인라인 텍스트 요소 (Inline text elements)

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

<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>는 주로 음성, 기술 용어 등에 사용됩니다.

텍스트 유틸리티 (Text utilities)

텍스트 정렬, 변환, 스타일, 무게, 줄 간격, 장식, 색을 텍스트 유틸리티와 색상 유틸리티로 바꾸세요.

약어 (Abbreviations)

약어와 두문자어용 HTML <abbr> 요소의 스타일된 구현으로, hover 시 확장 버전을 보여줍니다. 약어에는 기본적으로 밑줄이 있으며, hover 시와 보조 기술 사용자에게 추가 컨텍스트를 제공하는 help 커서를 얻습니다.

약어에 .initialism을 추가하면 약간 더 작은 font-size를 얻습니다.

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

Blockquotes

문서 내에서 다른 출처의 콘텐츠 블록을 인용하기 위한 것입니다. 인용문으로 원하는 HTML 주위에 <blockquote class="blockquote">를 감싸세요.

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

출처 이름 붙이기 (Naming a source)

HTML 사양은 blockquote 출처 표기를 <blockquote> 밖에 두도록 요구합니다. 출처를 표시할 때는 <blockquote>를 <figure>로 감싸고 <figcaption> 또는 .blockquote-footer 클래스가 있는 블록 레벨 요소(예: <p>)를 사용하세요. 출처 작품의 이름도 <cite>로 감싸야 합니다.

<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>

정렬 (Alignment)

blockquote의 정렬을 바꾸려면 필요에 따라 텍스트 유틸리티를 사용하세요.

<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>

<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>

목록 (Lists)

무스타일 (Unstyled)

목록 항목(직계 자식만)의 기본 list-style과 왼쪽 마진을 제거합니다. 이것은 직계 자식 목록 항목에만 적용되므로, 중첩 목록에도 클래스를 추가해야 합니다.

<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>

인라인 (Inline)

두 클래스 .list-inline과 .list-inline-item의 조합으로 목록의 불릿을 제거하고 가벼운 margin을 적용하세요.

<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>

설명 목록 정렬 (Description list alignment)

그리드 시스템의 미리 정의된 클래스(또는 의미론적 mixins)를 사용해 용어와 설명을 가로로 정렬하세요. 더 긴 용어에는 선택적으로 .text-truncate 클래스를 추가해 텍스트를 줄임표로 자를 수 있습니다.

<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>

반응형 글꼴 크기 (Responsive font sizes)

Bootstrap 5에서는 반응형 글꼴 크기를 기본으로 활성화하여 텍스트가 기기와 뷰포트 크기에 걸쳐 더 자연스럽게 스케일되도록 했습니다. 이것이 어떻게 동작하는지 알아보려면 RFS 페이지를 참고하세요.

CSS

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:              inherit;

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

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

$small-font-size:             .875em;

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

// fusv-disable
$text-muted:                  var(--#{$prefix}secondary-color); // Deprecated in 5.3.0
// fusv-enable

$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;

// fusv-disable
$hr-bg-color:                 null; // Deprecated in v5.2.0
$hr-height:                   null; // Deprecated in v5.2.0
// fusv-enable

$hr-border-color:             null; // Allows for inherited colors
$hr-border-width:             var(--#{$prefix}border-width);
$hr-opacity:                  .25;

// scss-docs-start vr-variables
$vr-border-width:             var(--#{$prefix}border-width);
// scss-docs-end vr-variables

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

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

$list-inline-padding:         .5rem;

$mark-padding:                .1875em;
$mark-color:                  $body-color;
$mark-bg:                     $yellow-100;

Sass mixins

타이포그래피 전용 mixin은 없지만, Bootstrap은 Responsive Font Sizing(RFS)을 사용합니다.

더 알아보기 (Learn more)