[Bootstrap] mt-1, p-2... 여백 유틸리티 클래스 정리

Q. mt-1은 어떤 클래스인가?

<div class="text-muted small mt-1 text-end">건</div>

mt-1은 Bootstrap의 margin-top 유틸리티 클래스다. mt-{숫자} 형식으로, 숫자는 0~5까지 사용한다.

클래스 값

mt-0	0px
mt-1	4px
mt-2	8px
mt-3	16px
mt-4	24px
mt-5	48px

mt-1은 위쪽에 4px 여백을 주는 것으로, 예시에서는 "건" 텍스트와 그 위 숫자 사이 간격을 약간 벌리는 역할이다.

여백 유틸리티 전체 규칙

방향과 속성을 조합해서 쓴다: {속성}{방향}-{숫자}

속성:

• m = margin
• p = padding

방향:

• t = top
• b = bottom
• s = start (좌→우 언어에서는 왼쪽)
• e = end (좌→우 언어에서는 오른쪽)
• x = left + right (양쪽)
• y = top + bottom (위아래)
• 방향 생략 시 4면 전체

숫자 → px 환산 (기본 스페이서 기준, 1 = 0.25rem = 4px):

숫자 px

0	0px
1	4px
2	8px
3	16px
4	24px
5	48px

예: px-3은 좌우 padding 16px, my-2는 위아래 margin 8px, p-0은 4면 padding 0.

자주 쓰는 것들 모음

여백

• mt-1 ~ mt-5: 위 여백
• mb-3: 폼 필드끼리 기본 간격 줄 때 자주 씀 (아래 16px)
• mx-auto: 좌우 margin auto — 블록 요소 가운데 정렬
• p-3: 카드/박스 내부 여백으로 자주 씀

텍스트

• text-muted: 회색 계열의 흐린 텍스트 (부가 설명, 캡션 등)
• text-end / text-start / text-center: 텍스트 정렬 (text-right/text-left는 구버전 표기, 최신 Bootstrap은 text-end/text-start)
• small: 폰트 크기를 한 단계 작게
• fw-bold: 굵게

레이아웃

• d-flex: display: flex
• d-none: 숨김 (display: none)
• justify-content-between, align-items-center: flex 정렬용, d-flex와 같이 씀
• w-100: 너비 100%

색상/배경

• bg-light, bg-white: 배경색
• border, border-0: 테두리 추가/제거
• rounded: 모서리 둥글게