[CSS] 부트스트랩 태그 정리

 

https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css

 

 

1. 레이아웃 관련 클래스

1. 컨테이너 클래스
   - `.container`: 반응형 고정 너비 컨테이너
   - `.container-fluid`: 전체 너비 컨테이너
   - `.container-{breakpoint}`: 특정 중단점까지 전체 너비

2. 그리드 시스템
   - `.row`: 행을 만드는 클래스
   - `.col`: 기본 열
   - `.col-{size}`: 특정 크기의 열 (1-12)
   - `.col-{breakpoint}-{size}`: 반응형 열

---

2. 컴포넌트 스타일

1. 버튼 클래스
   - `.btn`: 기본 버튼
   - `.btn-primary`: 주요 버튼
   - `.btn-secondary`: 보조 버튼
   - `.btn-success`: 성공 버튼
   - `.btn-danger`: 위험 버튼
   - `.btn-warning`: 경고 버튼
   - `.btn-info`: 정보 버튼
   - `.btn-light`: 밝은 버튼
   - `.btn-dark`: 어두운 버튼

2. 카드 클래스
   - `.card`: 카드 컨테이너
   - `.card-body`: 카드 본문
   - `.card-title`: 카드 제목
   - `.card-text`: 카드 텍스트
   - `.card-header`: 카드 헤더
   - `.card-footer`: 카드 푸터

---

 3. 유틸리티 클래스

1. 여백 (Margin)
   - `.m-{size}`: 전체 마진
   - `.mt-{size}`: 위쪽 마진
   - `.mb-{size}`: 아래쪽 마진
   - `.ms-{size}`: 왼쪽 마진
   - `.me-{size}`: 오른쪽 마진

2. 패딩 (Padding)
   - `.p-{size}`: 전체 패딩
   - `.pt-{size}`: 위쪽 패딩
   - `.pb-{size}`: 아래쪽 패딩
   - `.ps-{size}`: 왼쪽 패딩
   - `.pe-{size}`: 오른쪽 패딩

---

4. 텍스트 스타일

1. 정렬
   - `.text-start`: 왼쪽 정렬
   - `.text-center`: 가운데 정렬
   - `.text-end`: 오른쪽 정렬

2. 색상
   - `.text-primary`: 주요 색상
   - `.text-secondary`: 보조 색상
   - `.text-success`: 성공 색상
   - `.text-danger`: 위험 색상
   - `.text-warning`: 경고 색상
   - `.text-info`: 정보 색상

---

5. 배경 색상

- `.bg-primary`: 주요 배경
- `.bg-secondary`: 보조 배경
- `.bg-success`: 성공 배경
- `.bg-danger`: 위험 배경
- `.bg-warning`: 경고 배경
- `.bg-info`: 정보 배경
- `.bg-light`: 밝은 배경
- `.bg-dark`: 어두운 배경

---

6. 테이블 클래스

- `.table`: 기본 테이블
- `.table-striped`: 줄무늬 테이블
- `.table-bordered`: 테두리가 있는 테이블
- `.table-hover`: 호버 효과가 있는 테이블
- `.table-dark`: 어두운 테마 테이블

---

7. 폼 클래스

- `.form-control`: 입력 필드
- `.form-label`: 라벨
- `.form-select`: 선택 상자
- `.form-check`: 체크박스/라디오
- `.form-range`: 범위 선택

---

8. 반응형 유틸리티

- `.d-none`: 숨기기
- `.d-block`: 보이기
- `.d-{breakpoint}-none`: 특정 중단점에서 숨기기
- `.d-{breakpoint}-block`: 특정 중단점에서 보이기

---

9. Flex 유틸리티

- `.d-flex`: flex 컨테이너
- `.flex-row`: 행 방향
- `.flex-column`: 열 방향
- `.justify-content-start`: 시작 정렬
- `.justify-content-center`: 가운데 정렬
- `.justify-content-end`: 끝 정렬
- `.align-items-start`: 시작 수직 정렬
- `.align-items-center`: 가운데 수직 정렬
- `.align-items-end`: 끝 수직 정렬

---

10. Border 유틸리티

- `.border`: 테두리
- `.border-0`: 테두리 없음
- `.border-top`: 위쪽 테두리
- `.border-bottom`: 아래쪽 테두리
- `.border-start`: 왼쪽 테두리
- `.border-end`: 오른쪽 테두리

---

사용예시

<div class="container">
    <div class="row">
        <div class="col-md-6 p-3 bg-light text-center">
            <button class="btn btn-primary">버튼</button>
        </div>
    </div>
</div>

이렇게 하나의 요소에 여러 클래스를 함께 사용하여 원하는 디자인을 만들 수 있다. 부트스트랩의 클래스들은 직관적이고 사용하기 쉽게 설계되어 있어 웹 개발을 더욱 효율적으로 할 수 있도록 도와준다.