study 코딩하자

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect05.html function scroll(){//함수 scroll 실행 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; //변수 scrollTop에 브라우저의 pageYOffset값 또는 html의 scrollTop값 또는 브라우저의 screenY값 저장 document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);//클래스 scrollTop의 span태그에 Math.round(scroll..

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect04.html function scroll(){//함수 scroll선언 let scrollTop = window.screenY || window.pageYOffset || document.documentElement.scrollTop; //변수 scrollTop에 브라우저의 pageYOffset값 또는 html의 scrollTop값 또는 브라우저의 screenY값 저장 document.querySelector(".scrollTop span").innerText = Math.round(scrollTop);//클래스 scrollTop의 span태그에 Math.round(scrollT..

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect03.html document.querySelectorAll("#parallax__nav li a").forEach(li => {//아이디 parallax__dot의 a태그들을 선택해 element값을 li에 저장 li.addEventListener("click", (e) => {//li를 클릭했을 때 이벤트 설정 e.preventDefault();//클릭했을 때 이벤트 초기화(a태그 초기화) document.querySelector(li.getAttribute("href")).scrollIntoView({behavior:"smooth"});//el의 href값으로 부드럽게 이동..

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect02.html document.querySelectorAll("#parallax__dot a").forEach(el => {//아이디 parallax__dot의 a태그들을 선택해 element값을 el에 저장 el.addEventListener("click", e => {//el을 클릭했을 때 이벤트 설정 e.preventDefault();//클릭했을 때 이벤트 초기화(a태그 초기화) document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"});//el의 href값으로 부드럽게 이동 });..

https://garenchoi.github.io/webs_class/javascript/effect/parallaxEffect01.html document.querySelectorAll("#parallax__nav li a").forEach(li => {//아이디 parallax__nav의 li태그의 a태그들 선택해서 index값 li에 저장 li.addEventListener("click", (e) => {//li를 클릭했을 때 이벤트 설정 e.preventDefault();//클릭했을 때 이벤트 초기화(a태그 초기화) document.querySelector(li.getAttribute("href")).scrollIntoView({//li의 href값으로 이동 behavior:"smooth";//부..

이벤트의 단계 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다. 캡처링 단계 : 이벤트가 하위 요소로 전파되는 단계 타깃 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 : 이벤트가 상위 요소로 전파되는 단계 캡쳐링(capturing) 이벤트를 실행할 때 최상위 조상에서 타깃으로 설정된 요소까지 전파되는 동안을 캡쳐링 단계라고 합니다. 실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있습니다. 타깃 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있습니다. 버블링 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect05.html const circle = document.querySelector(".cursor").getBoundingClientRect(); //변수 circle에 클래스 cursor의 정보 값 저장 function mouseMove(e){//함수 mouseMove 매개변수 e로 선언 let mousePageX = e.pageX;//mousePageX에 e의 pageX(X좌표 값)저장 let mousePageY = e.pageY;//mousePageY에 e의 pageY(Y좌표 값)저장 //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerW..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect04.html const circle = document.querySelector(".cursor").getBoundingClientRect();//클래스 cursor의 정보값 circle에 저장 document.querySelector(".mouse__img").addEventListener("mousemove", e => {//클래스 mouse__img에 마우스 움직였을 때 이벤트 설정 //커서 gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2}); //gsa..