동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
부트스트랩4에는 CSS코드를 사용하지 않고도 요소를 빠르게 스타일화할 수 있는 유틸리티/헬퍼 클래스가 많습니다.
테두리(Borders)
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)
문맥 border color클래스를 사용하여 테두리에 색을 추가할 수 있습니다.
<span class="border border-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
rounded 클래스를 사용하면 모서리가 부드러운 테두리를 만들 수 있습니다.
<span class="rounded"></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>
Float
.float-right, float-left클래스로 오른쪽 또는 왼쪽으로 요소를 띄우거나 .clearfix클래스를 이용하여 지울 수 있습니다.
<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>
반응형 Floats (Responsive)
반응형 float 클래스를 사용하면 화면 너비에 따라 요소를 왼쪽 또는 오른쪽으로 플로팅합니다.
(.float-*-left|right - 여기에서 * 는 sm(>=576px), md(>=768px), lg(>=992px), xl(>=1200px)
<div class="clearfix">
<div class="float-sm-right">작은 화면이상에서 오른쪽 플로팅</div><br>
<div class="float-md-right">중간 화면이상에서 오른쪽 플로팅</div><br>
<div class="float-lg-right">대형 화면이상에서 오른쪽 플로팅</div><br>
<div class="float-xl-right">초대형 화면이상에서 오른쪽 플로팅</div><br>
<div class="float-none">플로팅안함</div>
</div>
중앙 정렬
.mx-auto 클래스로 요소 가운데 맞춤을 할 수 있습니다.
<div class="mx-auto bg-warning">중앙정렬을 합니다</div>
Width(너비)
w-*클래스를 사용하여 요소의 너비를 설정할 수 있습니다. (.w-25, .w-50, .w-75, .w-100, .mw-100)
<div class="w-25 bg-success">Width 25%</div>
<div class="w-50 bg-success">Width 50%</div>
<div class="w-75 bg-success">Width 75%</div>
<div class="w-100 bg-success">Width 100%</div>
<div class="mw-100 bg-success">Max Width 100%</div>
Height
h-* 클래스를 사용하여 요소의 높이를 설정할 수 있습니다.(.h-25, .h-50, .h-75, .h-100, .mh-100)
<div class="h-25 d-inline-block p-2 bg-success">Height 25%</div>
<div class="h-50 d-inline-block p-2 bg-success">Height 50%</div>
<div class="h-75 d-inline-block p-2 bg-success">Height 75%</div>
<div class="h-100 d-inline-block p-2 bg-success">Height 100%</div>
<div class="mh-100 d-inline-block p-2 bg-success" style="height:500px">Max Height 100%</div>
Spacing(여백)
부트스트랩4에는 광범위한 반응형 margin(바깥여백)과 padding(안쪽여백) 유틸리티 클래스가 있습니다. 모든 중단점에서 작동합니다. xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px))
클래스의 형태
xs : {property}{sides}-{size}
sm, md, lg, xl : {property}{sides}-{breakpoint}-{size}
여기서 {property}는
{sides}는
{size}는
0 - margin 또는 padding 값을 0
1 - margin 또는 padding 값을 .25rem (4px, 웹문서 기본값이 16px인 경우)
2 - margin 또는 padding 값을 .5rem (8px, 웹문서 기본값이 16px인 경우)
3 - margin 또는 padding 값을 1rem (16px, 웹문서 기본값이 16px인 경우)
4 - margin 또는 padding 값을 1.5rem (24px, 웹문서 기본값이 16px인 경우)
5 - margin 또는 padding 값을 3rem (48px, 웹문서 기본값이 16px인 경우)
auto - margin 값을 auto
<div class="pt-4 bg-primary">padding-top:24px (1.5rem = 24px)</div>
<div class="mt-1 p-5 bg-danger">margin-top:4px (.25rem = 4px) , padding:48px (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">margin:48px (3rem = 48px) , padding-bottom:48px (3rem = 48px)</div>
수직 정렬(Vertical Align)
요소의 정렬을 변경하려면 align-클래스를 사용합니다. (inline, inline-block, inline-table, 표 셀에서만 적용됩니다.)
<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>
위치 지정 (Position)
페이지 상단에 요소를 고정/머물게 하려면 .fixed-top클래스를 사용합니다.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
페이지 하단에 요소를 고정/머물게 하려면 .fixed-bottom클래스를 사용합니다.
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
** .sticky-top클래스를 사용하면 페이지를 스크롤할 때 상단에 고정/유지되도록 합니다. (이 클래스는 IE11이전 버전에서는 작동하지 않습니다. position:relative으로 처리합니다.)
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
등록된 댓글이 없습니다.