주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

타이포그래피

전역 설정, 머리글, 본문, 목록 등을 포함한 부트스트랩 타이포그래피에 대한 문서 및 예제.

전역 설정

부트스트랩은 기본 전역 디스플레이, 타이포그래피 및 링크 스타일을 설정합니다. 더 많은 제어가 필요한 경우 텍스트 유틸리티 클래스 를 확인하십시오 .

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

이러한 스타일은 에서 찾을 수 있으며 _reboot.scss전역 변수는 에 정의되어 _variables.scss있습니다. $font-size-base에 설정하십시오 rem.

제목

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

표제 예시
<h1></h1> h1. 부트스트랩 제목
<h2></h2> h2. 부트스트랩 제목
<h3></h3> h3. 부트스트랩 제목
<h4></h4> h4. 부트스트랩 제목
<h5></h5> h5. 부트스트랩 제목
<h6></h6> h6. 부트스트랩 제목
<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 요소를 사용할 수 없는 경우를 위해 through 클래스도 사용할 수 있습니다.

h1. 부트스트랩 제목

h2. 부트스트랩 제목

h3. 부트스트랩 제목

h4. 부트스트랩 제목

h5. 부트스트랩 제목

h6. 부트스트랩 제목

<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에서 작은 보조 제목 텍스트를 다시 만듭니다.

멋진 디스플레이 제목 희미한 보조 텍스트 포함

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

제목 표시

전통적인 제목 요소는 페이지 콘텐츠의 핵심에서 가장 잘 작동하도록 설계되었습니다. 눈에 띄는 제목이 필요하면 표시 제목 을 사용하는 것을 고려하십시오 . 더 크고 약간 더 독단적인 제목 스타일입니다.

디스플레이 1
디스플레이 2
디스플레이 3
디스플레이 4
디스플레이 5
디스플레이 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.

이것은 리드 단락입니다. 그것은 일반 단락에서 두드러집니다.

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

인라인 텍스트 요소

일반적인 인라인 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>

텍스트 유틸리티

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

약어

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

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

속성

HTML

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

인용구

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

blockquote 요소에 포함된 잘 알려진 인용문.

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

소스 이름 지정

HTML 사양에서는 blockquote 속성을 <blockquote>. <blockquote>저작자 표시를 제공할 때 a <figure>를 래핑 하고 클래스와 함께 <figcaption>또는 블록 수준 요소(예: <p>)를 사용합니다 .blockquote-footer. 소스 작업의 이름도 래핑하십시오 <cite>.

blockquote 요소에 포함된 잘 알려진 인용문.

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

조정

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

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>

blockquote 요소에 포함된 잘 알려진 인용문.

<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및 왼쪽 여백을 제거합니다(직계 자식만 해당). 이것은 직계 자식 목록 항목에만 적용됩니다 . 즉, 모든 중첩 목록에도 클래스를 추가해야 합니다.

  • 이것은 목록입니다.
  • 완전히 스타일이 지정되지 않은 것처럼 보입니다.
  • 구조적으로는 여전히 목록입니다.
  • 그러나 이 스타일은 직계 자식 요소에만 적용됩니다.
  • 중첩 목록:
    • 이 스타일의 영향을 받지 않습니다
    • 여전히 총알을 보여줄 것입니다
    • 적절한 왼쪽 여백이 있어야 합니다.
  • 이것은 어떤 상황에서는 여전히 유용할 수 있습니다.
<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>

인라인

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

  • 이것은 목록 항목입니다.
  • 그리고 또 하나.
  • 그러나 인라인으로 표시됩니다.
<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으로 줄임표로 텍스트를 자르는 클래스를 추가할 수 있습니다.

설명 목록
설명 목록은 용어를 정의하는 데 적합합니다.
용어

용어에 대한 정의입니다.

그리고 더 많은 자리 표시자 정의 텍스트.

다른 용어
이 정의는 짧기 때문에 추가 단락이나 기타 사항이 없습니다.
잘린 용어는 잘립니다.
공간이 협소할 때 유용할 수 있습니다. 끝에 줄임표를 추가합니다.
중첩
중첩 정의 목록
정의 목록을 좋아한다고 들었습니다. 정의 목록 안에 정의 목록을 넣겠습니다.
<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 페이지 를 살펴보십시오 .

사스

변수

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

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

믹신

타이포그래피를 위한 전용 믹스인은 없지만 부트스트랩은 RFS(Responsive Font Sizing) 를 사용 합니다.