이번엔 부트스트랩을 사용해서 버튼 누르면 등장하는 서브메뉴를 만들어보겠습니다.
1. Bootstrap 설치
Bootstrap css 파일을 설치해놓으면 버튼, 탭, 메뉴 같은걸 복붙식으로 개발할 수 있습니다.
구글에 bootstrap검색해서 나오는 맨 처음 사이트에 들어가서 get started버튼 클릭
- 우선 우측 위에서 버전이 5.X 버전인지 확인한 후에
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>- css파일은 <head>태그 안에
- js파일은 <body>태그 끝나기 전에 붙여넣으면 설치 끝
2. Navbar 만들기
부트스트랩을 설치했으면 그 사이트에서 원하는 웹 ui를 검색해서 복붙하면 개발 끝임
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav> 
그럼 이제 버튼 누르면 등장하는 서브메뉴를 만들어 보겠습니다.
이런 UI는
1. 미리 html css로 디자인을 해놓고 숨김
2. 버튼누르면 보여줌
이렇게 개발할거라 미리 디자인을 먼저 해주도록 하겠습니다.
html 구현
디자인은 그냥 bootstarp홈페이지에서 list group찾아서 <nav>밑에 복붙함
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul> css 구현
~~~.style.display = 'block'이런식으로 짜도 되지만 class를 탈부착하는 식으로 해보려고 합니다.
.list-group {
display : none
}
.show {
display : block
}.list-group로 평소엔 숨겨두고
.show를 부착하면 보여주는 식으로 개발하려고 합니다.
이제 버튼 클릭 시 <ul class = "list-group">에 show라는 클래스를 부착하라고 코드짜면 서브메뉴 UI완성!
버튼 클릭 시 클래스 추가하기
add class
버튼 클릭 시 .show를 html요소에 붙여주겠습니다..
- class명을 원하는 요소에 추가하는 법은
셀렉터로찾은요소.classList.add('클래스명') - class명을 원하는 요소에서 제거하는 법은
셀렉터로찾은요소.classList.remove('클래스명')
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.add('show');
});▲ 이렇게 class="navbar-toggler"가진 요소를 클릭하면
class="list-group"인 요소에 show라는 클래스명을 추가하라고 코드를 짰습니다.
이제 버튼을 누르면 서브메뉴가 잘 보임
toggle class
버튼을 한 번 더 누르면 서브메뉴를 숨기고 싶은데
~~.classList.remove('클래스명')이렇게 해도 가능하겠지만 toggle을 사용해보도록 하겠음
document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
document.getElementsByClassName('list-group')[0].classList.toggle('show');.class.toggle()을 쓰면
- 클래스명이 있으면 제거
- 클래스명이 없으면 추가
그래서 왔다갔다하는 UI를 만들 때 유용하게 쓰일듯 합니다.
+) querySelector
getElementById(), etElementsByClassName() 이거 말고도 다른 방식으로 html 요소를 찾아주는 셀렉터도 있습니다.
<div class="test1">안녕하세요</div>
<div class="test1">안녕하세요</div>
<script>
document.querySelectorAll('.test1')[1].innerHTML = '안녕';
</script> querySelecotr()는 맨 위에 한개의 요소만 선택해줍니다.
그래서 위처럼 test1이라는 클래스가 여러개 중복으로 쓰였는데
x번째 요소를 선택하고 싶은 경우엔 querySelectorAll()을 쓰면 됩니다.
querySelectorAll()은 해당되는걸 모두 찾아 [ ]안에 담아주기 때문에 [숫자]를 뒤에 붙여 인덱싱해주어 원하는 위치에 있는 요소를 찾아 쓰면 됩니다.
