타이포그래피

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

전역 설정

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

각 OS 및 장치 에 가장 적합한 기본 글꼴 스택 을 사용합니다 .font-family
보다 포괄적이고 접근 가능한 유형 스케일을 font-size위해 방문자가 필요에 따라 브라우저 기본값을 사용자 정의할 수 있도록 브라우저 기본 루트(일반적으로 16px)를 가정합니다.
에 적용된 활자체 기반으로 , 및 속성 $font-family-base을 $font-size-base사용 합니다 .$line-height-base<body>
를 통해 전체 링크 색상을 설정하고 $link-color에서만 링크 밑줄을 적용합니다 :hover.
( 기본값) 을 $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

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

선두

를 추가하여 단락을 돋보이게 만드십시오 .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commododo luctus.

<p class="lead">
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
</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클래스도 사용할 수 있습니다 .<mark><small>

위에 표시되지 않았지만 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 을 인용문으로 감 쌉니다 .

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

소스 이름 지정

<footer class="blockquote-footer">소스 식별을 위해 추가합니다 . 소스 작업의 이름을 <cite>.

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.

Source Title 에서 유명한 사람

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

조정

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

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.

Source Title 에서 유명한 사람

<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sitmet, consectetur adipiscing elit. Integer posuere erat ante.

Source Title 에서 유명한 사람

<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

기울기

스타일이 없는

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

Lorem ipsum dolor sitmet
Consectetur adipiscing 엘리트
정수 molestie lorem at massa
Pretium nisl aliquet의 시설
눌라 볼룻팟 알리콰암 벨릿
- Phasellus iaculis neque
- Purus sodales ultricies
- 베스티불룸 라오렛 포티터 sem
- Ac tristique libero volutpat
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<ul class="list-unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

인라인

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

로렘 입숨
파셀루스 이아쿨리스
Nulla volutpat

<ul class="list-inline">
  <li class="list-inline-item">Lorem ipsum</li>
  <li class="list-inline-item">Phasellus iaculis</li>
  <li class="list-inline-item">Nulla volutpat</li>
</ul>

설명 목록 정렬

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

설명 목록

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

유이스모드

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

말레수아다 포르타

Etiam porta sem malesuada magna mollis euismod.

잘린 용어는 잘립니다.

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

중첩

중첩 정의 목록: Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

<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">Euismod</dt>
  <dd class="col-sm-9">
    <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
    <p>Donec id elit non mi porta gravida at eget metus.</p>
  </dd>

  <dt class="col-sm-3">Malesuada porta</dt>
  <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
  <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
    </dl>
  </dd>
</dl>

반응형 타이포그래피

반응형 타이포그래피font-size 는 일련의 미디어 쿼리 내에서 루트 요소를 간단히 조정하여 텍스트 및 구성 요소의 크기를 조정하는 것을 말합니다 . 부트스트랩은 이 작업을 수행하지 않지만 필요한 경우 추가하기가 상당히 쉽습니다.

다음은 실제 사례입니다. 원하는 font-size미디어 쿼리를 선택하세요.

html {
  font-size: 1rem;
}

@include media-breakpoint-up(sm) {
  html {
    font-size: 1.2rem;
  }
}

@include media-breakpoint-up(md) {
  html {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  html {
    font-size: 1.6rem;
  }
}