목차
- 기본글자 (= 기본텍스트)
- <h1> ~ <h6> : 기본제목
- .display-1 ~ .display4 클래스
- <small> : 머리글제목 보조글자
- <mark> : 형광펜글씨 (※ 강조할 글씨에 사용)
- <abbr> : 점선밑줄글씨 (※ 두문자단어나 축약어에 사용)
- <blockquote> : 글상자 (= 인용박스)
- <dl> : 설명목록 (Description List)
- <code> : 코드 표기 (※ 핑크색 글씨)
- <kbd> : 키보드키 (※ 검은 배경에 흰 글씨)
- <pre> : 코드 그대로 출력 (※ 약간 작은 글씨)
- BS4 글씨 클래스 종류 ★★
기본글자 (= 기본텍스트)
1. 기본 글자
font-size: 16px ;
line-height: 1.5 ;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif ;
2. <p>요소
margin-top: 0 ;
margin-bottom: 1rem (= 기본 16px) ;
<h1> ~ <h6> : 기본제목
<div class="container">
<h1>h1 (2.5rem = 40px) - 홈짱닷컴 Homzzang.com</h1>
<h2>h2 (2rem = 32px) - 홈짱닷컴 Homzzang.com</h2>
<h3>h3 (1.75rem = 28px) - 홈짱닷컴 Homzzang.com</h3>
<h4>h4 (1.5rem = 24px) - 홈짱닷컴 Homzzang.com</h4>
<h5>h5 (1.25rem = 20px) - 홈짱닷컴 Homzzang.com</h5>
<h6>h6 (1rem = 16px) - 홈짱닷컴 Homzzang.com</h6>
</div>
결과보기
.display-1 ~ .display4 클래스
<div class="container">
<h1 class="display-1">홈짱닷컴 Homzzang.com</h1>
<h1 class="display-2">홈짱닷컴 Homzzang.com</h1>
<h1 class="display-3">홈짱닷컴 Homzzang.com</h1>
<h1 class="display-4">홈짱닷컴 Homzzang.com</h1>
</div>
결과보기
※ <h1> 보다 더 눈에 띔. (※ 폰트크기는 더 크고, 폰트굵기는 더 얇음.)
<small> : 머리글제목 보조글자
<div class="container">
<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> : 형광펜글씨 (※ 강조할 글씨에 사용)
<div class="container">
<p>홈짱닷컴 <mark>Homzzang.com</mark></p>
</div>
결과보기
<abbr> : 점선밑줄글씨 (※ 두문자단어나 축약어에 사용)
<div class="container">
<p><abbr title="BootStrap">BS</abbr> - 홈짱닷컴 Homzzang.com</p>
</div>
결과보기
<blockquote> : 글상자 (= 인용박스)
<div class="container">
<blockquote class="blockquote">
<p>홈짱닷컴 Homzzang.com</p>
<footer class="blockquote-footer">신비</footer>
</blockquote>
</div>
결과보기
[브라우저 기본CSS]
.blockquote {
margin-bottom: 1rem;
font-size: 1.25rem;
}
<dl> : 설명목록 (Description List)
<div class="container">
<dl>
<dt>홈짱닷컴</dt>
<dd>- Homzzang.com</dd>
</dl>
</div>
결과보기
<code> : 코드 표기 (※ 핑크색 글씨)
<div class="container">
<p><code>div</code> 요소 - 홈짱닷컴 Homzzang.com</p>
</div>
결과보기
[브라우저 기본CSS]
code {
font-size: 87.5%;
color: #e83e8c;
word-break: break-word;
}
<kbd> : 키보드키 (※ 검은 배경에 흰 글씨)
<div class="container">
<p><kbd>Ctrl + D</kbd> 홈짱닷컴 Homzzang</p>
</div>
결과보기
[브라우저 기본 CSS]
kbd {
padding: .2rem .4rem;
font-size: 87.5%;
color: #fff;
background-color: #212529;
border-radius: .2rem;
}
<pre> : 코드 그대로 출력 (※ 약간 작은 글씨)
<div class="container">
<pre>
홈짱닷컴 Homzzang.com
</pre>
</div>
결과보기
[브라우저 기본 CSS]
pre {
display: block;
font-size: 87.5%;
color: #212529;
}
BS4 글씨 클래스 종류 ★★
.font-italic : 이탤릭체 (= 기울어진 글씨체)
.font-weight-bold : 굵은 굵기 글씨체
.font-weight-light : 얇은 굵기 글씨체
.font-weight-normal : 보통 굵기 글씨체
.lead : 문단 눈에 띄게 만들기. 회색글씨로 보임.
.small : 작은 글씨 (부모 크기의 85 %로 설정)
※ 화면너비별 정렬 클래스는 BS4만 가능.
.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-right : 오른쪽 정렬 (모든 화면)
.text-sm-right : 오른쪽 정렬 (576px 이상 화면)
.text-md-right : 오른쪽 정렬 (768px 이상 화면)
.text-lg-right : 오른쪽 정렬 (992px 이상 화면)
.text-xl-right : 오른쪽 정렬 (1200px 이상 화면)
.text-justify : 양쪽 맞춤 정렬 (= 텍스트 배분 정렬)
.text-monospace : 고정 폭 텍스트
.text-nowrap : 줄 바꿈 없는 텍스트
.text-lowercase - 무조건 소문자
.text-uppercase - 대문자 대문자
.text-capitalize - 단어의 첫글자만 대문자
.initialism - <abbr> 요소 내부의 텍스트를 약간 작은 글꼴 크기로 표시.
.list-unstyled : 목록 항목의 기본 목록 스타일 및 왼쪽 여백을 제거
1. <ul> 및 <ol> 모두에서 작동.
2. 이 클래스는 직접적인 자식 목록 항목에만 적용.
3. 중첩 목록에서 기본 목록 스타일을 제거하고 중첩 목록에도이 클래스를 적용.
.list-inline : 모든 목록 항목을 한 줄에 배치 (각 <li> 요소의 .list-inline-item과 함께 사용)
.pre-scrollable : <pre> 요소를 스크롤 가능하게 하기
