[Bootstrap 5] 핵심 요약 – 컨테이너, 그리드, 컴포넌트

👩🏼‍💻 Bootstrap 5는 반응형 웹 디자인을 위한 CSS 기반 프레임워크로, 컨테이너 시스템, 그리드 레이아웃, 다양한 UI 컴포넌트 및 유틸리티 클래스를 제공한다.

---

1️⃣ Container & Grid 시스템

Bootstrap의 레이아웃은 기본적으로 Container와 Grid(행/열) 시스템으로 구성됩니다.

✅ Container

<div class="container">      <!-- 고정 폭, 반응형 max-width -->
<div class="container-fluid"> <!-- 항상 100% 너비 -->

✅ Grid 기본 구조

<div class="container">
  <div class="row">
    <div class="col">1</div>
    <div class="col">2</div>
    <div class="col">3</div>
  </div>
</div>

• .col은 자동 너비, .col-6은 12칸 중 6칸 차지
• 반응형 클래스: col-sm-, col-md-, col-lg- 등

---

2️⃣ Flexbox & Grid 정렬

Bootstrap의 Flex 유틸리티로 다양한 정렬이 가능합니다.

✅ Flex 컨테이너

<div class="d-flex justify-content-center align-items-center">

클래스	의미
d-flex	flex 컨테이너로 지정
justify-content-*	가로 정렬
align-items-*	세로 정렬

---

3️⃣ 📏 Margin / Padding / Gutter

✅ Margin & Padding

<div class="mt-3 ps-2">Margin Top, Padding Start</div>

접두사	의미
m, p	margin, padding
t, b, s, e, x, y	top, bottom, start, end, horizontal, vertical

숫자 범위: 0 ~ 5, 또는 auto

✅ Gutter (열 간격)

<div class="row g-3">

• g-*: 전체
• gx-*: 수평만
• gy-*: 수직만

---

4️⃣ 배경, 테두리, 텍스트 유틸리티

<div class="bg-primary text-white border border-2 rounded">

• 배경: bg-*, 테두리: border-*
• 텍스트: text-center, text-muted, text-decoration-none

---

5️⃣ Table 구성

<table class="table table-bordered table-hover">

클래스	설명
table	기본 테이블
table-bordered	모든 셀에 테두리
table-hover	마우스 올리면 하이라이트
table-borderless	테두리 제거

---

6️⃣ Form 요소 디자인

✅ 기본 입력 요소

<input type="text" class="form-control">
<select class="form-select"></select>

✅ 체크박스 & 라디오

<div class="form-check">
  <input class="form-check-input" type="checkbox">
  <label class="form-check-label">동의</label>
</div>

---

7️⃣ 버튼 & 아이콘

<button class="btn btn-primary">확인</button>
<i class="bi bi-alarm"></i> <!-- Bootstrap Icons -->

버튼 색상 클래스: btn-primary, btn-secondary, btn-danger 등

---

8️⃣ 🧭 Navbar & Offcanvas

✅ Navbar

<nav class="navbar navbar-expand-lg bg-light">
  <a class="navbar-brand">MySite</a>
</nav>

✅ Offcanvas

<button class="btn" data-bs-toggle="offcanvas" data-bs-target="#sideMenu">
<div class="offcanvas offcanvas-start" id="sideMenu">...</div>

---

9️⃣ Modal / Tab / Accordion

✅ Modal

<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">...</div>
  </div>
</div>

• JS로 열기 : $('#myModal').modal('show')

✅ Tab

<ul class="nav nav-tabs">
  <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home">탭 내용</div>
</div>

✅ Accordion

<div class="accordion" id="myAcc">
  <div class="accordion-item">
    <h2 class="accordion-header"><button class="accordion-button">제목</button></h2>
    <div class="accordion-collapse collapse show">내용</div>
  </div>
</div>

---

1️⃣0️⃣ Carousel (이미지 슬라이더)

<div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img src="..." class="d-block w-100"></div>
  </div>
  <button class="carousel-control-prev" data-bs-slide="prev"></button>
  <button class="carousel-control-next" data-bs-slide="next"></button>
</div>

---

✅ 마무리 요약

영역	주요 클래스 요약
레이아웃	container, row, col-*
정렬	d-flex, justify-content-*, align-items-*
여백	m-*, p-*, g-*
테두리/배경	border, bg-*, text-*
테이블	table, table-hover
폼	form-control, form-check
버튼/아이콘	btn, bi-*
모달/탭	modal, tab-pane
슬라이더	carousel