<h1> - <h6> or .h1 - .h6 (헤드 제목 글자 크기)
<small> - 작은 헤드 제목
.small - 부모 요소 85% 크기의 작은 글씨
.lead (두드러진 약간 큰 글씨)
<mark> or .mark - 형광색 배경 글씨
<del> - 삭제된 글 표시
<s> - 관계 없는 글 표시
<ins> - 삽입된 글 표시
<u> - 밑줄 친 글씨 표시
<strong> - 글 강조 표시 (굵은 글씨)
<em> - 이탤릭 글씨체 (= 기울임 글씨체)
.text-left (글씨 왼쪽 정렬)
.text-center (글씨 중앙 정렬) - 요소 안의 인라인 요소를 가운데 정렬
.text-right (글씨 오른족 정렬)
.text-justify (글씨 좌우 균등 배분 정렬) - 양쪽 정렬
.text-nowrap (일반 정렬)
.text-lowercase (소문자 글씨)
.text-uppercase (대문자 글씨)
.text-capitalize (단어 첫 글자 대문자 글씨)
<abbr> - 두문자어 (=축약 단어) 표시
.initialism (살짝 작은 두문자어) - 약간 작은 축약 단어
<address> - 연락처 정보
<blockquote> - 긴 인용구
.blockquote-reverse (긴 인용구 오른쪽 정렬)
<ul> - 순서 없는 목록</ul>
<ol> - 순서 있는 목록</ol>
.list-unstyled (목록 기본 스타일 제거 및 목록 아이템 왼쪽 마진 제거)
.list-inline (목록 아이템 가로 한 줄로)
<dl> - 설명 목록 세로형
.dl-horizontal (설명 목록 가로형, / 창 좁으면 설명 목록 세로형)
<var> - 변수 표시
<kbd> - 키보드 입력 표시
<pre> - 여러 줄의 코드 표시 (※ 태그 실행 후 표시)
<pre class="pre-scrollable"> 스크롤바 있는 여러 줄 코드 표시
<samp> - 프로그램 샘플 출력 결과 표시
<code> - 태그 이름 표시
.text-muted (색깔 죽인 글씨) - 옅은 회색
.text-primary (주요/핵심 글씨) - 파란색 글씨
.text-success (성공/긍정 글씨) - 녹색 글씨
.text-info (정보/환기 글씨) - 하늘색 글씨
.text-warning (주의/경고 글씨) - 고동색 글씨
.text-danger (위험/부정 글씨) - 진갈색 글씨
1.
기본글자 (= 기본텍스트 : body와 모든 단락에 적용)
font-size: 14px ; line-height: 1.428 ;
이것은 <body>요소와 모든 단락 ( <p>)에 적용.
2.<p>요소
margin-bottom: 계산된 line-height 값의 절반. (= 기본 10px) ;
3. .lead 클래스 : 리드 문단 (= 부각되는 글씨 )
<p class="lead ">...</p>
[참고] .lead {margin-bottom: 20px; font-size: 16px; font-weight: 300; line-height: 1.4;}
4.
LESS 경우 문자크기
variables.less 파일의 두 LESS 변수(@font-size-base ・ @line-height-base)와 몇몇 함수에 기반.
2.
<h1> ~ <h6> 태그 , .h1 ~ .h6 클래스 : 제목
[블럭요소형 제목]
<div class="container">
< h1 >h1 (36px) - 홈짱닷컴 Homzzang.com</h1>
< h2 >h2 (30px) - 홈짱닷컴 Homzzang.com</h2>
< h3 >h3 (24px) - 홈짱닷컴 Homzzang.com</h3>
< h4 >h4 (18px) - 홈짱닷컴 Homzzang.com</h4>
< h5 >h5 (14px) - 홈짱닷컴 Homzzang.com</h5>
< h6 >h6 (12px) - 홈짱닷컴 Homzzang.com</h6>
</div>
결과보기
[인라인요소형 제목]
.h1 ~ .h6 클래스 사용.
3.
.display-1 ~ .display-4 클래스
BS4 전용 클래스
4.
<small> 태그 , .small 클래스 - 보조글자 (= 부모요소 글자크기의 85%)
<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>
결과보기
※ 머리글제목보다 살짝 작은 글씨의 회색 글씨로 표현됨.
5-1.
<mark> : 강조할 글씨
<p>홈짱닷컴 <mark> Homzzang.com </mark> </p>
※ 아주 연한 핑크색 배경색 짙은 검정 글씨색으로 표현
5-2.
<del> : 삭제된 글씨
<p>홈짱닷컴 <mark> Homzzang.com </mark> </p>
5-3.
<s> : 취소된 글씨
<p>홈짱닷컴 <s> Homzzang.com </s> </p>
5-4.
<ins> : 삽입된 글씨
<p>홈짱닷컴 <ins> Homzzang.com </ins> </p>
5-4.
<u> : 밑줄 글씨
<p>홈짱닷컴 <u> Homzzang.com </u> </p>
5-5.
<strong> : 굵은 글씨
<p>홈짱닷컴 <strong> Homzzang.com </strong> </p>
5-5.
<em> : 이탤릭체 형태로 강조
<p>홈짱닷컴 <em> Homzzang.com </em> </p>
[참고]
<b> : 단순 강조
<i> : 이탤릭체. 음성이나 기술적 용어에 사용.
6.
<abbr> : 두문자어・축약어
<p><abbr title="BootStrap">BS</abbr > - 홈짱닷컴 Homzzang.com</p>
※ 마우스커서 올릴 때 title 속성값에 적힌 원래 글자 보여줌. (물음표 생기고, 글자 밑에 밑줄 생김.)
.initialism
<p><abbr title="BootStrap" class="initialism ">BS</abbr> - 홈짱닷컴 Homzzang.com</p>
7.
<br> : 개행 (= 줄바꿈 )
<address>
<strong>홈짱</strong><br>
<a href="mailto:#"></a>
</address>
8.
< blockquote > : 인용구 상자
[왼쪽정렬] - 기본
< blockquote >
<p>홈짱닷컴 Homzzang.com</p>
<footer>신비</footer>
</blockquote>
결과보기
[오른쪽 정렬] - .blockquote-reverse
<blockquote class='blockquote-reverse '>
<p>홈짱닷컴 Homzzang.com</p>
<footer>By. 신비 <cite title="그누보드">sir.kr</cite></footer>
</blockquote>
결과보기
<blockquote> 태그 안에서 인용구는 <p> 태그로, 출처는 <footer> 태그로 감싸주는 걸 추천.
9.<dl> : 설명목록 ( D escription L ist )
<dt>,<dd> : 세로정렬
<dl >
<dt>홈짱닷컴</dt>
<dd>- Homzzang.com</dd>
</dl
결과보기
<dt>,<dd> : 가로정렬
.dl-horizontal
<dl class="dl-horizontal ">
<dt>...</dt>
<dd>...</dd>
</dl>
※ 기본 <dl>처럼 시작하지만 브라우저 창 너비가 확장되면 가로 정렬로 바뀜.
※ 너비보다 너무 긴 <dd> 내용을 text-overflow 속성 이용해 줄임. (좁은 너비에서는 개행 됨.)
10.
< code > : 옅은 핑크색 배경에 짙은 핑크색 글씨로 표현
<div class="container">
<p><code >div</code > 요소 - 홈짱닷컴 Homzzang.com</p>
</div>
결과보기
11.
< kbd > : 키보드키 (= 검은배경에 흰글씨로 표현)
<div class="container">
<p><kbd >Ctrl + D</kbd > 홈짱닷컴 Homzzang</p>
</div>
결과보기
12.
<pre > : 코드그대로출력 (= 약간 작은 글씨로 표현)
<pre>
홈짱닷컴 Homzzang.com
</pre>
결과보기
.pre-scrollable
<pre class='pre-scrollable '>
...
</pre>
12.
Text align : 텍스트 정렬 클래스
<p class="text-left ">텍스트 왼쪽정렬 .text-left { text-align: left; }</p>
<p class="text-center ">텍스트 가운데정렬 .text-center { text-align: center; }</p>
<p class="text-right ">텍스트 오른쪽정렬 .text-right { text-align: right; }</p>
<p class="text-justify ">텍스트 양쪽정렬 .text-justify { text-align: justify; }</p>
<p class="text-nowrap ">텍스트 줄바꿈안함 .text-nowrap { white-space : nowrap; }</p>
13.
Text transform : 텍스트 변형 클래스
<p class="text-lowercase ">소문자 된 텍스트</p>
<p class="text-uppercase ">대문자 된 텍스트</p>
<p class="text-capitalize ">첫글자만 대문자 된 텍스트</p>
14.
List (리스트・목록)
[순서 없는 목록]
<ul>
<li>...</li>
</ul>
[순서 있는 목록]
<ol>
<li>...</li>
</ol>
.list-unstyled 직접 자식 리스트의 list-style과 padding-left 제거. (손자 요소 경우 별도 추가 필요.)
.list-unstyled {padding-left: 0; list-style: none;}
<ul class="list-unstyled ">
<li>...</li>
</ul>
.list-inline
<ul class="list-inline">
<li>...</li>
</ul>
Text Color 글자색・배경색
[내용별 글자색]
<p class = "text-muted ">묵언 - 회색 (#777)</ p>
<p class = "text-primary ">중요 - 파란색 (#337ab7)</ p>
<p class = "text-success ">성공 - 녹색 (#3c763d)</ p>
<p class = "text-info ">정보 - 파란색 (#31708f)</ p>
<p class = "text-warning ">경고 - 똥색 (#8a6d3b)</ p>
<p class = "text-danger ">위험 - 진갈색 (#a94442)</ p>
결과보기
[내용별 배경색]
<p class="bg-primary ">중요 - 짙은파란배경 흰색글씨</p>
<p class="bg-success ">성공 - 연한연두배경 똥색글씨</p>
<p class="bg-info ">정보 - 옅은하늘배경 똥색글씨</p>
<p class="bg-warning ">경고 - 옅은핑크배경 똥색글씨</p>
<p class="bg-danger ">위험 - 옅은보라배경 똥색글씨</p>
결과보기
