부트스트랩 텍스트/타이포그래피

❮ 이전의 다음 ❯

부트스트랩의 기본 설정

부트스트랩의 전역 기본 글꼴 크기는 14px이며 줄 높이는 1.428입니다.

<body>요소 및 모든 단락( ) 에 적용됩니다 <p>.

또한 모든 <p>요소에는 계산된 줄 높이의 절반과 같은 아래쪽 여백이 있습니다(기본값은 10px).

부트스트랩 대 브라우저 기본값

이 장에서는 부트스트랩에 의해 브라우저 기본값과 약간 다르게 스타일이 지정되는 일부 HTML 요소를 살펴보겠습니다.

<h1> - <h6>

기본적으로 Bootstrap은 다음과 같은 방식으로 HTML 제목( <h1>to )의 스타일을 지정합니다.<h6>

예시

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)

h6 Bootstrap heading (12px)

<작은>

Bootstrap에서 HTML <small>요소는 모든 제목에서 더 가벼운 보조 텍스트를 만드는 데 사용됩니다.

예시

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text

h6 heading secondary text

<마크>

부트스트랩은 다음과 같은 방식으로 HTML <mark>요소의 스타일을 지정합니다.

예시

Use the mark element to highlight text.

<abbr>

부트스트랩은 다음과 같은 방식으로 HTML <abbr>요소의 스타일을 지정합니다.

예시

The WHO was founded in 1948.

<블록 인용>

부트스트랩은 다음과 같은 방식으로 HTML <blockquote>요소의 스타일을 지정합니다.

예시

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

오른쪽에 인용문을 표시하려면 .blockquote-reverse클래스를 사용하세요.

예시

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website

<dl>

부트스트랩은 다음과 같은 방식으로 HTML <dl>요소의 스타일을 지정합니다.

예시

Coffee: - black hot drink
Milk: - white cold drink

<코드>

부트스트랩은 다음과 같은 방식으로 HTML <code>요소의 스타일을 지정합니다.

예시

The following HTML elements: span, section, and div defines a section in a document.

<kbd>

부트스트랩은 다음과 같은 방식으로 HTML <kbd>요소의 스타일을 지정합니다.

예시

Use ctrl + p to open the Print dialog box.

<사전>

부트스트랩은 다음과 같은 방식으로 HTML <pre>요소의 스타일을 지정합니다.

예시

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

상황별 색상 및 배경

또한 부트스트랩에는 "색상을 통한 의미"를 제공하는 데 사용할 수 있는 몇 가지 컨텍스트 클래스가 있습니다.

텍스트 색상에 대한 클래스는 .text-muted, .text-primary, .text-success, .text-info, .text-warning및 .text-danger다음과 같습니다.

예시

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

배경색에 대한 클래스는 .bg-primary, .bg-success, .bg-info, .bg-warning및 .bg-danger:

예시