[React] 리엑트 부트스트랩의 단축 클래스 정리

리엑트 부트스트랩은 빠르고 간결하게 스타일을 적용할 수 있도록 다양한 유틸리티 클래스를 제공한다.

 

하지만 막상 프로젝트에 사용하려고 하니 외우고 있는 게 아니라면 단축 클래스를 찾아봐야 하고 헷갈릴 때가 있어서, 정리해 두면 좋을 것 같아서 각각 어떻게 사용되는지 어떤 기능을 하는지 정리하려고 한다.

 

Margin and Padding

패딩과 마진은 외부, 내부 여백을 설정하는데 사용된다.

 

All Sides (모든 면)

• m-0 / p-0: 여백 없음
• m-1 / p-1: 0.25rem
• m-2 / p-2: 0.5 rem
• m-3 / p-3: 1 rem
• m-4 / p-4: 1.5 rem
• m-5 / p-5: 3 rem
• m-auto: 자동 여백 (주로 수평 정렬)

Specific Sides (특정 면)

• mt-*, mr-*, mb-*, ml-*: 상(top), 우(right), 하(bottom), 좌(left) 여백
• pt-*, pr-*, pb-*, pl-*: 상(top), 우(right), 하(bottom), 좌(left) 패딩

Horizontal and Vertical (수평과 수직)

• mx-*, px-*: 좌우 여백/패딩
• my-*, py-*: 상하 여백/패딩

Start and End (시작과 끝)

• ms-*, me-*: 시작(start, 보통 좌), 끝(end, 보통 우) 여백
• ps-*, pe-*: 시작(start), 끝(end) 패딩

 

 

Text Alignment and Display 

Text Alignment (텍스트 정렬)

• text-start: 왼쪽 정렬
• text-center: 중앙 정렬
• text-end: 오른쪽 정렬

Display (디스플레이 속성)

• d-none: 요소 숨김
• d-inline: 요소를 인라인으로 표시
• d-inline-block: 요소를 인라인 블록으로 표시
• d-block: 요소를 블록으로 표시
• d-flex: 요소를 플렉스 컨테이너로 표시
• d-grid: 요소를 그리드 컨테이너로 표시

 

Font

Font Size (폰트 크기)

• fs-1: 매우 큰 폰트 (2.5 rem)
• fs-2: 큰 폰트 (2 rem)
• fs-3: 중간 폰트 (1.75 rem)
• fs-4: 작은 폰트 (1.5 rem)
• fs-5: 더 작은 폰트 (1.25 rem)
• fs-6: 가장 작은 폰트 (1 rem)

Font Weight (폰트 굵기)

• fw-bold: 굵은 글씨 (700)
• fw-bolder: 매우 굵은 글씨 (bolder)
• fw-normal: 기본 글씨 (400)
• fw-light: 가벼운 글씨 (300)

 

 

BackGround and Border

Background (배경색)

• bg-primary: 주요 색상 배경
• bg-secondary: 보조 색상 배경
• bg-success: 성공 상태 배경 (초록색)
• bg-danger: 위험 상태 배경 (빨간색)
• bg-warning: 경고 상태 배경 (노란색)
• bg-info: 정보 배경 (파란색)
• bg-light: 밝은 배경
• bg-dark: 어두운 배경

Borders (테두리)

• border: 기본 테두리
• border-0: 테두리 없음
• border-top, border-end, border-bottom, border-start: 특정 면의 테두리만 추가
• rounded: 기본 둥근 모서리
• rounded-circle: 완전한 원형 테두리
• rounded-pill: 캡슐 형태의 둥근 모서리

 

 

Width and Height

Width (너비)

• w-25: 너비를 25%로 설정
• w-50: 너비를 50%로 설정
• w-75: 너비를 75%로 설정
• w-100: 너비를 100%로 설정
• w-auto: 자동 너비 설정

Height (높이)

• h-25: 높이를 25%로 설정
• h-50: 높이를 50%로 설정
• h-75: 높이를 75%로 설정
• h-100: 높이를 100%로 설정
• h-auto: 자동 높이 설정

 

 

Spacing and Visibility

Spacing

• gap-*: 플렉스 또는 그리드 레이아웃에서 항목 간의 간격을 설정합니다.
  • gap-0 ~ gap-5: 0 rem에서 설정

 

Visibility (가시성)

• visible: 요소가 보이도록 설정
• invisible: 요소를 보이지 않게 설정하지만, 레이아웃에서 공간을 차지함