8. 웹사이트 내비게이션 및 이미지 슬라이드 구현 소개

내비게이션 기능 구현

e.preventDefault();  // 특정 기능 정지 메서드
xxx.querySelector("#intro"); // 1개의 태그를 css선택자 기반으로 가져옴
xxx.querySelectorAll(＂a＂); // 여러개 태그를 css선택자 기반으로 가져옴
xxx.getAttribute("href");    // 특정 태그가 갖고 있는 속성의 속성값을 가져옴

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

 

 

---

이미지 슬라이드

setInterval(function() {
    ...
}, 3000);   // 3초 간격으로 반복적 코드 실행
xxx.animate({ 
    marginLeft: ["0px", "1024px"]
}, {
    duration: 500,
    easing: "ease",
    iterations: 1,
    fill: "both"
}) // 애니메이션실행

 

 

xx.previousElementSibling;  // 이전 요소 선택
xxx.nextElementSibling;     // 다음 요소 선택
xxx.parentElement;        // 부모 요소 선택
xxx.firstElementChild;    // 첫번째 자식 요소 선택
xxx.lastElementChild;     // 마지막 자식 요소 선택

---

탭 버튼 기능 구현

xxx.classList.remove(클래스명) // 요소에서 특정 클래스 제거
xxx.classList.add(클래스명)    // 요소에 클래스명 추가
nodeList.forEach(function(item) { // 배열 모든 요소에 코드 적용
    console.log(item)
})