[JS] Dom, Event

1. 네비게이션 기능 구현해보기

메뉴의 a 링크 클릭 시 설정된 href 링크로 스크롤되면서 이동되는 기능을 구현해보자

• querySelector : 1개의 태그를 css 선택자를 기반으로 가져옵니다.
• querySelectorAll : 여러 개의 태그를 css 선택자를 기반으로 가져옵니다.
• preventDefault() : 현재 이벤트의 기본 동작을 중지시킬 때 사용됩니다.
• getAttribute : HTML 태그의 속성값을 가져올 때 사용합니다.
• window.scrollTo({}) : 원하는 위치로 스크롤 이동을 시킬 때 사용됩니다.
• offsetTop : 선택된 영역의 상단까지의 거리를 절대 좌표로 반환합니다.

// 모든 a태그를 가져온다
var aTags = document.querySelectorAll("a");

for (var i = 0; i < aTags.length; i++) {
  aTags[i].onclick = function (e) {
    // 기존 a태그에 저장된 href로 이동하는 기능을 막아줌 
    // : 우리는 smooth하게 이동할 기능을 추가할거니까
    e.preventDefault();
    // onclick된 a태그(this)의 href로 지정된 것을 가져옴(여기서는 이동될 section의 id값)
    var target = document.querySelector(this.getAttribute("href"));
    // 이동될 section의 y좌표로 a태그가 클릭될 때 smooth하게 스크롤하여 이동된다!
    window.scrollTo({
      behavior: "smooth",
      top: target.offsetTop,
    });
  };
}

---

1. 반복문으로 모든 a태그(메뉴바)들에 적용한다.

for (var i = 0; i < aTags.length; i++) {
  aTags[i].onclick = function (e) {
    e.preventDefault();
    ...

• a 태그마다 onclick 이벤트를 적용
• e.preventDefault() : 기존 a태그의 기능 대신, 해당 section으로 스크롤할 기능을 사용할 예정이기 때문에 사용

 

2. window.scrollTo() : 문서의 원하는 지점까지 스크롤하는 함수

    ...
    var target = document.querySelector(this.getAttribute("href"));
    window.scrollTo({
      behavior: "smooth",
      top: target.offsetTop,
    });

• options
  • top : 창 또는 요소를 스크롤할 y축의 px 수
  • left : 창 또는 요소를 스크롤할 x축의 px 수
  • behavior
    • smooth: 스크롤이 부드럽게 움직입니다.
    • instant: 스크롤이 단번에 즉시 적용됩니다.
• onclick 이벤트가 발생한 a 태그(this)의 href 링크를 스크롤 지점으로 이동한다.

 

2. Javascript에서 태그 생성하기

createElement를 이용해 요소를 반환하는 변수를 만들 수 있습니다.

<li> 태그를 생성하고 textContent로 해당 요소의 텍스트를 채워줍니다.

let li = document.createElement("li");
li.textContent= "Home";

• li 변수에 저장된 값 : <li>Home</li>

---

2024.01.03 Elice week - 02

강의 링크: <https://swtrack.elice.io/courses/85064/lectures/669207/lecturepages/7428606/>