[Bootstrap] Offcanvas

1. 기본 구조

• Offcanvas는 모달처럼 숨겨진 콘텐츠를 슬라이딩 형식으로 보여주는 UI 요소
• 보통 사이드바 메뉴로 사용

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="demo">
  <div class="offcanvas-header">
    <h1 class="offcanvas-title">헤더</h1>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <p>내용이 들어갑니다.</p>
    <button class="btn btn-secondary">버튼</button>
  </div>
</div>

<!-- 열기 버튼 -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#demo">
  사이드바 열기
</button>

클래스	설명
`.offcanvas`	Offcanvas 컴포넌트 생성
`.offcanvas-start`	왼쪽에서 슬라이딩
`.offcanvas-header`	헤더 영역
`.offcanvas-body`	본문 내용 영역
`.btn-close`	닫기 버튼
`data-bs-toggle="offcanvas"`	열기 동작 지정
`data-bs-target="#id"`	연결할 Offcanvas ID

---

2. 위치 설정 클래스

위치	클래스
왼쪽	`.offcanvas-start`
오른쪽	`.offcanvas-end`
위	`.offcanvas-top`
아래	`.offcanvas-bottom`

---

3. 반응형 숨김 클래스

<div class="offcanvas offcanvas-start offcanvas-lg" id="demo">

클래스	의미
`.offcanvas-sm`	sm 이하에서 offcanvas로 동작
`.offcanvas-md`	md 이하에서 offcanvas로 동작
`.offcanvas-lg`	lg 이하에서 offcanvas로 동작

---

4. 어두운 테마 적용

<div class="offcanvas offcanvas-end text-bg-dark" id="demo">
  <button class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
</div>

클래스	역할
`.text-bg-dark`	배경과 텍스트 어둡게
`.btn-close-white`	닫기 버튼 흰색으로 변경

---

5. 닫기 방법

• 닫기 버튼 클릭 (`data-bs-dismiss="offcanvas"`)
• 바깥 영역 클릭
• ESC 키 (기본 활성화)