📒 내비게이션 기능 구현

---

🟣 내비게이션 구성

---

🟣 내비게이션 기능

e.preventDefault(); // 특정 기능 정지 메서드

xxx.querySelector("#intro"); // 1개의 태그를 css 선택자 기반으로 가져온다.

xxx.querySelectorAll("a"); // 여러 개의 태그를 css 선택자 기반으로 가져온다

xxx.getAttribute("href"); // 특정 태그가 갖고 있는 속성의 속성값을 가져온다.

window.scrollTo({
    //특정 지점으로 스크롤링
    behavior: "smooth", // 부드럽게 이동
    top: xxx.offsetTop, // 특정 영역의 위에서의 좌표값
});

🔸 실습 코드

📌 지시사항

1. index.html 과 index.css 파일을 분석해보고 index.js 파일을 열어 아래 기능을 구현
   
   
2. 먼저 메뉴 버튼 클릭 시 해당 태그의 <a> 가 갖고 있는 본래의 기능을 정지
   
   
3. 메뉴 버튼 클릭시 이동할 각 섹션의 절대 좌표를 가져오기
   
   
4. 애니메이션 이벤트를 사용하여 부드럽게 이동하는 효과를 구현