Bootstrap - 접叠: 초보자를 위한 종합 가이드

안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 Bootstrap의 가장 유용한 컴포넌트 중 하나인 접叠(Collapse)에 대해 깊이 알아보겠습니다. 이를 통해 웹 페이지에서 마법 같은 효과를 경험할 수 있습니다 - 이제 보이고, 이제 안 보이게! 함께 흥미로운 여정을 시작해보겠습니다.

Bootstrap 접叠은 무엇인가요?

코드로 뛰어들기 전에 접叠에 대해 이해해 보겠습니다. 웹사이트에 긴 기사가 있지만, 방문자를 과도하게 정보로 압도시키고 싶지 않다면 어떻게 하나요? 이때 접叠이 구원자가 됩니다! 접叠을 사용하면 간단한 클릭으로 내용을 숨기고 보이게 할 수 있어, 웹 페이지를 더욱 상호작용적이고 사용자 친화적으로 만들 수 있습니다.

기본 예제

먼저 기본 예제를 통해 발자국을 젖히보겠습니다.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
비밀을 밝히려면 클릭하세요!
</a>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
비밀은... Bootstrap을 배우는 당신이 대단해라는 것입니다!
</div>
</div>

이를 해부해 보면:

1. 접叠을 트리거하는 버튼(링크로 스타일 지정됨)이 있습니다.
2. data-bs-toggle="collapse" 속성은 이 요소가 접叠 영역을 제어한다고 Bootstrap에 알립니다.
3. href="#collapseExample"는 접叠 내용의 ID를 가리킵니다.
4. 접叠 내용은 collapse 클래스와 일치하는 ID를 가진 div로 감싸져 있습니다.

버튼을 클릭하면, Bootstrap의 JavaScript 마법이 일어나고, 바로! 내용이 나타나거나 사라집니다.

가로 접叠

이제 가로 접叠으로 독특한 효과를 더해보겠습니다. 내용이 가로로 숨겨지고 나타나는 것은 마치 가로로 숨고seek하는 것처럼입니다!

<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
가로 접叠 토글
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
이는 가로 접叠에 대한 일부 占位内容입니다. 기본적으로 숨겨져 있으며 트리거될 때 나타납니다.
</div>
</div>
</div>

여기서의 주요 차이는 다음과 같습니다:

1. collapse-horizontal 클래스와 함께 collapse 클래스를 사용하고 있습니다.
2. 접叠 내용에 특정 너비를 설정했습니다.
3. min-height를 가진 외부 div는 접叠이 토글될 때 다른 요소들이 이동하지 않도록 합니다.

여러 토글과 타겟

이제 여러 접叠 요소의 합奏을 만들어보겠습니다! 여러 버튼이 다른(또는 같은) 접叠 영역을 제어할 수 있습니다.

<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">첫 번째 요소 토글</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">두 번째 요소 토글</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">둘 다 토글</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
이 다중 접叠 예제의 첫 번째 접叠 컴포넌트에 대한 일부 占位内容입니다.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
이 다중 접叠 예제의 두 번째 접叠 컴포넌트에 대한 일부 占位内容입니다.
</div>
</div>
</div>
</div>

이 happening는 다음과 같습니다:

1. 세 개의 버튼이 있습니다: 두 개는 개별 접叠을 제어하며, 하나는 둘 다 제어합니다.
2. 세 번째 버튼은 .multi-collapse를 사용하여 두 개의 접叠 영역을 타겟으로 합니다.
3. 각 접叠 영역은 고유한 ID와 multi-collapse 클래스를 가집니다.

접근성

책임 있는 개발자로서 우리는 웹사이트가 모든 사람에게 접근 가능하도록 해야 합니다. Bootstrap의 접叠 컴포넌트는 내장된 접근성 기능을 제공하지만, 이를 더욱 향상시킬 수 있습니다:

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#accessibleCollapse" aria-expanded="false" aria-controls="accessibleCollapse">
접근성 있는 접叠 버튼
</button>

<div class="collapse" id="accessibleCollapse">
<div class="card card-body">
이 내용은 숨겨져 있지만 스크린 리더에 의해 접근할 수 있습니다.
</div>
</div>

주요 접근성 기능은 다음과 같습니다:

1. aria-expanded 속성은 스크린 리더에게 접叠 내용이 현재 보이는지 여부를 알립니다.
2. aria-controls 속성은 버튼과 접叠 내용을 연결합니다.

메서드 표

JavaScript에서 사용할 수 있는 접叠 메서드의 편리한 표를 제공합니다:

메서드	설명
collapse('toggle')	접叠 요소를 토글합니다
collapse('show')	접叠 요소를 보여줍니다
collapse('hide')	접叠 요소를 숨깁니다
collapse('dispose')	요소의 접叠을 파괴합니다

이 메서드를 사용하려면 다음과 같이 합니다:

var myCollapsible = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapsible, {
toggle: false
})
bsCollapse.show()

이제, 여러분은 Bootstrap 접叠의 예술을 습득했습니다! 연습이 완벽을 만들어라는 말을 기억하십시오, 그러니 이 예제들을 실험해 보지 마세요. 언제 그랬는지 모르겠지만, 당신의 웹 페이지가 접히고 펼쳐지며, 토글이 항상 반응적일 것입니다!

행복한 코딩을 기원하며, 여러분의 접叠이 항상 부드럽고 토글이 항상 반응적이기를 바랍니다!

Credits: Image by storyset