간단한 navbar와 카테고리가 있다.
navbar는 bootstrap으로 만들었다.
<body>
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-auto align-self-center">
</div>
<div class="col">
<a class="navbar-brand" href="#">Example.net</a>
</div>
</div>
</div>
</nav>
<div class="row" id="navbarToggleExternalContent">
<div class="w-50 col-6" style="outline: auto; text-align: left; padding: 10px;">
<h2>카테고리1</h2>
<h4>음료</h4>
<h4>과자</h4>
<h4>라면</h4>
</div>
<div class="w-50 col-6" style="outline: auto; text-align: left; padding: 10px;">
<h2>카테고리2</h2>
<h4>음료</h4>
<h4>과자</h4>
<h4>라면</h4>
</div>
<div></div>
</div>카테고리가 있으면 편하지만. 평소에 숨겨놨다가 필요할때만 보여주고 싶다. 수많은 쇼핑몰에서 사용하는 방법이다.
SGG.COM 사이트를 보자, 평상시에는 카테고리가 숨겨져 있다가 마우스를 올려놓으면 카테고리가 펼쳐지게된다.
이러한 기능은 Bootstrap으로 간단하게 만들 수 있다.
우선 카테고리 div class에 collpase를 추가하자, 이러면 사이트에 접속했을때 카테고리가 숨겨진 상태가 된다.
<div class="collapse row" id="navbarToggleExternalContent">
<div class="w-50 col-6" style="outline: auto; text-align: left; padding: 10px;">
<h2>카테고리1</h2>
<h4>음료</h4>
<h4>과자</h4>
<h4>라면</h4>
</div>
<div class="w-50 col-6" style="outline: auto; text-align: left; padding: 10px;">
<h2>카테고리2</h2>
<h4>음료</h4>
<h4>과자</h4>
<h4>라면</h4>
</div>
<div></div>
</div>그다음 버튼을 만들어줄건데 버튼에 들어가야할 두가지 중요한 속성이 있다.
- data-bs-toggle="collapse"
bootstrap에서 collapse 항목을 제어하기 위한 요소이다. 토글방식(열기 닫기)으로 해당 요소를 제어한다.
2.data-bs-target="#제어할 요소 id"
토글방식으로 제어할 target의 id를 지정해줘야 한다.
이두가지항목을 추가하면 버튼으로 요소를 토글방식으로 제어할 수 있다.
<body>
<nav class="navbar bg-body-tertiary">
<div class="container-fluid">
<!-- 좌측 정렬을 위해 row와 col 추가 -->
<div class="row align-items-center">
<div class="col-auto align-self-center"> <!-- align-self-center를 사용하여 내부 요소의 수직 정렬 설정 -->
<!-- 토글 버튼 추가 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarToggleExternalContent" aria-expanded="false"
aria-controls="navbarToggleExternalContent">
<!-- 토글 버튼 이미지 -->
<span class="navbar-toggler-icon"></span>
</button>
<span class="align-middle">카테고리</span> <!-- align-middle를 사용하여 텍스트 수직 정렬 -->
</div>
<div class="col">
<a class="navbar-brand" href="#">Example.net</a>
</div>
</div>
</div>
</nav>
<div class="collapse row" id="navbarToggleExternalContent">
<div class="w-50 col-6" style="outline: auto; text-align: left; padding: 10px;">
<h2>카테고리1</h2>
<h4>음료</h4>
<h4>과자</h4>
<h4>라면</h4>
</div>
<div class="w-50 col-6" style="outline: auto; text-align: left; padding: 10px;">
<h2>카테고리2</h2>
<h4>음료</h4>
<h4>과자</h4>
<h4>라면</h4>
</div>
<div></div>
</div>실제 작동하는 사이트화면을 보자
먼저 버튼을 누르기전 화면이다. 요소가 숨겨져있다.
F12를 눌러 Element를 확인해보자
div가 collapse 상태인걸 확인할 수 있다.
다음은 버튼을 누른후 화면이다. 숨겨진 요소가 보여진다.
Element를 확인해 보면 div에 show class가 붙었다. 이로인해 숨겨진 요소가 보여지게 되는것이다.
이로써 bootstrap으로 간단하게 숨겨진 요소를 만들어 버튼으로 제어하는 방법을 알아보았다.
소개입니다.