JS - 서브메뉴 만들어보기, classList 다루기

이거 만들기

Bootstrap 사용하기

https://velog.io/@x5foddl/HTMLCSS-중급-Bootstrap-설치와-사용법

Navbar 만들기

bootstrap을 설치했다면
그 사이트에서 원하는 웹 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> 

상단바 제작 끝!

-> 서브메뉴 만들기

1. 미리 html css로 디자인 해놓고 숨기든가 하기
2. 버튼누르면 보여줌

Bootstrap 홈페이지에서 list group 찾아서 복붙하기

<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> 

서브메뉴 html css 디자인 완성!

class 탈부착하기

어쩌구.style.display = 'block'
이전에는 이렇게 했지만 이번엔 class 탈부착 해보기

.list-group {
  display : none
}
.show {
  display : block
}

css 파일을 열어 평소에는 .list-group 요소 숨겨놓기
그리고 여기에 show 라는 클래스를 부착하여 보여주는 식으로 개발해보자

버튼을 누르면 <ul class="list-group"> 에다가 show 라는 클래스를 부착하라는 코드 짜기

버튼 클릭 시 클래스명 추가하기

• 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라는 클래스명을 추가해라

버튼 한 번 더 누르면 숨기기

나중에 if문, 변수문법을 배우면 직접 만들 수 있지만 아직 배우기 전이기 때문에 쉬운 방법!

document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function(){
  document.getElementsByClassName('list-group')[0].classList.toggle('show');
});

.classList.toggle() 쓰면
클래스명이 있으면 제거하고 클래스명이 없으면 붙여준다

querySelector

<div class="test1">안녕하세요</div>
<div id="test2">안녕하세요</div>

<script>
  document.querySelector('.test1').innerHTML = '안녕';
  document.querySelector('#test2').innerHTML = '안녕';
</script>

querySelector() 안에는 css 셀렉터 문법 사용이 가능하다
다만 맨 위의 한 개 요소만 선택해준다

<div class="test1">안녕하세요</div>
<div class="test1">안녕하세요</div>

<script>
  document.querySelectorAll('.test1')[1].innerHTML = '안녕';
</script>

-> test1 이라는 클래스가 중복으로 여러 개 있는데 X번째 요소를 선택하고 싶은 경우에는 querySelectorAll() 사용하기