부트스트랩에서 접이식 목록 그룹(Collapsible List Group)을 만들려면 panel-collapse 속성과 list-group 속성을 함께 사용하면 됩니다. 이 조합을 활용하면 클릭 시 목록이 펼쳐지거나 접히는 인터랙티브한 UI를 손쉽게 구현할 수 있습니다.
예제
목록 항목은 list-group 클래스로 감싸고, 각 항목은 list-group-item 클래스를 사용해 표시합니다. 아래 예제는 패널 헤더의 링크를 클릭하면 기술 목록이 펼쳐지는 구조입니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "container"> <h2>질문 / 답변</h2> <p>아래를 클릭하여 면접 질문을 제공하는 기술들을 확인해 보세요.</p> <div class = "panel-group"> <div class = "panel panel-default"> <div class = "panel-heading"> <h4 class = "panel-title"> <a data-toggle = "collapse" href = "#test">정보 보기</a> </h4> </div> <div id = "test" class="panel-collapse collapse"> <ul class = "list-group"> <li class = "list-group-item">Java</li> <li class = "list-group-item">PHP</li> <li class = "list-group-item">C++</li> <li class =" list-group-item">HTML5</li> <li class =" list-group-item">jQuery</li> </ul> </div> </div> </div> </div> </body> </html>
코드 설명
위 예제의 핵심 구조는 다음과 같습니다.
- panel-group: 여러 개의 패널을 묶어주는 컨테이너 역할을 합니다.
- panel panel-default: 기본 스타일이 적용된 패널을 생성합니다.
- panel-heading과 panel-title: 패널의 제목 영역을 구성하며, 이곳의 링크가 토글 버튼 역할을 합니다.
- data-toggle = "collapse": 클릭 시 해당 요소의 펼침/접힘 동작을 활성화합니다.
- panel-collapse collapse: 실제로 접혔다가 펼쳐지는 콘텐츠 영역입니다. 처음에는 숨겨져 있다가 링크를 클릭하면 나타납니다.
이처럼 부트스트랩의 접이식 컴포넌트와 목록 그룹을 결합하면 FAQ, 메뉴, 카테고리 목록 등 다양한 UI를 간단한 마크업만으로 완성할 수 있습니다.