[basic] BS5 - Offcanvas (오프캔버스) - 숨겨진 사이드바 메뉴

1. Offcanvas 정의
2. Offcanvas 생성
3. Offcanvas 위치

Offcanvas 정의

 

 모달(= 숨겨져 있다가 활성화되면 표시되는 팝업창)과 유사하나, 주로 사이드바 탐색 메뉴로 자주 사용됨.

 

Offcanvas 생성

 

<div class="offcanvas offcanvas-start" id="hz">

  <div class="offcanvas-header">

    <h1 class="offcanvas-title">Offcanvas 타이틀</h1>

    <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>

  </div>

  <div class="offcanvas-body">

    <p>Offcanvas 내용1</p>

    <p>Offcanvas 내용2</p>

    <p>Offcanvas 내용3</p>

    <button class="btn btn-secondary" type="button">버튼</button>

  </div>

</div>

<div class="container-fluid mt-3">

  <h3>Offcanvas 소개</h3>

  <p>모달과 비슷한 사이드바 메뉴</p>

  <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#hz">Offcanvas 열기</button>

</div>

 

---

[코드 설명]

 

.offcanvas 클래스

• 오프캔버스 사이드바 생성.

.offcanvas-start 클래스

• 오프캔버스 위치를 좌측에 지정하고 너비를 400픽셀로 만듦. 
• 그외 위치 지정 클래스는 아래 예제 참조.

.offcanvas-title 클래스

• 오프캔버스 제목 지정. 
• 적절한 여백과 줄 높이 보장.

.offcanvas-body 클래스

• 오프캔버스 내용 추가.

offcanvas 사이드바 여는 방법

• .offcanvas 컨테이너의 ID (예: #hz) 가리키는 <button>이나 <a> 요소 사용해 열기 가능. 
• <button> 요소 경우, data-bs-target="#hz"
• <a> 요소 경우, data-bs-target="#hz" 또는 href= "#hz" 지정 가능.

 

Offcanvas 위치

 

좌측: <div class="offcanvas offcanvas-start" id="hz">

우측: <div class="offcanvas offcanvas-end" id="hz">

상단: <div class="offcanvas offcanvas-top" id="hz">

하단: <div class="offcanvas offcanvas-bottom" id="hz">