# 1. 배지 (Badges)

<span class="badge text-bg-primary">주요 (primary)</span>  

<span class="badge text-bg-secondary">보조 (secondary)</span>  

<span class="badge text-bg-success">성공 (success)</span>  

<span class="badge text-bg-danger">위험 (danger)</span>  

<span class="badge text-bg-warning">경고 (warning)</span>  

<span class="badge text-bg-info">정보 (info)</span>  

<span class="badge text-bg-light">밝게 (light)</span>  

<span class="badge text-bg-dark">어둡게 (dark)</span>  


# 2. 알림 (Alerts)

<div class="alert alert-primary" role="alert">
  이것은 주요 알림입니다.
</div>

<div class="alert alert-secondary" role="alert">
  이것은 보조 알림입니다.
</div>

<div class="alert alert-success" role="alert">
  이것은 성공 알림입니다.
</div>

<div class="alert alert-danger" role="alert">
  이것은 위험 알림입니다.
</div>

<div class="alert alert-warning" role="alert">
  이것은 경고 알림입니다.
</div>

<div class="alert alert-info" role="alert">
  이것은 정보 알림입니다.
</div>

<div class="alert alert-light" role="alert">
  이것은 밝은 알림입니다.
</div>

<div class="alert alert-dark" role="alert">
  이것은 어두운 알림입니다.
</div>


# 3. 카드 (Cards)

<div class="card text-bg-primary mb-3" style="max-width: 50rem;">
  <div class="card-header">헤더</div>
  <div class="card-body">
    <h5 class="card-title">주요 카드 제목</h5>
    <p class="card-text">카드 제목을 기반으로 하고 카드의 콘텐츠 대부분을 구성하는 일부 빠른 예제 텍스트입니다.</p>
  </div>
</div>

<div class="card text-bg-secondary mb-3" style="max-width: 45rem;">
  <div class="card-header">헤더</div>
  <div class="card-body">
    <h5 class="card-title">보조 카드 제목</h5>
    <p class="card-text">카드 제목을 기반으로 하고 카드의 콘텐츠 대부분을 구성하는 일부 빠른 예제 텍스트입니다.</p>
  </div>
</div>

<div class="card text-bg-success mb-3" style="max-width: 40rem;">
  <div class="card-header">헤더</div>
  <div class="card-body">
    <h5 class="card-title">성공 카드 제목</h5>
    <p class="card-text">카드 제목을 기반으로 하고 카드의 콘텐츠 대부분을 구성하는 일부 빠른 예제 텍스트입니다.</p>
  </div>
</div>

<div class="card text-bg-danger mb-3" style="max-width: 35rem;">
  <div class="card-header">헤더</div>
  <div class="card-body">
    <h5 class="card-title">위험 카드 제목</h5>
    <p class="card-text">카드 제목을 기반으로 하고 카드의 콘텐츠 대부분을 구성하는 일부 빠른 예제 텍스트입니다.</p>
  </div>
</div>

<div class="card text-bg-warning mb-3" style="max-width: 30rem;">
  <div class="card-header">헤더</div>
  <div class="card-body">
    <h5 class="card-title">경고 카드 제목</h5>
    <p class="card-text">카드 제목을 기반으로 하고 카드의 콘텐츠 대부분을 구성하는 일부 빠른 예제 텍스트입니다.</p>
  </div>
</div>

<div class="card text-bg-info mb-3" style="max-width: 25rem;">
  <div class="card-header">헤더</div>
  <div class="card-body">
    <h5 class="card-title">정보 카드 제목</h5>
    <p class="card-text">카드 제목을 기반으로 하고 카드의 콘텐츠 대부분을 구성하는 일부 빠른 예제 텍스트입니다.</p>
  </div>
</div>

<div class="card text-bg-light mb-3" style="max-width: 20rem;">
  <div class="card-header">헤더</div>
  <div class="card-body">
    <h5 class="card-title">밝은 카드 제목</h5>
    <p class="card-text">카드 제목을 기반으로 하고 카드의 콘텐츠 대부분을 구성하는 일부 빠른 예제 텍스트입니다.</p>
  </div>
</div>

<div class="card text-bg-dark mb-3" style="max-width: 15rem;">
  <div class="card-header">헤더</div>
  <div class="card-body">
    <h5 class="card-title">어두운 카드 제목</h5>
    <p class="card-text">카드 제목을 기반으로 하고 카드의 콘텐츠 대부분을 구성하는 일부 빠른 예제 텍스트입니다.</p>
  </div>
</div>


# 4. 색상 (Colors)
## 문맥적 색상
<p class="text-primary">보세요, 저는 우물 안에 있어요!</p>
<p class="text-warning">보세요, 저는 우물 안에 있어요!</p>
<p class="text-danger">보세요, 저는 우물 안에 있어요!</p>

## 문맥적 배경
<p class="text-danger bg-primary">보세요, 저는 우물 안에 있어요!</p>
<p class="text-primary bg-warning">보세요, 저는 우물 안에 있어요!</p>
<p class="text-warning bg-danger">보세요, 저는 우물 안에 있어요!</p>


# 5. 접기 (Collapse)
## 콘텐츠 표시
<a class="btn btn-primary text-white" data-bs-toggle="collapse" href="#collapse-1">
  콘텐츠 표시
</a>

<div class="collapse" id="collapse-1">
  <div class="card card-body">

- 표시하려는 콘텐츠
  - 표시하려는 콘텐츠
      
  </div>
</div>

## 콘텐츠 숨기기
<a class="btn btn-secondary text-white" data-bs-toggle="collapse" href="#collapse-2">
  콘텐츠 숨기기
</a>

<div class="collapse show" id="collapse-2">
  <div class="card card-body">

- 숨기려는 콘텐츠
  - 숨기려는 콘텐츠

  </div>
</div>


# 공식 문서
- [배지에 대한 자세한 내용은 여기를 클릭하세요](https://getbootstrap.jp/docs/5.3/components/badge/)
- [알림에 대한 자세한 내용은 여기를 클릭하세요](https://getbootstrap.jp/docs/5.3/components/alerts/)
- [카드에 대한 자세한 내용은 여기를 클릭하세요](https://getbootstrap.jp/docs/5.3/components/card/)
- [색상에 대한 자세한 내용은 여기를 클릭하세요](https://getbootstrap.jp/docs/5.3/utilities/colors/)
- [접기에 대한 자세한 내용은 여기를 클릭하세요](https://getbootstrap.jp/docs/5.3/components/collapse/)