querySelector,addEventListenr로 패널 활성화 시키기 (6)

querySelector,addEventListenr로 패널 활성화 시키기 (6) — #querySelector #querySelectorAll 웹사이트 디자인 소개 및 학습목표 MASK이미지 모션을 활용하여 ...

#MASK#Naver Blog

#querySelector #querySelectorAll

웹사이트 디자인 소개 및 학습목표

MASK이미지 모션을 활용하여 회사 소개 페이지 만들기

mask모션을 활용하여 웹사이트를 제작해봅니다. 본글은 패스트 캠퍼스 "최성일"강사님의 강의를 요약한 내용입니다.

이전글을 차례대로 보고 오셔야 이해가 빠릅니다

사용하는 언어

JS

DOM요소 찾기

const wrap = document.querySelector('main');const panels = wrap.querySelectorAll('section article');const btns = wrap. querySelectorAll('#navi li');	wrapmain 전채영역panelssection article //video, .slogan이 들어있는 전체패널btnsul.#navi li //클릭시 활성화되는 버튼

click이벤트

btns.forEach((btn,index)=>{ btn.addEventListener('click', e=>{ btns\[index\].classList.add('on'); panels\[index\].classList.add('on'); })})	forEach배열의 반복문 //forEach(요소,순번)addEventListener('click',e=>{})btn=배열 클릭시 이벤트발생classList클릭하는 요소(btns,panels)의 순번에 클래스를 on부여

btns.forEach((btn,index)=>{ for(i=0 ; i<btns.length; i++){ btns\[i\].classList.remove('on'); panels\[i\].classList.remove('on'); }})	classList.removefor 반복문을 활용하여 패널과 버튼의 class에 on을 제거해준다.for반복문이 계속돌면서 class="on"을 찾고 삭제할 것

class="on"제거

btns.forEach((btn,index)=>{ for(i=0 ; i<btns.length; i++){ btns\[i\].classList.remove('on'); panels\[i\].classList.remove('on'); }})	classList.removefor 반복문을 활용하여 패널과 버튼의 class에 on을 제거해준다.for반복문이 계속돌면서 class="on"을 찾고 삭제할 것이렇게 해줘야 현재 패널만 "on"클래스 부여가능

복습

짚어갈 포인트

이미 예전에 다뤘던 내용이 많아 생략한 부분이 많습니다.. MUSIC PLAYER, SVG UI 보고오면 더 이해가 빠를 것입니다.