[Bootstrap4] 04. 부트스트랩4 텍스트 타이포그래피

Posted by 낭만사업가 정대표 블로그 on 2022-02-28 04:44:17

부트스트랩4 기본 설정

부트스트랩은  font-size 는 16px이며, 줄간 높이 line-height 는 1.5 입니다.

font-family  기본글꼴 설정은 "Helvetica Neue", Helvetica, Arial, sans-serif 입니다.

또한, 모든  <p> 태그에는  margin-top: 0 과  margin-bottom: 1rem (16px가 기본값입니다).


<h1> - <h6>

더 굵은 글꼴 두께와 확장된 글꼴 크기로 HTML 제목(<h1> ~ <h6>)을 style로 세팅되어 있습니다.

Example

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
Try it Yourself »

제목 표시 (Display Headings)

디스플레이는 <H>태그 (더 큰 글꼴 크기 및 더 가벼운 글꼴 두께)보다 눈에 띄게 하는 데 사용되며,
.display-1  ,   .display-2  ,   .display-3  ,   .display-4 중에서 선택할 수 있는 4가지 클래스가 있습니다.  

Example

Display 1

Display 2

Display 3

Display 4

Try it Yourself »

<small>

HTML <small> 태그에는 모든 제목에서 더 가볍고 보조적인 텍스트를 만드는 데 사용됩니다.

Example

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text
Try it Yourself »

 

<mark>

노란색 배경색과 약간의 패딩을 사용하여 HTML <mark> 태그에 스타일을 지정할 수 있습니다.

Example

Use the mark element to highlight text.

Try it Yourself »

<abbr>

HTML <abbr> 태그를 사용하여 점선 테두리 하단으로 스타일을 지정할 수 있습니다.

Example

The WHO was founded in 1948.

Try it Yourself »

<blockquote>

다른 소스에서 콘텐츠 블록을 인용할 때 .blockquote 클래스를 <blockquote>에 추가합니다.

Example

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
Try it Yourself »

<dl>

부트스트랩4 에는 다음과 같은 방식으로 HTML <dl> 요소의 스타일을 지정할 수 있습니다.

Example

Coffee
- black hot drink
Milk
- white cold drink
Try it Yourself »

<code>

부트스트랩4 에는 다음과 같은 방식으로 HTML <code> 요소의 스타일을 지정할 수 있습니다.

Example

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

Try it Yourself »

<kbd>

부트스트랩4 에는 다음과 같은 방식으로 HTML <kbd> 요소의 스타일을 지정할 수 있습니다. 

Example

Use ctrl + p to open the Print dialog box.

Try it Yourself »

<pre>

부트스트랩4 에는 다음과 같은 방식으로 HTML <pre> 요소의 스타일을 지정할 수 있습니다.

Example

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

더 많은 타이포그래피 클래스 (Typography Classes)

아래의 Bootstrap4 클래스를 추가하여 HTML 요소의 스타일을 추가로 지정할 수 있습니다.

Class Description Example
.font-weight-bold 굵은 텍스트 Try it
.font-weight-bolder 굵은 텍스트 Try it
.font-italic 기울임 텍스트 Try it
.font-weight-light 가벼운두께 텍스트 Try it
.font-weight-lighter 가벼운두께 텍스트 Try it
.font-weight-normal 기본두께 텍스트 Try it
.lead 단락을 돋보이게 하는 텍스트 Try it
.small 더 작은 텍스트를 나타냅니다. (80% 수준) Try it
.text-left 왼쪽으로 정렬 Try it
.text-*-left small, medium, large or xlarge 화면에서 왼쪽으로 정렬 Try it
.text-break 긴 텍스트가 레이아웃을 깨뜨리는 것을 방지 Try it
.text-center 가운데 중앙 정렬 Try it
.text-*-center small, medium, large or xlarge 화면에서 가운데 중앙 정렬 Try it
.text-decoration-none 링크 텍스트에서 밑줄을 제거 Try it
.text-right 오른쪽으로 정렬 Try it
.text-*-right small, medium, large or xlarge 화면에서 오른쪽으로 정렬 Try it
.text-justify 양쪽으로 정렬 Try it
.text-monospace 고정폭 텍스트 Try it
.text-nowrap 텍스트 줄바꿈을 하고싶지 않을 때 사용 Try it
.text-lowercase 알파벳 소문자로 표시 Try it
.text-reset 텍스트 또는 링크의 색상을 재설정 (부모로부터 색상을 상속함) Try it
 .text-uppercase 알파벳 대문자로 표시 Try it

Total 164
번호 제목 글쓴이 조회 날짜
39 07-15
214 07-15
162 28 07-20
161 24 07-20
160 19 07-20
159 25 07-20
158 20 07-20
157 19 07-20
156 92 06-20
155 28 07-20
154 931 06-21
153 60 06-20
152 138 02-25
151 755 02-27
150 32 07-08
RSS

오픈런하우스

1인가구를 위한 원룸형 아파트 쉐어하우스, 1인기업(프리랜서)을 위한 홈오피스형 공유주택

GO!