목차
Bootstrap Text/Typography
- description : Bootstrap Text/Typography
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-03-24
Bootstrap's Default Settings
부트스트랩의 전역 기본 글꼴 크기는 14px이고, 줄 높이는 1.428입니다.
이것은 <body> 요소와 모든 단락 (<p>)에 적용됩니다.
또한 모든 <p> 요소에는 계산된 선 높이의 절반 (기본적으로 10px)에 해당하는 아래쪽 여백(bottom margin)이 있습니다.
Bootstrap vs. Browser Defaults
Bootstrap이 브라우저 기본 값과 약간 다르게 스타일을 지정할 HTML 요소를 살펴 보겠습니다.
<h1> ~ <h6>
기본적으로 Bootstrap은 아래의 방식으로 HTML 제목 (<h1> ~ <h6>)의 스타일을 지정합니다.
예제
h1 Boostrap heading (36px)
h2 Boostrap heading (30px)
h3 Boostrap heading (24px)
h4 Boostrap heading (18px)
h5 Boostrap heading (14px)
h6 Boostrap heading (12px)
<small>
Bootstrap에서, HTML <small> 요소는 모든 제목에 더 가벼운 보조 텍스트를 만드는데 사용됩니다.
Lighter, Secondary Text
The small element is used to create a lighter, secondary text in any heading:
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
<mark>
Bootstrap은 HTML <mark> 요소를 하기 방식으로 스타일을 지정합니다.
Hightlight Text
Use the mark element to hightlight text.
<abbr>
Bootstrap은 HTML <abbr> 요소를 하기 방식으로 스타일을 지정합니다.
Abbreviations
The abbr element is used to mark up an abbreviation or acronym:
The WHO was founded in 1948.
<blockquote>
Bootstrap은 HTML <blockquote> 요소를 하기 방식으로 스타일을 지정합니다.
Blockquotes
The blockquote element is used to present content from another source:
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.
오른쪽에 인용문(the quote)을 표시하려면, .blockquote-reverse 클래스를 사용하세요.
Blockquotes
To show the quote on the right, use the class .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.
<dl>
Bootstrap은 HTML <dl> 요소를 하기 방식으로 스타일을 지정합니다.
dl = description list
Description Lists
The dl element indicates a description list:
- Coffee
- - black hot drink
- Milk
- - white cold drink
<code>
Bootstrap은 HTML <code> 요소를 하기 방식으로 스타일을 지정합니다.
Code Snippets
Inline snippets of code should be embedded in the code element:
The following HTML elements: span, section, and div defines a section in a document.
<kbd>
Bootstrap은 HTML <kbd> 요소를 하기 방식으로 스타일을 지정합니다.
kbd = KeyBoarD
Keyboard Inputs
To indicate input that is typically entered via the keyboard, use the kbd element:
Use ctrl + p to open the Print dialog box.
<pre>
Bootstrap은 HTML <pre> 요소를 하기 방식으로 스타일을 지정합니다.
<pre> 요소 내부는 텍스트와 코드가 고정 폭의 폰트로 표시되고, 화면 폭과 상관없이 공간과 줄바꿈을 유지합니다.
Multiple Code Lines
For multiple lines of code, use the pre element:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
contextual Colors and Backgrounds
부트스트랩에는 “색상을 통한 의미”를 제공하는 데 사용할 수 있는 컨텍스트 클래스(contextual classes)도 있습니다.
**contextual : (문장의) 전후 관계의, 문맥상의, 맥락[전후 사정]과 관련된
텍스트 색상의 클래스는 아래와 같습니다.
text-muted, text-primary, text-success, text-info, text-warning, 그리고 text-danger:
예제
Contextual Colors
Use the Contextual classes to provide "meaning through colors"
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:
예제
Contextual Background Colors
Use the contextual background classes to provide "meaning through colors":
This text is important.
This text indicates success.
This text represents some infomation.
This text represents a warning.
This text represents danger.
More Typography Classes
아래의 Bootstrap 클래스를 추가하여 HTML 요소의 스타일을 추가로 지정할 수 있습니다.
| Class | Description |
.lead | 단락을 돋보이게 만듭니다. |
|---|---|
.small | |
.text-left | 좌측 정렬 텍스트를 나타냅니다. |
.text-center | 중앙 정렬 텍스트를 나타냅니다. |
.text-right | 우측 정렬 텍스트를 나타냅니다. |
.text-justify | 양쪽 정렬 텍스트를 나타냅니다. |
.text-nowrap | 줄바꿈 없는 텍스트를 나타냅니다. |
.text-lowercase | 모든 철자를 소문자로 나타냅니다 |
.text-uppercase | 모든 철자를 대문자로 나타냅니다. |
.text-capitalize | 텍스트의 각각의 단어 첫글자를 대문자로 나타냅니다. |
.initialism | 약간 더 작은 글꼴 크기로 <abbr> 요소 내부의 텍스트를 표시합니다. |
.list-unstyled | 목록 항목의 기본 목록 스타일과 왼쪽 여백을 제거합니다 (<ul> 및 <ol> 모두에서 작동). 이 클래스는 자식 목록 항목에만 적용됩니다 (중첩된 목록에서 기본 목록 스타일을 제거하려면 이 클래스를 모든 중첩된 목록에도 적용) |
.list-inline | 모든 목록 항목을 한 줄에 배치합니다. |
.dl-horizontal | <dl> 요소의 용어 (<dt>)와 설명 (<dd>)을 나란히 정렬합니다. 기본 <dl>처럼 시작하지만 브라우저 창이 확장되면 나란히 정렬됩니다. |
.pre-scrollable | <pre> 요소를 스크롤 가능하게 만듭니다. y축 방향으로 스크롤 바 생성됩니다. |
예제
Typography
Use the .lead class to make a paragraph "stand out":
This paragraph stands out.
This paragraph is regular.
=========================================================================
Use the .small class to make the text smaller:
This paragraph smaller.
This paragraph is regular.
=========================================================================
left-aligned text.
right-aligned text.
center-aligned text.
Justified text. Justified text. Justified text. Justified text. Justified text. Justified text.
=========================================================================
No wrap text. No wrap text. No wrap text. No wrap text. No wrap text. No wrap text.
Tip:Try to resize the browser window to see the behavior of justify and nowrap.
=========================================================================
LoWercAsed text
Uppercased textcapitlized text
=========================================================================
The WHO was founded in 1948. (normal abbr)
The WHO was founded in 1948. (slightly smaller abbr)
=========================================================================
The .list-unstyled removes the default list-style and left wmargin on list items (immediate children only):
- Coffee
- Tea
- Black tea
- Green tea
- Milk
=========================================================================
The class .list-inline places all list items on a single line:
- Espresso
- Dolce Latte
- Cold Brew
=========================================================================
Use the .dl-horizontal class line up the description list side-by-side when the browser window expands:
- Coffee
- black hot drink
- Milk
- White Cold Drink
=========================================================================
For multiple lines of code, use the pre element:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
If you add the .pre-scrollable class, the pre element gets a max-height of 350px and provides a y-axis scrollbar:
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
