DOM API 홈페이지

DOM API 만으로 홈페이지의 흔한 동작을 만든 예제다. 주제는 "하트여왕 크로켓경기".

1. 스크롤 내비게이션: 상단 메뉴를 누르면 scrollTo({ behavior: 'smooth' }) 로 해당 섹션까지 내려간다.
2. 자동 이미지 슬라이더: setInterval 과 Element.animate() 로 슬라이드가 왼쪽으로 넘어간다. 마지막엔 첫 장을 한 번 더 둬 이어지는 것처럼 보인다.
3. 탭: 탭을 누르면 active 클래스를 옮겨 내용이 바뀐다.
4. 클릭 슬라이더: 화살표로 사진을 앞뒤로 넘긴다.

플레이그라운드에서 바뀐 것

원본 저장소에 사진 파일(img/*.jpg, 화살표 PNG)이 커밋되어 있지 않았다. 같은 크기의 SVG 자리 그림을 만들어 넣고 참조 확장자만 바꿨다. 동작은 그대로다.