부트스트랩5에서 오프캔버스, 컨포넌트

아래는 부트스트랩 버전 3에 포함하고 있는 캐러셀이고 다양한 컴포넌트를 사용하면 블로그 등을 다이내믹하게 꾸밀 수 있다. 버전 5에서는 아래 더보기에 볼 수 있듯 이동점이 직사각형이고 이 블로그는 버전 3이므로 원이다. 참고로 아래 더보기 안을 보듯이 버전 4 이상부터 캐러셀 이동점이 직사각형으로 변했다. 

 

1.  
2.  
3.  

 

 

 

Previous Next

 

버전 5의 콘포넌트에 아코디언, 위에서 본 캐러셀, 오프캔버스 등 다양하다. 그중에서 나는 오프캔버스는 많이 사용할 것 같다. 알고 있듯이 오프캔버스는 버튼을 누르면 브라우저 옆, 아래에서 창이 나오는 알고 있다. 버전 3에서 이 기능이 없어 줄 수 없지만 티스토리 블로그 스킨에서 Poster를 사용한 사람은 알 것이다. 

이 블로그에서 사용하고 있는 오프캔버스는 여기에서 배운 것이다. 버전 3만 아니라 4에서도 오프캔버스가 없다. 참고로 여기를 클릭하여 이 블로그에서 사용하는 오프캔버스를 볼 수 잇다.

 

아래 스킨을 티스토리 스킨의 Poster로 빨간색 사각형 버튼을 클릭하면 카테고리가 나온다. 직접 해보고 싶은 분은 티스토리 공지 블로그를 가면 된다. 그 블로그에서 사용하는 스킨을 Poster다.

 

 

만약 카테고리 등을 보고 싶다면 왼쪽 상단 버튼을 누르면 된다는 것을 알 것이다. 버튼을 누르면 창이 왼쪽에서 나올 것이고 이것이 오프캔버스(OffCanvas)다. 부트스트랩5를 사용한다면 이것을 쉽게 구현할 수 있다. 이것만을 위해 무거운 부트스트랩5를 사용하지는 않을 것이다. 관련 스크립트를 찾아 사용하면 된다. 부트스트랩5를 사용한다면 사용했으면 한다.  오프캔버스의 기본 예는 아래와 같다고 한다. 

 

 

위에 대한 소스는 아래와 같다. 클래스에 offcanvas offcanvas-start를 추가해야 오프캔버스를 시작한다는 것을 알 수 있다. 오프캔버스(offcanvas)는 기본적으로 보여주지 않고 시작하지만 만약 시작 시 오프캔버스를 보여 주고 싶다면 offcanvas offcanvas-start에 show를 추가한다. 그리고 헤더(header)에 오프캔버스를 닫을 수 있는 Close 버튼을 만들어 준다.

 

오프캔버스를 닫을 때 키보드의 ESC 키를 눌러도 된다. 그런데 Poster 스킨에서 esc를 눌렀더니 오프캔버스는 닫히지 않았다.

 

<div class="offcanvas offcanvas-start show" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel" data-bs-backdrop="false" data-bs-scroll="true">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

 

그림과 같이 오프캔버스 위치 기본이 왼쪽인데 오른쪽으로 하고 싶다면 strat 대신 end를 해준다. 그렇게 하면 offcanvas offcanvas-end가 된다. 처음에 실수로 right를 end라고 한 줄 알았다. 만약 아래에서 오프캔버스 위치로 하고 싶다면 start 대신에 bottom이라 해준다. 참고로 소스나 실제로 어떻게 작동되는지 보고 싶다면 아래 더보기를 클릭하면 된다.

 

 

부트스트랩 5에서는 왼쪽, 오른쪽, 아래만 가능하다. 다른 스크랩트를 보면 위도 가능했는데 5는 불가능하니 6에서 추가될 것 같다. 

 

 

오프캔버스가 보인 후 오프캔버스 뒤 배경에 대한 지정을 data-bs-scroll과  속성과 data-bs-backdrop으로 설정할 수 있다. 기본은 배경 스크롤이 금지이고 배경색은 반투명 검정이다. data-bs-scroll는 배경의 스크롤 여부를 설정하고 data-bs-backdrop은 배경색을 처리하는데 사용한다.

 

아래 소스를 보면 data-bs-scroll를 true로 하면 스크롤을 가능하게 할 수 있다는 것을 알 수 있다. 그리고 data-bs-backdrop을 false로하면 배경색을 설정하지 않는다. 즉, 기본을 따르지 않는다.

 

data-bs-scroll와 data-bs-backdrop 값은 true와 false다.

아래에서 HTML을 클릭하여 소스를 볼 수 있고 첫 번째 버튼인 Enable body scrolling을 클릭하면 배경을 스크롤할 수 있으며 배경도 설정하지 않았다. 두 번째 버튼인 Enable backdrop (default)는 기본 오프캔버스라고 할 수 있다. 마지막인 세 번째 버튼을 스크롤이 가능하고 배경이 반투명 검정이다.

 

HTML에서 data-bs-scroll과  속성과 data-bs-backdrop 설정이 어떤지 봤으면 한다.  offcanvas offcanvas-start 뒤에 data-bs-scroll과 data-bs-backdrop을 정의한다.

 

 

---

예전에 오프캔버스(Offcavas)로 적용하여 카테고리 등을 숨기려 했는데 중간에 그만둔 일이 있었다. 이 블로그를 부트스트립5로 변형한다면 오프캔버스에 카테고리, 최근 글, 최근 댓글 등을 집어 넣고 글을 크게 보이게 하고 싶은 생각이 든다.