문서의 이전 판입니다!
목차
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
