[Bootstrap] Utility 1. Spacing, Colors, Text

TOC

• Utility
• Spacing
  • 기호
  • negative
• color
  • 지정색 단어
  • 사용법
  • opacity
• Text
  • font-size / font-weight
  • text-decoration
  • wrap/nowrap
  • word break
  • text transform
• REFERENCE

Utility

유틸리티(Utility)에는 유용하게 쓸 수 있는 작지만 다양한 클래스들이 있다. 배경을 설정하는 Background, 테두리인 Border, 기타 Colors와 Sizing, Text 등 박스모델과 이런 저런 속성들이 있다.

그리고 크게는 Display와 Position, Float와 Flex까지 배치와 정렬에 관한 Utility들도 있다. 가벼운 것부터 시작해보자.

Spacing

margin, padding 등의 여백을 설정할 때 사용하는 속성들

기호

m- : margin
p- : padding

<!-- 적용 위치 -->
-t- : top
-b- : bottom
-s- : start // 일반적으로 left
-e- : end // 일반적으로 right
-x- : s + e // 일반적으로 가로축
-y- : t + b // 일반적으로 세로축

<!-- size -->
0 :    0rem (0px)
1 : 0.25rem (4px)
2 :  0.5rem (8px)
3 :    1rem (16px)
4 :  1.5rem (24px)
5 :    3rem (48px)
auto -> auto

위처럼 사용하고 이를 사용해보자.

p-2 = padding: 0.5rem 만큼 부여
mt-3 = margin-top: 1rem 만큼 부여
mx-auto = margin: 0 auto -> 중앙정렬

negative

크기를 숫자로 표현하기 때문에 양수로만 사용할 수밖에 없다. 하지만 우리는 음수값을 margin이나 padding에 부여할 때도 있다.

음수는 숫자 앞에 n을 붙인다.

mt-n1 = margin-top: -0.25rem;

더 자세한 내용은 링크를 참고하자. Bootstrap - Spacing

color

CSS의 기본 색은 너무 쨍한 색이 나오기 때문에 색감에 대한 연구를 한 디자이너들은 각각에 최적화된 이름과 색상을 만들어놓았다.

지정색 단어

primary     : blue
secondary   : gray
success     : green
danger      : red
warning     : orange
info        : steelblue
light       : 옅은 흰색
dark        : 밝은 검정
transparent : 투명

사진을 통해서 확인하자. 색을 부각하기 위해 배경색은 bisque로 설정하였다.

사용법

아래와 같이 사용한다.

text-primary  : 글자색 primary
bg-warning    : 배경색 warning
border-danger : 테두리 색 danger

opacity

투명도를 설정한다.

text-opacity-25

css에서 opacity: 0.25와 같다.

더 자세한 사항은 Bootstrap - Colors 링크 참고

Text

문자열의 표시에 대한 여러 가지 표현법이다.

font-size / font-weight

글자의 크기와 굵기를 지정한다. 글자 크기는 fs-에 1부터 6까지의 지정된 숫자를 붙여 표현하고, 글자 굵기는 fw- 뒤에 bold, bolder, italic 등 글자 속성을 붙여 해당 속성을 표현한다.

<!-- fs -->
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

<!-- fw -->
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

text-decoration

말그대로 text-decoration 뒤에 -속성명을 붙여 사용한다.

<!-- 밑줄 표시 -->
<p class="text-decoration-underline">This text has a line underneath it.</p>

<!-- 취소선 표시 -->
<p class="text-decoration-line-through">
  This text has a line going through it.
</p>

<!-- text-deco 제거 -->
<a href="#" class="text-decoration-none"
  >This link has its text decoration removed</a
>

예를 들어 a 태그에 hover시 자동으로 밑줄이 그어지는 기능을 제거할 때 text-decoration: none을 사용하듯이 text-decoration-none을 사용하면 되겠다.

wrap/nowrap

어떠한 영역 내에서 문장이 wrapping 할지 아니면 영역을 넘겨버릴지 정하는 것이다. text- 뒤에 붙여 사용한다.

<!-- wrap -->
<div class="badge bg-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

<!-- nowrap -->
<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

word break

띄어쓰기 없는 하나의 긴 문자열이 레이아웃을 넘어서는 것을 막아준다.

text-break로 사용한다.

<p class="text-break">
  mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
</p>

text transform

text를 lowercase/uppercase/capitalize 하는 클래스이다.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

더 자세한 내용은 링크를 참고하자. Bootstrap - text

REFERENCE

• Bootstrap - Spacing
• Bootstrap - Colors
• Bootstrap - Text