문서의 이전 판입니다!
목차
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> 요소를 하기 방식으로 스타일을 지정합니다.
<code>
Bootstrap은 HTML <code> 요소를 하기 방식으로 스타일을 지정합니다.
<kbd>
Bootstrap은 HTML <kbd> 요소를 하기 방식으로 스타일을 지정합니다.
<pre>
Bootstrap은 HTML <pre> 요소를 하기 방식으로 스타일을 지정합니다.
contextual Colors and Backgrounds
