본문 바로가기
javascript/javascript

자바스크립트 bootstrap5 Offcanvas 만들기 (오프캔버스)

by 산코디 2023. 2. 2.

자바스크립트 bootstrap Offcanvas 만들기 (오프캔버스)

 

 

안녕하세요.

오늘은 자바스크립트에서 bootstrap5의 Offcanvas 기능을 구현해 보려고 합니다. 웹페이지를 이용하다 보면 사이드나 상단, 하단부에 표시되는 컴포넌트 기능입니다. 하나의 페이지에서 보일 정보도 많고 기능도 많다 보니까 간단하게 사이드에 기능을 숨겨놓고 페이지 이동 없이 간단하게 부가적인 기능들을 활용할 수 있습니다. bootstrap에서 제공되는 기능이며, 이름 또한 bootstrap에서 만들어서 그런지 이름이 생소하긴 하지만 사용하다 보면 또 익숙해지긴 합니다. :) 

 

그러면 Offcanvas가 무엇인지 어떤 기능을 할 수 있는지 예제를 통해 하나씩 알아보도록 하겠습니다.

Offcanvas 오프캔버스
웹페이지의 사이드 (좌측, 우측, 상단, 하단)에 표시되는 컴포넌트
부가적인 기능을 추가하여 간단하게 사이드에 숨겨놓고 필요할 때에만 오픈시켜 활용하는 기능으로, 상황에 따라 잘 활용하면 생산성도 올라가게 된다.

 

1. Offcanvas 기본 컴포넌트

<!doctype html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </head>

    <body>
        <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvas" role="button" aria-controls="offcanvas">
            Left Side
        </a>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
            <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">
              안녕하세요. 오프캔버스 컴포넌트 기본 예시입니다.
            </div>
        </div>
    </body>
</html>

우선 버튼 태그와 offcanvas 속성을 넣어준 div 태그로 생성을 해줬습니다. 버튼 태그에서 offcanvas 요소와 연동시켜주는 설정을 추가해 줍니다.

 

button
  • href 속성 : offcanvas 요소의 id값 입력
  • data-bas-toggle="offcanvas" : toggle로 작동할 수 있도록 속성 추가

offcanvas 요소 내의 태그들을 보게 되면 modal 컴포넌트의 작성 방식과 유사한 편입니다. header, title, body 등

offcanvas의 위치를 설정하기 위해서 class에 "offcanvas-start"를 추가해 줬습니다. 해당 class를 추가하면 화면에서 좌측에 컴포넌트가 위치하게 됩니다.

 

간단한 설정을 마치고 실행 결과를 확인해 보겠습니다.

 

실행 결과

자바스크립트 bootstrap offcanvas (오프캔버스) 컴포넌트

소스 코드에서 설정한 것과 같이 화면의 좌측에서 컴포넌트가 슬라이딩되어 펼쳐지게 됩니다. 그리고 컴포넌트를 닫을 때에는 모달 컴포넌트와 동일하게 X 버튼을 누르면 닫히게 됩니다. 아니면 컴포넌트 외의 영역을 클릭하게 되면 동일하게 컴포넌트는 닫히게 됩니다.

 

오프캔버스 컴포넌트에 "offcanvas-start" class를 추가해줬기 때문에 좌측에서 나왔습니다. 그러면 다른 위치에서 나오게 하려면 해당 class값만 변경해 주면 바로 위치 변경이 가능합니다.

 

  • 좌측 위치 : offcanvas-start
  • 우측 위치 : offcanvas-end
  • 상단 위치 : offcanvas-top
  • 하단 위치 : offcanvas-bottom

그럼 위치값을 다르게 하는 예제를 보도록 하겠습니다.

 

 

반응형

2. Offcanvas 위치 변경 예시

<div>
    <!-- left offcanvas 연동 버튼 -->
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasLeft" role="button" aria-controls="offcanvas">
        Left Side
    </a>
    <!-- right offcanvas 연동 버튼 -->
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasRight" role="button" aria-controls="offcanvas">
        Right Side
    </a>
    <!-- top offcanvas 연동 버튼 -->
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasTop" role="button" aria-controls="offcanvas">
        Top Side
    </a>
    <!-- bottom offcanvas 연동 버튼 -->
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasBottom" role="button" aria-controls="offcanvas">
        Bottom Side
    </a>
</div>

<!-- left offcanvas component -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft" aria-labelledby="offcanvasLabel">
    <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">
      안녕하세요. 화면의 좌측에 위치한 오프캔버스 컴포넌트 기본 예시입니다.
    </div>
</div>

<!-- right offcanvas component -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasLabel">
    <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">
      안녕하세요. 화면의 우측에 위치한 오프캔버스 컴포넌트 기본 예시입니다.
    </div>
</div>

<!-- top offcanvas component -->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasLabel">
    <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">
      안녕하세요. 화면의 상단에 위치한 오프캔버스 컴포넌트 기본 예시입니다.
    </div>
</div>

<!-- bottom offcanvas component -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasLabel">
    <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">
      안녕하세요. 화면의 하단에 위치한 오프캔버스 컴포넌트 기본 예시입니다.
    </div>
</div>

오프캔버스의 위치별로 버튼과 컴포넌트를 만들어 줬습니다. 위의 기본 예시에서 id값과 offcanvas의 class 위치 값만 변경을 했습니다.

 

실행 결과

자바스크립트 offcanvas 위치별 컴포넌트 예시 화면

설정한 위치별로 컴포넌트가 깔끔하게 나온 모습입니다. 예제로 기능을 구현해보니 활용도가 굉장히 높아 보입니다. 

 

마무리

오늘 정리한 bootstrap의 Offcanvas의 사용 방법에 대한 내용을 정리해 봤는데요. 기능 구현도 간단하고 연동도 심플하고 괜찮은 것 같습니다! 저는 개인적으로 Offcanvas의 좌측과 우측 사이드에 배치하여 활용을 많이 하는 편입니다. 물론 사용자의 요청에 따라 다르긴 하겠지만 개인적으로 선호하는 위치입니다. 

요즘에는 bootstrap의 간단한 기능들을 하나씩 정리하면서 앞으로 어떤 상황에 활용하면 좋을지도 같이 정리를 하고 있습니다. bootstrap은 대중적으로 많이 사용하는 라이브러리인 만큼 활용도 높은 기능들을 많이 구현해 주기 때문에 최대한 활용해서 업무 역량을 늘려보는 것도 좋을 것 같습니다. :)

 

그럼 오늘도 저의 작고 소중한 글을 읽어주셔서 감사합니다.

 

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'javascript > javascript' 카테고리의 다른 글

자바스크립트 bootstrap5 carousel 기능 만들기 (캐러셀)  (0) 2023.02.03
자바스크립트 bootstrap5 아코디언 만들기 (accordion)  (0) 2023.02.03
자바스크립트 bootstrap 5 경고창 만들기  (0) 2023.02.01
자바스크립트 split 문자열 자르는 방법과 활용  (0) 2023.01.31
자바스크립트 isNaN 함수 기능 정리  (0) 2023.01.30

관련글

티스토리툴바