[Bootstrap] Alerts

1. 기본 Alert

• 알림창을 만들 수 있는 클래스 제공
• `.alert` 클래스와 함께 색상 클래스를 사용해 유형 설정

✅ 사용 가능한 색상 클래스

클래스 이름	의미
`.alert-success`	성공, 긍정적인 알림 (초록색)
`.alert-info`	정보 제공 (하늘색)
`.alert-warning`	경고, 주의 필요 (주황색)
`.alert-danger`	위험, 오류 경고 (빨간색)
`.alert-primary`	주요 알림 (파란색)
`.alert-secondary`	보조 알림 (회색)
`.alert-light`	밝은 회색 알림
`.alert-dark`	어두운 회색 알림

<div class="alert alert-success">
  <strong>Success!</strong> Indicates a successful or positive action.
</div>

---

2. Alert 안의 링크 스타일

• `.alert-link` 클래스를 사용해 알림창의 색상과 조화를 이루는 링크 생성 가능

<div class="alert alert-success">
  <strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>

---

3. 닫기 가능한 Alert

• `.alert-dismissible` 클래스: 닫기 버튼을 추가할 수 있게 함
• `.btn-close` 클래스와 `data-bs-dismiss="alert"` 속성: 버튼 클릭 시 알림창이 사라짐

<div class="alert alert-success alert-dismissible">
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  <strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>

---

4. 페이드 아웃 효과 (애니메이션)

• `.fade` + `.show` 클래스를 함께 사용하면 알림창이 부드럽게 사라지는 효과

<div class="alert alert-danger alert-dismissible fade show">