크로켓페이지만들기

네비게이션 기능 만들기

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

// 1) Scroll Navigation
var aTags = document.querySelectorAll('header a');
for (var i = 0; i < aTags.length; i++) {
  aTags[i].onclick = function (e) {
    e.preventDefault();
    var target = document.querySelector(this.getAttribute('href'));
    window.scrollTo({
      behavior: 'smooth',
      top: target.offsetTop,
    });
  };
}

이미지 슬라이더 만들기

이미지 슬라이더란 일정 시간을 기준으로 자동으로 이미지가 한장씩 교체되는 기능을 말합니다.

setInterval() : 일정 시간마다 반복적으로 코드를 실행하고자 할 때 사용됩니다.
querySelector() : 선택된 요소의 자식 요소 1개를 찾을 때 사용됩니다.
querySelectorAll() : 선택된 요소의 자식 요소 여러 개를 찾을 때 사용됩니다.
animate(): 선택된 요소에 애니메이션을 적용할 때 사용합니다. 넘어가는걸 이 함수로 구현합니다.

animate 함수 사용방법

slide.animate({
    marginLeft: ["0px", "1024px"]
}, {
    duration: 500,
    easing: "ease",
    iterations: 1,
    fill: "both"
});

탭만들기

탭 버튼 기능을 구현하기 위해서는 다음 요소가 어떠한 기능을 담당하는지 숙지해야 합니다.

xxx.classList.remove() : 선택된 태그의 특정 클래스 명을 제거합니다.
xxx.classList.add() : 선택된 태그의 특정 클래스 명을 추가합니다.
xxx.forEach(function(item){}): 선택된 여러 개의 태그에 특정 코드를 각각 실행시켜줍니다.

이미지 슬라이더 만들기2

화살표 버튼 클릭 시 Fade 효과가 적용된 이미지 슬라이드(2) 기능을 구현해 봅시다.

이미지 슬라이드(2) 기능을 구현하기 위해서는 다음 요소가 어떠한 기능을 담당하는지 숙지해야 합니다.

xxx.previousElementSibling : 이전 요소를 선택합니다.
xxx.nextElementSibling : 다음 요소를 선택합니다.
xxx.parentElement() : 부모 요소를 선택합니다.
xxx.firstElementChild() : 첫번째 자식 요소를 선택합니다.
xxx.lastElementChild() : 마지막 자식 요소를 선택합니다.