목차
- border (테두리 사용 여부)
- border color (테두리 색깔)
- border radius (테두리 모서리 둥근 정도)
- Float (한켠띄우기) / Clearfix (줄바꿈)
- Responsive Float (반응형 한켠띄우기)
- Center Align (중앙정렬 = 가운데정렬)
- Width (너비 비율)
- Height (높이 비율)
- Spacing (여백) ★ = [margin(마진) / padding (패딩)]
- Shadows (그림자)
- Vertical Align (수직 정렬)
- Responsive Embeds (반응형 엠베드)
- Visibility (보이기/숨기기)
- Position (위치고정) - 상단고정/하단고정/스티키고정
- Close icon (닫기 아이콘)
- Screenreader (스크린리더)
- Color (글자색) - (일반/링크/불투명도)글자색
- Background Colors (배경색)
- Typography/Text Classes (글자 관련 클래스) ★
- Block Elements (블럭요소화)
- Other Display Classes (그외 노출 관련 클래스) ★
border (테두리 사용 여부)
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
결과보기
border color (테두리 색깔)
<span class="borderborder-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
결과보기
border radius (테두리 모서리 둥근 정도)
<span class="rounded-sm"></span>
<span class="rounded"></span>
<span class="rounded-lg"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span class="rounded-0"></span>
결과보기
※ rounded-circle 제외한 나머지는 별반 차이 없음. ㅡㅡ;
Float (한켠띄우기) / Clearfix (줄바꿈)
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
결과보기
Responsive Float (반응형 한켠띄우기)
<div class="float-sm-right">sm 이상 시 오른쪽에 띄우기</div><br>
<div class="float-md-right">md 이상 시 오른쪽에 띄우기</div><br>
<div class="float-lg-right">lg 이상 시 오른쪽에 띄우기</div><br>
<div class="float-xl-right">xl 이상 시 오른쪽에 띄우기</div><br>
<div class="float-none">띄우기 사용 X</div>
결과보기
Center Align (중앙정렬 = 가운데정렬)
<div class="mx-auto bg-warning" style="width:150px">...</div>
결과보기
Width (너비 비율)
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
결과보기
Height (높이 비율)
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>
결과보기
Spacing (여백) ★ = [margin(마진) / padding (패딩)]
[클래스 형식]
xs 경우: propertysides-size
(예) mr-5, pr-5
sm, md, lg, xl 경우 : propertysides-breakpoint-size
(예) mr-sm-5, pr-sm-5
[클래스 구성요소]
property
m : margin
p : padding
sides
t : 상
b : 하
l : 좌
r : 우
x : 좌우
y : 상하
blank : 상하좌우
breakpoint
xs : (화면너비 <=576px)
sm : (화면너비 >=576px)
md : (화면너비 >=768px)
lg : (화면너비 >=992px)
xl : (화면너비 >=1200px)
size
0 : 0
1 : 0.25rem (※ 글자 크기 16px인 경우 4px) 즉, 글자 크기의 1/4배
2 : .5rem (※ 글자 크기가 16px 경우 8px) 즉, 글자 크기의 1/2배
3 : 1rem (※ 글자 크기가 16px 경우 16px) 즉, 글자 크기의 1배
4 : 1.5rem (글꼴 크기가 16 16인 경우 24px) 즉, 글자 크기의 1.5배
5 : 3rem (※ 글자 크기가 16px 경우 48px) 즉, 글자 크기의 3배
auto : auto (※ margin 경우에만 적용. padding엔 적용 X)
PS.
역마진 (= 음수 마진) : margin의 size값 앞에 "n" 추가.
n1 : -.25rem (※ 글자 크기 16px인 경우 -4px) 즉, 글자 크기의 1/4 역마진.
n2 : -.5rem (※ 글자 크기 16px인 경우 -8px) 즉, 글자 크기의 1/2 역마진.
n3 : -1rem (※ 글자 크기 16px인 경우 -16px) 즉, 글자 크기의 1배 역마진.
n4 : -1.5rem (※ 글자 크기 16px인 경우 -24px) 즉, 글자 크기의 1.5배 역마진.
n5 : -3rem (※ 글자 크기 16px인 경우 -48px) 즉, 글자 크기의 3배 역마진.
[클래스 예제]
<div class="pt-4 bg-warning">...</div>
<div class="p-5 bg-success">...</div>
<div class="m-5 pb-5 bg-info">...</div>
결과보기
[클래스 종류]
* : breakpoint : (xs, sm, md, lg, xl)
# : size : (양: 0~5, 음: n1~n5) ※ margin 경우, auto도 가능.
(margin 경우)
.m-# ・ .m-*-# : 마진 상하좌우
.mt-# ・ .mt-*-# : 마진 상
.mb-# ・ .mb-*-# : 마진 하
.ml-# ・ .ml-*-# : 마진 좌
.mr-# ・ .mr-*-# : 마진 우
.mx-# ・ .mx-*-# : 마진 좌우
.my-# ・ .my-*-# : 마진 상하
(padding 경우)
.p-# ・ .p-*-# : 패딩 상하좌우
.pt-# ・ .pt-*-# : 패딩 상
.pb-# ・ .pb-*-# : 패딩 하
.pl-# ・ .pl-*-# : 패딩 좌
.pr-# ・ .pr-*-# : 패딩 우
.py-# ・ .py-*-# : 패딩 위아래
.px-# ・ .px-*-# : 패딩 좌우
Shadows (그림자)
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>
결과보기
Vertical Align (수직 정렬)
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
결과보기
Responsive Embeds (반응형 엠베드)
21:9 비율
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
16:9 비율
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
4:3 비율
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
1:1 비율
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
결과보기
Visibility (보이기/숨기기)
<div class="visible">보이기</div>
<div class="invisible">안 보이기</div>
Position (위치고정) - 상단고정/하단고정/스티키고정
[상단 고정]
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
결과보기
[하단 고정]
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
결과보기
[스티키 고정]
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
결과보기
Close icon (닫기 아이콘)
<button type="button" class="close">×</button>
Screenreader (스크린리더)
<span class="sr-only">스크린리더 전용</span>
Color (글자색) - (일반/링크/불투명도)글자색
[일반 글자색]
<p class="text-muted">안중요 (연회색)</p>
<p class="text-primary">중요 (진한 하늘색)</p>
<p class="text-success">성공 (녹색)</p>
<p class="text-info">정보 (연청록색)</p>
<p class="text-warning">경고 (오렌지색)</p>
<p class="text-danger">위험 (진한 빨강색)</p>
<p class="text-secondary">부수 (회색)</p>
<p class="text-dark">진회색 (진회색)</p>
<p class="text-body">기본색 (보통, 검정색)</p>
<p class="text-light">연회색 (흰색배경일 때)</p>
<p class="text-white">흰색 (흰색배경일 때)</p>
결과보기
[링크 글자색]
<a> 링크 태그에 사용 경우, 마우스 hover 시 기본 색보다 좀 더 진한색으로 변함.
결과보기
[불투명도 글자색]
<p class="text-black-50">...</p>
<p class="text-white-50 bg-dark">...</p>
결과보기
Background Colors (배경색)
<p class="bg-primary text-white">중요 (파랑)</p>
<p class="bg-success text-white">성공 (녹색)</p>
<p class="bg-info text-white">정보 (청록)</p>
<p class="bg-warning text-white">경고 (오렌지)</p>
<p class="bg-danger text-white">위험 (진빨강)</p>
<p class="bg-secondary text-white">부수 (회색)</p>
<p class="bg-dark text-white">진회색 배경</p>
<p class="bg-light text-dark">연회색 배경</p>
결과보기
Typography/Text Classes (글자 관련 클래스) ★
돋보이는 머리글. (※ 숫자가 작을수록 큼.)
<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>
결과보기
[글자 굵기・이탤릭체]
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text.</p>
<p class="font-italic">Italic text.</p>
결과보기
[문단 글씨 크기]
<p class="lead">문단 글씨 더 크게</p>
<p class="small">문단 글씨 더 작게</p>
결과보기
[긴 한 단어가 레이아웃 깨는 거 방지]
<p class="text-break">...</p>
[텍스트 정렬]
<p class="text-left">텍스트 왼쪽 정렬</p>
<p class="text-right">텍스트 오른쪽 정렬</p>
<p class="text-center">텍스트 가운데 정렬</p>
<p class="text-justify">텍스트 양끝선 정렬</p>
<p class="text-nowrap">텍스트 줄바꿈 방지</p>
결과보기
[링크 밑줄 제거]
<a href="#" class="text-decoration-none">링크 밑줄 제거</a>
결과보기
[텍스트 균등 너비]
<p class="text-monospace">Monospaced text.</p>
결과보기
[텍스트 대소문자 처리]
<p class="text-lowercase">소문자화</p>
<p class="text-uppercase">대문자화</p>
<p class="text-capitalize">각 첫글자만 대문자</p>
결과보기
[텍스트 글자색 초기화 = 부모요소 글자색 상속]
<p class="text-primary"><a href="#" class="text-reset">reset link</a></p>
결과보기
[두문자어 글자 크기 작게]
<p><abbr title="World Health Organization">WHO</abbr> (보통 크기)</p>
<p><abbr title="World Health Organization" class="initialism">WHO</abbr> (좀 더 작은 크기)</p>
결과보기
[자식요소 리스트의 list-style 초기화 및 왼쪽 마진 제거]
※ 자손요소 이하엔 적용 X
<ul class="list-unstyled">
<li>HTML</li>
<li>BS
<ul>
<li>BS3</li>
<li>BS4</li>
</ul>
</li>
<li>CSS</li>
</ul>
결과보기
[리스트 가로 정렬]
<ul class="list-inline">
<li class="list-inline-item">HTML</li>
<li class="list-inline-item">CSS</li>
<li class="list-inline-item">JS</li>
</ul>
결과보기
[pre 요소에 스크롤 생성]
<pre class="pre-scrollable">...</pre>
결과보기
Block Elements (블럭요소화)
[요소 보이기] ※ 다른 기기 ★★★★★
<span class="d-block bg-success">d-block</span>
<span class="d-sm-block bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span class="d-xl-block bg-success">d-xl-block</span>
결과보기
Other Display Classes (그외 노출 관련 클래스) ★
[요소 숨기기] ※ 다른 요소.
※ d- : display 의미.
<div class="d-none">Hidden DIV</div>
<p class="d-none">Hidden P</p>
결과보기
[요소 숨기기] ※ 다른 기기. ★★★★★
<div class="d-none bg-success">Hidden DIV</div>
<div class="d-sm-none bg-success">d-sm-none</div>
<div class="d-md-none bg-success">d-md-none</div>
<div class="d-lg-none bg-success">d-lg-none</div>
<div class="d-xl-none bg-success">d-xl-none</div>
결과보기
[인라인 요소화] ※ 다른 요소.
<div class="d-inline">Inline DIV.</div>
<p class="d-inline">Inline P.</p>
결과보기
[인라인 요소화] ※ 다른 기기.
<div class="d-inline bg-success">Inline DIV</div>
<div class="d-sm-inline bg-success">d-sm-inline</div>
<div class="d-md-inline bg-success">d-md-inline</div>
<div class="d-lg-inline bg-success">d-lg-inline</div>
<div class="d-xl-inline bg-success">d-xl-inline</div>
결과보기
[인라인블럭요소화] ※ 다른 요소
<div class="d-inline-block">Inline block DIV.</div>
<p class="d-inline-block">Inline block p.</p>
결과보기
[인라인블럭요소화] ※ 다른 기기
<div class="d-inline-block bg-success">Inline block DIV</div>
<div class="d-sm-inline-block bg-success">d-sm-inline-block</div>
<div class="d-md-inline-block bg-success">d-md-inline-block</div>
<div class="d-lg-inline-block bg-success">d-lg-inline-block</div>
<div class="d-inline-block bg-success">d-xl-inline-block</div>
결과보기
[테이블요소화] 모든 기기
<div class="d-table" style="width:100%">
<div class="d-table-row" style="width:100%">
<div class="d-table-cell">
<h4>Left Cell</h4>
<p>...</p>
</div>
<div class="d-table-cell">
<h4>Middle Cell</h4>
<p>...</p>
</div>
<div class="d-table-cell">
<h4>Right Cell</h4>
<p>...</p>
</div>
</div>
</div>
결과보기
[테이블요소화] 다른 기기
<div class="d-md-table bg-success" style="width:100%">
<div class="d-md-table-row" style="width:100%">
<div class="d-md-table-cell">
<h4>Left Cell</h4>
<p>...</p>
</div>
<div class="d-md-table-cell">
<h4>Middle Cell</h4>
<p>...</p>
</div>
<div class="d-md-table-cell">
<h4>Right Cell</h4>
<p>...</p>
</div>
</div>
</div>
결과보기
[플렉스박스화] ※ 블럭형 플렉스박스 생성 후, 자식 요소를 플렉스 아이템으로 만듦.
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
결과보기
[플렉스박스] ※ 다른 기기
<div class="d-flex bg-success">d-flex</div>
<span class="d-sm-flex bg-success">d-sm-flex</span>
<span class="d-md-flex bg-success">d-md-flex</span>
<span class="d-lg-flex bg-success">d-lg-flex</span>
<span class="d-xl-flex bg-success">d-xl-flex</span>
결과보기
[인라인 플렉스박스] ※ 인라인형 플렉스박스 생성 후, 자식요소를 플렉스 아이템으로 만듦.
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
결과보기
[인라인 플렉스박스] ※ 다른 기기
<div class="d-inline-flex bg-success">d-flex</div>
<div class="d-sm-inline-flex bg-success">d-sm-flex</div>
<div class="d-md-inline-flex bg-success">d-md-flex</div>
<div class="d-lg-inline-flex bg-success">d-lg-flex</div>
<div class="d-xl-inline-flex bg-success">d-xl-flex</div>
결과보기
