서브메뉴, classList 다루기

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 찾아서 <nav>밑에 복붙해도 된다.

class 탈부착식으로 UI 보여주고 숨기기

버튼 누르면 서브메뉴 보여달라고 코드짜려면

어쩌구.style.display = 'block'

이렇게 해도 되겠지만 이번엔 class 탈부착식으로 구현본다면??

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

css 파일에 평소에 .list-group 붙은 요소는 숨겨놓고 거기에 show라는 클래스를 부착하면 보여주는 식으로 개발해보는 방법

이제 버튼누르면 <ul class="list-group"> 에다가 show라는 클래스 부착하라고 코드짜면 서브메뉴 UI 완성

class부착식으로 하는 이유는 나중에 display : block 말고 다른 스타일도 동시에 주고 싶을 경우, 애니메이션 추가가 쉽고, 재사용할때 편리해서 그렇다.

버튼 클릭시 저기에 클래스명을 추가해서 메뉴 보여주어라-

class명을 원하는 요소에 추가하는 법은 셀렉터로찾은요소.classList.add('클래스명')

class명을 원하는 요소에서 제거하는 법은 셀렉터로찾은요소.classList.remove('클래스명')

모르면 당연히 구글 검색해보자!!

<script>
  document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function () {
   document.getElementsByClassName('list-group')[0].classList.add('show');
      });
</script>

class="navbar-toggler" 가진 요소 클릭하면
class="list-group"인 요소에 show라는 클래스명 추가하라고 코드를 짜보면
버튼눌렀을때 서브메뉴가 나온다.

버튼 한 번 더 누르면 숨기기

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

함수 중 .add였던 부분을 .toggle로 바꿔주면 해결

classList.toggle() 쓰면

• 클래스명이 있으면 제거하고, 클래스명이 없으면 붙여준다.

그래서 왔다갔다하는 UI 만들 때 유용하게 쓰면 된다.

querySelector

getElementById()

getElementsByClassName()

이거 말고도 다른 방식으로 html 요소를 찾아주는 셀렉터이다.

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

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

querySelector() 안에는 css 셀렉터 문법 사용가능하다.
(css에서 마침표는 class라는 뜻이고 #은 id라는 뜻임)

다만 querySelector() 는 맨 위의 한개 요소만 선택해준다.

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

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

그래서 위처럼 test1이라는 클래스가 중복으로 여러개 있는데 X번째 요소를 선택하고 싶은 경우엔 querySelectorAll() 쓰면 된다.

querySelectorAll() 은 해당하는걸 다 찾아서 [ ] 안에 담아주기 때문에
[숫자] 를 뒤에 붙여서 원하는 위치에 있는 요소 찾아쓸 수 있다.