JavaScript_TIL_01[반응형 navbar 만들기]

'개인페이지 만들기#2 네비게이션바 만들기'에서 넘어옴

---

javscript code review

javascript

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
ㅤ
hamburger.addEventListener("click", mobileMenu);
ㅤ
function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}

• const hamburger = document.querySelector(".hamburger");
• const navMenu = document.querySelector(".nav-menu");

hamburger, navMenu라는 변수를 선언하여 document객체의 querySelector메소드로 hamburger, nav-menu 클래스의 특정 정보를 가져온다.

• hamburger.addEventListener("click", mobileMenu);

변수 hamburger에 addEventListener 메소드를 통해 클릭할 시, 모바일 메뉴 함수를 실행시킨다

function mobileMenu() {
    hamburger.classList.toggle("active");
    navMenu.classList.toggle("active");
}

모바일 메뉴 함수는 hamburger, navMenu의 클래스값이 있는지 체크하고 없으면 더하고 있으면 제거한다. 고로 마치 on/off 스위치 같은 개념이다.

---

classList에 대한 짧은 이해

• element.classList의 반환형은 DOMTokenList이다.

  DomTokenList는 '공백으로 구분된 문자열로 표현된 데이터를 정렬하여 토큰 집합으로 만들어 집합을 조작하기 위한 메소드를 제공하는 유사배열 인터페이스'라고 한다. DomTokenList에는 add, remove와 같은 메소드도 존재한다.

• Element.classList.add : 명시된 클래스를 추가한다
• Element.classList.remove : 명시된 클래스를 제거한다

위 메소드는 버튼을 통해 변화를 주거나 제거하는 형식으로 사용가능하다. 사용하기에는 다른 메소드보다 Element.classList.toggle()이 실행과 복귀를 간단하게 적용할 수 있어 편리하다.