여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap – Bootstrap 4 유틸리티
Bootstrap – Bootstrap 4 유틸리티
11개월전 작성
11개월전 수정



Bootstrap 4 유틸리티

Bootstrap 4에는 CSS 코드를 사용하지 않고도 요소의 스타일을 빠르게 지정할 수 있는 많은 유틸리티/도우미 클래스가 있다.

테두리

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>
기본 예시
예제 보기

테두리 색상

상황별 테두리 색상 클래스를 사용하여 테두리에 색상을 추가한다.

예제
<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>
기본 예시
예제 보기

테두리 반경

rounded 클래스가 있는 요소에 둥근 모서리를 추가한다.

예제
<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>
기본 예시
예제 보기

플로트 및 클리어픽스

.float-right 클래스가 있는 요소를 오른쪽으로 또는 .float-left 가 있는 왼쪽으로 플로팅 하고 .clearfix 클래스가 있는 플로트를 지운다.

예제
<div class="clearfix">
  <span class="float-left">Float left</span>
  <span class="float-right">Float right</span>
</div>
기본 예시
예제 보기

반응형 플로트

반응형 부동 클래스( – 여기서 *는 sm(>=576px), md(>=768px), lg(>=992px) 또는 xl(>=1200px))를 사용하여 화면 너비에 따라 요소를 왼쪽이나 오른쪽으로 부동화한다.

예제
<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>
기본 예시
예제 보기

중앙 정렬

요소를 .mx-auto 클래스 중앙에 배치한다.

예제
<div class="mx-auto bg-warning" style="width:150px">Centered</div>
기본 예시
예제 보기

너비

w-* 클래스( .w-25, .w-50, .w-75, .w-100, .mw-100)를 사용하여 요소의 너비를 설정한다.

예제
<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>
기본 예시
예제 보기

높이

h-* 클래스( .h-25, .h-50, .h-75, .h-100, .mh-100)를 사용하여 요소의 높이를 설정한다.

예제
<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>
기본 예시
예제 보기

간격

Bootstrap 4에는 다양한 반응형 마진 및 패딩 유틸리티 클래스가 있다.
xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) 또는 xl(>=1200px)) 모든 중단점에서 작동한다.

{property}{sides}-{size}클래스는 for xs, {property}{sides}-{breakpoint}-{size}for sm, md, lg 및 xl 형식으로 사용된다.

{property}는 다음 중 하나다.

  • m- 세트margin
  • p- 세트padding

{sides}는 다음 중 하나다.

  • t- 세트 margin-top또는padding-top
  • b- 세트 margin-bottom또는padding-bottom
  • l- 세트 margin-left또는padding-left
  • r- 세트 margin-right또는padding-right
  • x- padding-left와 padding-right또는 margin-left와 margin-right를 모두 설정한다.
  • y- padding-top과 padding-bottom또는 margin-top과 margin-bottom를 모두 설정한다.
  • 공백 – 요소의 4개 측면 모두에 margin 또는 padding을 설정한다.

{size}는 다음 중 하나다.

  • 0- 세트 margin또는padding 0
  • 1- margin 또는 padding을 (글꼴 크기가 16px인 경우 4px) .25rem으로 설정한다.
  • 2- margin 또는 padding을 (글꼴 크기가 16px인 경우 8px) .5rem으로 설정한다.
  • 3- margin 또는 padding을 (글꼴 크기가 16px인 경우 16px) 1rem으로 설정한다.
  • 4- margin 또는 padding을 (글꼴 크기가 16px인 경우 24px) 1.5rem으로 설정한다.
  • 5- margin 또는 padding을 (글꼴 크기가 16px인 경우 48px) 3rem으로 설정한다.
  • auto- margin 자동으로 설정한다.

⭐ size 앞에 ​​”n”을 추가하여 여백을 음수로 설정할 수도 있다.

  • n1- (글꼴 크기가 16px인 경우 -4px) margin이 -.25rem로 설정된다.
  • n2- (글꼴 크기가 16px인 경우 -8px) margin이 -.5rem로 설정된다.
  • n3- (글꼴 크기가 16px인 경우 -16px) margin이 -1rem로 설정된다.
  • n4- (글꼴 크기가 16px인 경우 -24px) margin이 -1.5rem로 설정된다.
  • n5- (글꼴 크기가 16px인 경우 -48px) margin이 -3rem로 설정된다.
예제
<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
기본 예시
예제 보기

그림자

shadow-클래스를 사용하여 요소에 그림자를 추가한다.

예제
<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>
기본 예시
예제 보기

수직 정렬

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>
기본 예시
예제 보기

반응형 임베드

상위 항목의 너비를 기준으로 반응형 비디오 또는 슬라이드쇼 삽입을 만든다.

선택한 가로세로 비율을 사용하여 상위 요소의 삽입 요소(예: <iframe> 또는 <video>)에 추가한다.

예제
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>
기본 예시
예제 보기

가시성

.visible 또는 .invisible 클래스를 사용하여 요소의 가시성을 제어한다.
⭐ 이러한 클래스는 CSS 표시 값을 변경하지 않는다.

예제
<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>
기본 예시
예제 보기

위치

예제 1

.fixed-top 클래스를 사용하여 모든 요소를 ​​고정하거나 페이지 상단에 유지한다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  ...
</nav>
기본 예시
예제 보기
예제 2

.fixed-bottom 클래스를 사용하여 모든 요소를 ​​고정하거나 페이지 하단에 유지한다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
  ...
</nav>
기본 예시
예제 보기
예제 3

스크롤할 때 페이지 상단에 요소를 고정하거나 유지하려면 .sticky-top 클래스를 사용한다.
⭐ 이 클래스는 IE11 및 이전 버전에서는 작동하지 않는다. position:relative;로 처리된다.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  ...
</nav>
기본 예시
예제 보기

닫기 아이콘

.close 클래스를 사용하여 닫기 아이콘의 스타일을 지정한다.
이는 경고 및 모달에 자주 사용된다.
실제 아이콘(더 보기 좋은 “x”)을 만들기 위해 기호를 사용한다는 점에 유의하자. 또한 기본적으로 오른쪽으로 부동한다는 점에 유의하자.

예제
<button type="button" class="close">×</button>
기본 예시
예제 보기

블록 요소

요소를 블록 요소로 만들려면 .d-block클래스를 추가한다.
요소가 특정 화면 너비에서 블록 요소가 되어야 하는 시점을 제어하려면 d-*-block 클래스 중 하나를 사용하자.

예제
<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>

기본 예시
예제 보기

참고

Mingg`s Diary
밍구
밍구
공부 목적 블로그