부트스트랩 - 오프캔버스: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩의 오프캔버스 컴포넌트의 fascinierende 세계로 뛰어들어 보겠습니다. 새로운 것에 대한 걱정은 하지 마세요 - 저는 여러분의 친절한 가이드가 될 것이며, 이 주제를 함께 단계별로 탐구해 나갈 것입니다. 그러니 좋아하는 음료를 한 잔 챙겨서 편안하게 앉아, 이 흥미로운 여정을 시작해 보세요!

개요

우선, 오프캔버스는 정확히 무엇인가요? 작은 아파트에 살아 더 많은 저장 공간이 필요할 때, 갑자기 벽에서 숨겨진 공간이 슬라이드로 나오는 상상을 해보세요 - 그게 바로 웹 디자인에서의 오프캔버스입니다! 네비게이션, 폼 또는 필요할 때까지 숨겨둘 수 있는 다른 어떤 콘텐츠를 제공하는 사이드바입니다.

오프캔버스 컴포넌트

시작하기 전에 오프캔버스의 주요 부분을 나누어 보겠습니다:

1. 트리거: 일반적으로 오프캔버스를 표시하는 버튼입니다.
2. 오프캔버스 자체: 표시되는 패널입니다.
3. 배경: 오프캔버스가 열려 있을 때 주 콘텐츠를 어둡게 만드는 선택 사항의 오버레이입니다.

이제 이 컴포넌트들이 코드에서 어떻게 결합되는지 보겠습니다!

라이브 데모

여기 간단한 예제를 통해 시작해 보겠습니다:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demoOffcanvas">
오프캔버스 열기
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="demoOffcanvas">
<div class="offcanvas-header">
<h5 class="offcanvas-title">오프캔버스 제목</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="닫기"></button>
</div>
<div class="offcanvas-body">
<p>이것은 오프캔버스 콘텐츠입니다. 원하는 것을 마음대로 넣을 수 있습니다!</p>
</div>
</div>

이를 나누어 설명해 보겠습니다:

1. 버튼에는 data-bs-toggle="offcanvas"를 추가하여 부트스트랩에게 이 버튼이 오프캔버스 트리거임을 알립니다.
2. data-bs-target="#demoOffcanvas"는 버튼을 해당 ID와 일치하는 오프캔버스에 연결합니다.
3. 오프캔버스 자체는 div에 offcanvas 클래스를 가집니다.
4. offcanvas-start는 왼쪽에 위치시킵니다 (다른 위치를 탐구해 보겠습니다).
5. 헤더에는 제목과 닫기 버튼이 포함됩니다.
6. 본문은 주요 콘텐츠가 들어갑니다.

본문 스크롤링

기본적으로 오프캔버스가 열려 있을 때, 그 뒤의 본문은 스크롤할 수 없습니다. 하지만 스크롤을 허용하고 싶다면? 간단합니다! 오프캔버스 div에 data-bs-scroll="true"를 추가합니다:

<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="scrollableOffcanvas">
<!-- 오프캔버스 콘텐츠 -->
</div>

본문 스크롤링 및 배경

스크롤을 허용하면서도 멋진 배경을 유지하고 싶다면, data-bs-backdrop="false"와 함께 data-bs-scroll="true"를 추가합니다:

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="scrollableBackdropOffcanvas">
<!-- 오프캔버스 콘텐츠 -->
</div>

정적 배경

오프캔버스가 명시적으로 닫히지 않는 한 열려 있게 하고 싶다면, data-bs-backdrop="static"를 사용합니다:

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdropOffcanvas">
<!-- 오프캔버스 콘텐츠 -->
</div>

다크 오프캔버스

좀 더 고딕한 느낌을 원하신다면, 오프캔버스를 다크하게 만들어 보세요! text-bg-dark 클래스를 추가합니다:

<div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="darkOffcanvas">
<!-- 오프캔버스 콘텐츠 -->
</div>

반응형

여기 멋진 트릭이 하나 있습니다 - 오프캔버스를 반응형으로 만들 수 있습니다! 작은 화면에서는 오프캔버스로, 큰 화면에서는 인라인 콘텐츠로 표시할 수 있습니다. .offcanvas-{breakpoint} 클래스를 사용합니다:

<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="responsiveOffcanvas">
<!-- 오프캔버스 콘텐츠 -->
</div>

이 오프캔버스는 'lg' 브레이크포인트보다 큰 화면에서는 인라인으로, 작은 화면에서는 오프캔버스로 표시됩니다.

위치

이전에 위치를 변경할 수 있다고 언급했던 것을 기억하시나요? 이렇게 할 수 있습니다:

클래스	위치
offcanvas-start	왼쪽
offcanvas-end	오른쪽
offcanvas-top	상단
offcanvas-bottom	하단

예를 들어, 오프캔버스를 오른쪽에 배치하려면:

<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas">
<!-- 오프캔버스 콘텐츠 -->
</div>

접근성

마지막으로, 모든 사용자에게 접근성을 제공하는 것에 대해 이야기해 보겠습니다:

1. aria-labelledby를 사용하여 오프캔버스를 제목과 연결합니다:

<div class="offcanvas offcanvas-start" tabindex="-1" id="accessibleOffcanvas" aria-labelledby="offcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">접근성 있는 오프캔버스</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="닫기"></button>
</div>
<!-- 오프캔버스 콘텐츠 -->
</div>

2. 트리거 버튼에 aria-controls를 사용합니다:

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#accessibleOffcanvas" aria-controls="accessibleOffcanvas">
접근성 있는 오프캔버스 열기
</button>

이제 여러분은 오프캔버스 전문가입니다. 연습이 완벽을 만들어 준다는 것을 기억하고, 프로젝트에서 이 컴포넌트를 실험해 보지 마세요. 누가 알겠는가? 여러분이 다음 큰 슬라이딩 감각을 창출할 수도 있습니다!

快乐的编程 되세요, 여러분의 오프캔버스 항상 부드럽게 슬라이드되길 바랍니다!

Credits: Image by storyset