본 자료는 박규하 코치님과 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

네비게이션 기능

• 버튼을 누르면 해당 위치로 이동하는 기능

e.preventDefault();

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

이미지 슬라이드 - 시간

• 이미지가 부드럽게 슬라이드로 변경하는 기능

setInterval ( function () {
    ...
}, 3000);    # 3초 간격으로 반복적으로 코드 실행(3000ms = 3s)

xxx.animate({
    marginLeft: ["opx", "1024px"]    # opx에서 1024px로
}, {
    duration: 500,
    easing: "ease",
    iterations: 1,
    fill: "both"
})    # 애니메이션 실행

이미지 슬라이드 - 클릭

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

탭버튼 기능 구현

• 탭을 누르면 탭 이름에 맞는 내용 출력

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