목차
기본글자 (= 기본텍스트) <h1>~<h6>/.h1~.h6 : 기본제목 .display-1 ~ .display6 클래스 <small>/.small : 머리글제목 보조글자 <mark>/.mark : 형광펜글씨 (※ 강조할 글씨) <abbr> : 점선밑줄글씨 (※ 두문자단어나 축약어에 사용) <blockquote>/.blockquote : 글상자 (= 인용박스) <dl> : 설명목록 (Description List) <code> : 코드 표기 (※ 핑크색 글씨) <kbd> : 키보드키 (※ 검은 배경에 흰 글씨) <pre> : 코드 그대로 출력 (※ 약간 작은 글씨) BS5 글씨 클래스 종류 ★★
기본글자 (= 기본텍스트)
font-size: 1rem (=기본 16px); (cf. BS4 경우, 16px 단위 사용) line-height: 1.5 ; font-family: BS4와 약간 달라짐 .
2. <p>요소
margin-top: 0 ; margin-bottom: 1rem (= 기본 16px) ;
<h1>~<h6>/.h1~.h6 : 기본제목
(h1~h6 태그), (.h1~.h6 클래스명) 형태로 사용 가능. 클래스의 숫자가 작을수록 글씨가 더 큼.
[정의]
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
margin-top: 0;
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2;
}
h1, .h1 {
font-size: calc(1.375rem + 1.5vw);
}
@media (min-width:750px ) {
h1, .h1 {
font-size: 2.5rem;
}
}
h2, .h2 {
font-size: calc(1.325rem + 0.9vw);
}
@media (min-width:750px ) {
h2, .h2 {
font-size: 2rem;
}
}
h3, .h3 {
font-size: calc(1.3rem + 0.6vw);
}
@media (min-width:750px ) {
h3, .h3 {
font-size: 1.75rem;
}
}
h4, .h4 {
font-size: calc(1.275rem + 0.3vw);
}
@media (min-width:750px ) {
h4, .h4 {
font-size: 1.5rem;
}
}
h5, .h5 {
font-size: 1.25rem;
}
h6, .h6 {
font-size: 1rem;
}
[예제]
<div class="container mt-3">
<p class="h1 ">h1 - 홈짱닷컴 Homzzang.com</p>
<p class="h2 ">h2 - 홈짱닷컴 Homzzang.com</p>
<p class="h3 ">h3 - 홈짱닷컴 Homzzang.com</p>
<p class="h4 ">h4 - 홈짱닷컴 Homzzang.com</p>
<p class="h5 ">h5 - 홈짱닷컴 Homzzang.com</p>
<p class="h6 ">h6 - 홈짱닷컴 Homzzang.com</p>
</div>
결과보기
.display-1 ~ .display6 클래스
(.display-1 ~ .display-6) 클래스 사용. cf. BS4 경우, (.display-1 ~ display-4)
클래스의 숫자가 작을수록 글씨가 더 큼.
※ <h1> 보다 더 눈에 띔. (※ 폰트크기는 더 크고, 폰트굵기는 더 얇음.)
[정의]
.display-1 {
font-size: calc(1.625rem + 4.5vw);
font-weight: 300;
line-height: 1.2;
}
@media (min-width:750px ) {
.display-1 {
font-size: 5rem;
}
}
.display-2 {
font-size: calc(1.575rem + 3.9vw);
font-weight: 300;
line-height: 1.2;
}
@media (min-width:750px ) {
.display-2 {
font-size: 4.5rem;
}
}
.display-3 {
font-size: calc(1.525rem + 3.3vw);
font-weight: 300;
line-height: 1.2;
}
@media (min-width:750px ) {
.display-3 {
font-size: 4rem;
}
}
.display-4 {
font-size: calc(1.475rem + 2.7vw);
font-weight: 300;
line-height: 1.2;
}
@media (min-width:750px ) {
.display-4 {
font-size: 3.5rem;
}
}
.display-5 {
font-size: calc(1.425rem + 2.1vw);
font-weight: 300;
line-height: 1.2;
}
@media (min-width:750px ) {
.display-5 {
font-size: 3rem;
}
}
.display-6 {
font-size: calc(1.375rem + 1.5vw);
font-weight: 300;
line-height: 1.2;
}
@media (min-width:750px ) {
.display-6 {
font-size: 2.5rem;
}
}
[예제]
<div class="container mt-3">
<h1 class="display-1 ">.display-1</h1>
<h1 class="display-2 ">.display-2</h1>
<h1 class="display-3 ">.display-3</h1>
<h1 class="display-4 ">.display-4</h1>
<h1 class="display-5 ">.display-5</h1>
<h1 class="display-6 ">.display-6</h1>
</div>
결과보기
<small>/.small : 머리글제목 보조글자
<small> .small 클래스 사용.<h1>~</h6> 안에서 사용하며, 좀 더 작게 표현됨.
[정의]
small, .small {
font-size: 0.875em;
}
[예제]
<div class="container mt-3">
<h1>h1 홈짱닷컴 <small>Homzzang.com</small></h1>
<h2>h2 홈짱닷컴 <small>Homzzang.com</small></h2>
<h3>h3 홈짱닷컴 <small>Homzzang.com</small></h3>
<h4>h4 홈짱닷컴 <small>Homzzang.com</small></h4>
<h5>h5 홈짱닷컴 <small>Homzzang.com</small></h5>
<h6>h6 홈짱닷컴 <small>Homzzang.com</small></h6>
</div>
결과보기
<mark>/.mark : 형광펜글씨 (※ 강조할 글씨)
<mark> mark 클래스 사용.아주 흐릿한 연분홍 배경색 사용.
[정의]
mark, .mark {
padding: 0.2em;
background-color: #fcf8e3;
}
[예제]
<div class="container">
<p>홈짱닷컴 <mark> Homzzang.com </mark> </p>
</div>
결과보기
<abbr> : 점선밑줄글씨 (※ 두문자단어나 축약어에 사용)
<abbr> 태그는 점선으로 표현되며, 마우스커서 허버 시 물음표 생김.
[정의]
abbr[title],
abbr[data-bs-original-title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
[예제]
<div class="container mt-3">
<p><abbr title="BootStrap">BS</abbr> - 홈짱닷컴 Homzzang.com</p>
</div>
결과보기
<blockquote>/.blockquote : 글상자 (= 인용박스)
인용구는 <blockquote> 태그로 감싼 후, .blockquote 클래스 적용.
인용구 출처엔 .blockquote-footer 클래스 사용.
[정의]
.blockquote {
margin-bottom: 1rem;
font-size: 1.25rem;
}
.blockquote > :last-child {
margin-bottom: 0;
}
.blockquote-footer {
margin-top: -1rem;
margin-bottom: 1rem;
font-size: 0.875em;
color: #6c757d;
}
.blockquote-footer::before {
content: "— ";
}
[예제]
<div class="container">
< blockquote class="blockquote" >
<p>홈짱닷컴 Homzzang.com</p>
<footer class="blockquote-footer" >출처: 신비</footer>
</blockquote>
</div>
결과보기
<dl> : 설명목록 (Description List)
<dl> , <dt> , <dd> 태그에 대해서 아래 스타일로 표현.
[정의]
dl {
margin-top: 0;
margin-bottom: 1rem;
}
dt {
font-weight: 700;
}
dd {
margin-bottom: 0.5rem;
margin-left: 0;
}
[예제]
<div class="container mt-3">
<dl>
<dt>홈짱닷컴</dt>
<dd>- Homzzang.com</dd>
</dl>
</div>
결과보기
<code> : 코드 표기 (※ 핑크색 글씨)
<code> 태그를 선홍색 글자로 표현.
[정의]
code {
font-family: var(--bs-font-monospace);
font-size: 1em;
direction: ltr /* rtl:ignore */;
unicode-bidi: bidi-override;
}
pre code {
font-size: inherit;
color: inherit;
word-break: normal;
}
code {
font-size: 0.875em;
color: #d63384;
word-wrap: break-word;
}
a > code {
color: inherit;
}
[예제]
<div class="container mt-3">
<p><code>div</code> 요소 - 홈짱닷컴 Homzzang.com</p>
</div>
결과보기
<kbd> : 키보드키 (※ 검은 배경에 흰 글씨)
<kbd> 태그 경우, 검은 배경에 흰 글씨로 표현.
[정의]
kbd {
font-family: var(--bs-font-monospace);
font-size: 1em;
direction: ltr /* rtl:ignore */;
unicode-bidi: bidi-override;
}
kbd {
padding: 0.2rem 0.4rem;
font-size: 0.875em;
color: #fff;
background-color: #212529;
border-radius: 0.2rem;
}
kbd kbd {
padding: 0;
font-size: 1em;
font-weight: 700;
}
[예제]
<div class="container mt-3">
<p><kbd>Ctrl + D</kbd> 홈짱닷컴 Homzzang</p>
</div>
결과보기
<pre> : 코드 그대로 출력 (※ 약간 작은 글씨)
<pre> 태그는 기본 글자 크기보다 약간 작게, 동일 너비 글자로 표현.
[정의]
pre {
font-family: var(--bs-font-monospace);
font-size: 1em;
direction: ltr /* rtl:ignore */;
unicode-bidi: bidi-override;
}
pre {
display: block;
margin-top: 0;
margin-bottom: 1rem;
overflow: auto;
font-size: 0.875em;
}
pre code {
font-size: inherit;
color: inherit;
word-break: normal;
}
[예제]
<div class="container mt-3">
<pre>
홈짱닷컴 Homzzang.com
</pre>
</div>
결과보기
BS5 글씨 클래스 종류 ★★
※ 취소선 : BS4엔 있으나 BS5에서 폐기된 것들.
※ BS5 + : BS5에서 새로 생긴 것들.
[텍스트 크기]
.font-italic : 이탤릭체 (= 기울어진 글씨체)
.font-weight-bold : 굵은 굵기 글씨체
.font-weight-light : 얇은 굵기 글씨체
.font-weight-normal : 보통 굵기 글씨체
.lead
.small : 작은 글씨 (부모 크기의 85 %로 설정)
.initialism
[텍스트 정렬]
.text-start
.text-left : 왼쪽 정렬 (모든 화면) .text-sm-left : 왼쪽 정렬 (576px 이상 화면) .text-md-left : 왼쪽 정렬 (768px 이상 화면) .text-lg-left : 왼쪽 정렬 (992px 이상 화면) .text-xl-left : 왼쪽 정렬 (1200px 이상 화면)
.text-center
.text-sm-center : 중앙 정렬 (576px 이상 화면) .text-md-center : 중앙 정렬 (768px 이상 화면) .text-lg-center : 중앙 정렬 (992px 이상 화면) .text-xl-center : 중앙 정렬 (1200px 이상 화면)
.text-end
.text-right : 오른쪽 정렬 (모든 화면) .text-sm- right : 오른쪽 정렬 (576px 이상 화면) .text-md- right : 오른쪽 정렬 (768px 이상 화면) .text-lg- right : 오른쪽 정렬 (992px 이상 화면) .text-xl- right : 오른쪽 정렬 (1200px 이상 화면)
.text-justify : 양쪽 맞춤 정렬 (= 텍스트 배분 정렬)
.text-break
[텍스트 꾸미기]
.text-decoration-none
.text-monospace : 고정 폭 텍스트
.text-nowrap
[텍스트 대소문자 변환]
.text-lowercase
.text-uppercase .text-capitalize
[리스트 스타일]
.list-unstyled
<ul>/<ol> 모두에서 작동. 이 클래스는 직접적인 자식 목록 항목에만 적용. 중첩 리스트에도 적용하려면, 중첩리스트에서 클래스 추가 필요. .list-inline
각 <li> 요소의 .list-inline-item 클래스와 함께 사용.
<ul>/<ol> 모두에서 사용 가능.
.pre-scrollable : <pre> 요소를 스크롤 가능하게 하기
