[Bootstrap] 05. 유틸리티 클래스 이해하기

[Bootstrap] 05. 유틸리티 클래스 이해하기

이전 글에서는 Bootstrap의 폼(Form)과 모달(Modal)을 정리했습니다. 이번 글에서는 Bootstrap을 사용할 때 화면을 빠르게 정리할 수 있는 유틸리티 클래스(Utility Class)를 살펴보겠습니다.

유틸리티 클래스는 여백, 정렬, 색상, 크기, 테두리 같은 스타일을 CSS 파일을 따로 작성하지 않고 HTML 클래스만으로 바로 적용할 수 있게 해주는 기능입니다.

---

1. 유틸리티 클래스란?

유틸리티 클래스는 하나의 클래스가 하나의 스타일 역할을 담당하는 방식입니다. 예를 들어 mt-3은 위쪽 여백을 주는 클래스이고, text-center는 글자를 가운데 정렬하는 클래스입니다.

<div class="mt-3 p-4 text-center border rounded">
  Bootstrap 유틸리티 클래스 예시
</div>

위 코드는 별도의 CSS 없이 위쪽 여백, 안쪽 여백, 가운데 정렬, 테두리, 둥근 모서리를 한 번에 적용합니다.

---

2. 여백 클래스: margin과 padding

Bootstrap에서 여백은 m과 p로 표현합니다. m은 margin, p는 padding을 의미합니다.

클래스	의미
m-3	바깥 여백 전체 적용
p-3	안쪽 여백 전체 적용
mt-3	위쪽 margin 적용
mb-3	아래쪽 margin 적용
px-3	좌우 padding 적용
py-3	상하 padding 적용

<div class="mb-3">아래쪽 여백이 있는 영역</div>

<div class="p-4">
  안쪽 여백이 적용된 박스
</div>

숫자는 0부터 5까지 자주 사용합니다. 숫자가 커질수록 여백도 커집니다.

---

3. 방향을 나타내는 문자

여백 클래스에는 방향을 나타내는 문자가 함께 사용됩니다.

문자	의미
t	top, 위쪽
b	bottom, 아래쪽
s	start, 시작 방향
e	end, 끝 방향
x	좌우 방향
y	상하 방향

<div class="mt-4">위쪽 여백</div>
<div class="mb-4">아래쪽 여백</div>
<div class="ms-3">시작 방향 여백</div>
<div class="me-3">끝 방향 여백</div>

Bootstrap 5에서는 left, right보다 start, end 개념을 사용합니다. 그래서 ms는 margin-start, me는 margin-end를 의미합니다.

---

4. 텍스트 정렬 클래스

글자 정렬도 클래스로 간단하게 처리할 수 있습니다.

<p class="text-start">왼쪽 정렬</p>
<p class="text-center">가운데 정렬</p>
<p class="text-end">오른쪽 정렬</p>

클래스	의미
text-start	시작 방향 정렬
text-center	가운데 정렬
text-end	끝 방향 정렬

제목, 버튼 영역, 안내 문구를 정렬할 때 자주 사용합니다.

---

5. 글자 스타일 클래스

글자의 굵기나 기울임, 보조 문구 표현도 유틸리티 클래스로 처리할 수 있습니다.

<p class="fw-bold">굵은 글씨</p>
<p class="fw-normal">기본 굵기</p>
<p class="fst-italic">기울임 글씨</p>
<p class="text-muted">보조 설명 문구</p>

특히 text-muted는 설명 문구나 중요도가 낮은 정보를 표시할 때 자주 사용됩니다.

---

6. display 클래스

display 클래스는 요소를 보이게 하거나 숨기거나, 배치 방식을 바꿀 때 사용합니다.

<div class="d-block">block 요소</div>
<div class="d-inline">inline 요소</div>
<div class="d-flex">flex 요소</div>
<div class="d-none">화면에서 숨김</div>

클래스	역할
d-block	block 요소로 표시
d-inline	inline 요소로 표시
d-flex	flex 배치 적용
d-none	화면에서 숨김

---

7. Flex 정렬 클래스

d-flex를 사용하면 Flexbox 기반 정렬을 쉽게 적용할 수 있습니다. 버튼을 양쪽 끝에 배치하거나, 아이콘과 텍스트를 가운데 정렬할 때 자주 사용됩니다.

<div class="d-flex justify-content-between align-items-center">
  <span>왼쪽 내용</span>
  <button class="btn btn-primary">버튼</button>
</div>

클래스	의미
justify-content-start	가로 시작 방향 정렬
justify-content-center	가로 가운데 정렬
justify-content-between	양쪽 끝 정렬
align-items-center	세로 가운데 정렬
gap-2	요소 사이 간격 적용

<div class="d-flex gap-2">
  <button class="btn btn-primary">저장</button>
  <button class="btn btn-secondary">취소</button>
</div>

버튼 사이 간격을 직접 margin으로 조절하기보다 gap 클래스를 사용하면 더 깔끔하게 관리할 수 있습니다.

---

8. 색상 클래스

Bootstrap은 의미가 담긴 색상 클래스를 제공합니다. 단순히 색을 꾸미는 용도뿐 아니라, 사용자에게 상태나 중요도를 전달하는 역할도 합니다.

<p class="text-primary">중요한 안내</p>
<p class="text-success">성공 메시지</p>
<p class="text-danger">오류 메시지</p>

<div class="bg-light p-3">밝은 배경 영역</div>
<div class="bg-primary text-white p-3">강조 배경 영역</div>

클래스	주로 사용하는 의미
primary	주요 색상, 핵심 동작
secondary	보조 정보
success	성공, 완료
warning	주의
danger	삭제, 오류, 위험
light	밝은 배경
dark	어두운 배경

색상 클래스는 화면 전체에 무분별하게 사용하기보다, 중요한 버튼이나 상태 메시지에 제한적으로 사용하는 것이 좋습니다.

---

9. 크기 조절 클래스

너비와 높이도 유틸리티 클래스로 조절할 수 있습니다.

<div class="w-25">너비 25%</div>
<div class="w-50">너비 50%</div>
<div class="w-75">너비 75%</div>
<div class="w-100">너비 100%</div>

버튼이나 입력창을 부모 영역 전체 너비로 맞추고 싶을 때는 w-100을 자주 사용합니다.

<button class="btn btn-primary w-100">전체 너비 버튼</button>

---

10. 테두리와 둥근 모서리

카드, 박스, 입력 영역을 정리할 때는 border와 rounded 클래스를 자주 사용합니다.

<div class="border p-3">테두리가 있는 박스</div>

<div class="border rounded p-3">
  둥근 모서리가 있는 박스
</div>

<span class="badge rounded-pill text-bg-primary">
  둥근 배지
</span>

rounded는 기본적인 둥근 모서리를 만들고, rounded-pill은 알약 형태처럼 더 둥근 모양을 만들 때 사용합니다.

---

11. 반응형 유틸리티 클래스

유틸리티 클래스도 화면 크기에 따라 다르게 적용할 수 있습니다. 예를 들어 모바일에서는 숨기고, 태블릿 이상에서만 보이게 만들 수 있습니다.

<div class="d-none d-md-block">
  md 크기 이상에서만 보이는 영역
</div>

또는 모바일에서는 세로 배치, 큰 화면에서는 가로 배치로 바꿀 수도 있습니다.

<div class="d-flex flex-column flex-md-row gap-3">
  <div>첫 번째 영역</div>
  <div>두 번째 영역</div>
</div>

flex-column은 세로 배치, flex-md-row는 md 크기 이상에서 가로 배치를 의미합니다. 이런 방식으로 같은 HTML 구조를 유지하면서 화면 크기에 따라 자연스럽게 레이아웃을 바꿀 수 있습니다.

---

12. 유틸리티 클래스 사용 예시

아래는 여러 유틸리티 클래스를 함께 사용한 간단한 카드 예시입니다.

<div class="card border rounded shadow-sm">
  <div class="card-body p-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <h5 class="card-title mb-0 fw-bold">회원 정보</h5>
      <span class="badge text-bg-success">활성</span>
    </div>

    <p class="card-text text-muted mb-3">
      Bootstrap 유틸리티 클래스를 활용한 카드 예시입니다.
    </p>

    <button class="btn btn-primary w-100">자세히 보기</button>
  </div>
</div>

이 예시에서는 여백, 정렬, 글자 굵기, 배지, 버튼 너비, 테두리, 그림자 클래스가 함께 사용되었습니다.

---

13. 자주 하는 실수

• 여백을 모두 직접 CSS로만 처리하려고 하는 경우
• margin과 padding의 차이를 구분하지 않고 사용하는 경우
• 색상 클래스를 너무 많이 사용해 화면이 복잡해지는 경우
• d-none을 사용한 뒤 다시 보이게 하는 반응형 클래스를 빼먹는 경우
• 정렬 문제를 해결할 때 flex 구조를 이해하지 않고 클래스만 붙이는 경우

유틸리티 클래스는 편리하지만, 너무 많이 붙이면 HTML이 길어질 수 있습니다. 반복되는 스타일이 많아지면 별도의 CSS나 컴포넌트 구조로 정리하는 것도 고려해야 합니다.

---

14. 정리

• 유틸리티 클래스는 하나의 클래스가 하나의 스타일 역할을 담당한다.
• m은 margin, p는 padding을 의미한다.
• text-center, fw-bold, text-muted 등으로 텍스트 스타일을 빠르게 조절할 수 있다.
• d-flex, justify-content-between, align-items-center로 정렬을 쉽게 처리할 수 있다.
• text-primary, bg-light, border, rounded 같은 클래스로 화면을 빠르게 정리할 수 있다.
• 반응형 유틸리티를 사용하면 화면 크기에 따라 배치를 다르게 만들 수 있다.

Bootstrap의 유틸리티 클래스는 화면의 세부 마감을 빠르게 정리할 수 있게 해주는 도구입니다. 버튼, 카드, 폼 같은 컴포넌트와 함께 사용하면 별도의 CSS를 많이 작성하지 않아도 깔끔한 화면을 만들 수 있습니다.

다음 글에서는 Bootstrap에서 자주 사용하는 알림창(Alert), 배지(Badge), 진행바(Progress)를 정리해보겠습니다.