classList

<과제> 버튼누르면 등장하는 서브메뉴를 만들며, 자바스크립트로 class 탈부착하는 문법을 배워봅시다.

0. 부트스트랩 사용

*우측상단에 버전확인(https://getbootstrap.com/docs/5.3/getting-started/introduction/)

방법1)

<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 파일은 태그 안에,
js 파일은 태그 끝나기 전에 붙여넣으면 설치 끝

방법2)
그래도 모르겠거나 작동이 안되면, starter template 를 html 파일에 내용복붙! 복붙했다면 내가 만들었던 main.css 파일도 태그로 넣자!

---

1. navbar 만들기

main navbar 코드

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

서브메뉴 코드

  <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 코드 *css파일은 하단에 적을 수록 우선 적용

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

---

UI만드는 방법은 늘!

1. 미리 HTML/CSS 디자인 만들고 숨겨놓든가~
2. 버튼 누르면 보여줌!

하지만 이번에는 class 탈부착식으로 만들어보자!

• 이유: 나중에 display : block 말고 다른 스타일도 동시에 주고 싶을 경우 유용하기 때문
• 장점: 애니메이션 추가 쉬움, 재사용 편리

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

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

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

---

버튼을 한 번 더 누르면 숨기기

• 쉬운방법: toggle
  .classList.toggle() 쓰면 클래스명이 있으면 제거하고 클래스명이 없으면 추가해준다.

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

---

querySelector

getElementById(), getElementsByClassName()
이거 말고도 다른 방식으로 html 요소를 찾아주는 셀렉터가 있다. querySelector인데 이거 쓰면 css 잘하는 분들은 편리하게 사용 가능하다고 한다!

• 다만 querySelector() 는 맨 위의 한개 요소만 선택함.
• 여러개일 경우, querySelectorAll()!
  그리고 [인덱싱] 를 뒤에 붙여서 원하는 위치에 있는 요소 찾아쓰면 된다.

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

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

---

(만든 서브메뉴 이미지)