[JS] 서브메뉴를 만들자! classList 🗂 다루기

Nino_ 2022. 10. 4. 17:37

오늘은 버튼을 누르면 등장하는 서브메뉴를 만들고,

자바스크립트로 class를 탈부착하는 문법을 배워보자!

Bootstrap 설치하기

Bootstrap css 파일을 설치해놓으면

부트스트랩 홈페이지에 올라와 있는 버튼, 탭, 메뉴 같은걸 찾아서 복붙하면서 개발할 수 있다.

(직접 css 하나하나 안해도 됨ㅎ)

1. Bootstrap 홈페이지 접속
- get started를 눌러 설치 페이지로 이동한다

2. 다음과 같은 CDN 링크에 있는 url 을 복사하고, 아래 양식에 맞춰 작성한다.

- 주의: 버전이 5.X 이상인지 확인하기

- (강사님이 제공해주신 링크도 있긴 한데.. 언제나 가장 최신 버전을 유지하면 좋을 것 같아서 홈페이지에서 보는 방법으로 안내해드림)

<!-- css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>

3. 작성한 코드 중..

- css 파일은 <head> 태그 안에,

- js 파일은 <body> 태그 끝나기 전에 붙여넣기

그러면 설치 끝!

Navbar 를 만들어보자 🪄

이제 상단 메뉴(Navbar)부터 만들어보자
새로 익힐 만한 내용은 없어서 더 설명하지는 않고, 코드만 공유한다

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

그러면 이렇게 생긴 상단바가 완성된다

기본 모양은 라이브러리로 완성했으니 이제는 동작을 추가하면 된다

햄버거 메뉴를 누르면 등장하는 서브메뉴를 만들어보자

이전에 공부했던 대로, 모든 UI 는 아래와 같은 공식을 따른다

1. 미리 html css로 디자인 해놓고 숨김
2. 버튼누르면 보여줌 (혹은 반대로)

1️⃣ UI 디자인

우선 1번인 디자인부터 해보자

서브메뉴 디자인은 아래와 같이 진행했다 (Bootstrap 홈페이지 → list group 참고)

<!-- submenu -->

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

실행시키면.. 짠!

네비게이션 바 밑에 메뉴 리스트가 생성되었다

2️⃣ 동작 추가하기

다음은 2번 코스입니다 🍽

버튼을 누르면 리스트를 보여달라고 해보자 (그런데 이젠 class 탈부착을 곁들인..)

→ 왜? 나중에 display : block 말고 다른 스타일도 동시에 주고 싶을 경우 유용함

우선 css 파일에서 아래와 같이 작성해준다

1) 평소에는 .list-group 숨기기

2) .show (가 생기면) 보여주기

/* css */
.list-group {
  display : none
}
.show {
  display : block
}

다음으로는 버튼 누르면 list-group 에다가 show 클래스 부착하라고 코드 작성!

- addEventListener 작성까지는 동일하게 진행

- 다만 list-group 클래스를 클릭할 때 show 클래스를 탈부착할 것이기 때문에 아래와 같이 작성

- .classList.add('show') 라고 하면 클릭 시 show 라는 클래스를 추가해달라는 의미

- 여기서는 클래스 추가/제거 둘 다 하고 싶으니 add 대신 toggle 을 사용한다

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

더 배워보기: querySelector

getElementById(), getElementsByClassName() 과 같은 셀렉터 외에

더 유용하게 쓸 수 있는 것들이 있다

바로.. querySelector(), 혹은 querySelectorAll() 이라고 하는데..

쿼리셀렉터는 아래와 같이 작성한다

document.querySelector('.list-group')

이 셀렉터의 장점은 종류별(id / class)로 구분할 필요가 없고,

또 css 문법을 그대로 쓸 수 있어서 편리하다는 것이다

단....!

querySelector() 는

맨 위의 요소 한 개만 찾아준다

예를 들어 서브메뉴의 .list-group-item 을 찾아달라고 하면

가장 위에 있는 한 녀석(An item)만 찾아준다는 것이다

이때 원하는 녀석을 찾기 위해 필요한 것이 바로 querySelectorAll() 이다

querySelectorAll() 은 .list-group-item 에 해당하는 모든 요소를 다 찾아온다

그래서 이 친구도 getElementsByClassName 처럼 인덱싱이 필요하다. 대괄호 [ ] 사용할 것!

문제

지금까지 썼던 셀렉터 (getElementById, getElementsByClassName) 를

querySelector로 다 바꿔보자

풀이

- querySelector() 사용

<script>
   document.querySelector('.navbar-toggler').addEventListener('click', 
       function(){
              document.querySelector('.list-group').classList.toggle('show');
   });        
</script>

- querySelectorAll() 사용 (대괄호 [ ] 추가)

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

'Web > JavaScript' 카테고리의 다른 글

[JS] 폼 만들며 배워보는 if else 🧐 (1)	2022.10.19
[JS] 말로만 듣던 jQuery 👀 간단 정리 (1)	2022.10.05
[JS] 이벤트리스너: 들을게 👂 (2)	2022.10.04
[JS] function에 구멍을 뚫어보자 🔫 파라미터 (2)	2022.10.04
[JS] 생소했던 function 문법 🔨 이해하기 (0)	2022.09.28

Nino's DevLog