근혁 study 공부정리

{ document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e =>{ e.preventDefault(); // window.scroll(0, 1000) // window.scroll({left:0, top:1000}); // window.scroll({left:0, top:1000, behavior:"smooth"}); // window.scrollTo(0, 1000) // window.scrollTo({left:0, top:1000}); // window.scrollTo({left:0, top:1000, behavior:"smooth"}); // window.scrollBy(0, 1000) // ..

{ document.querySelectorAll("#parallax__nav li a").forEach(li=>{ li.addEventListener("click", (e) =>{ e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior:"smooth" }) }) }) window.addEventListener("scroll", ()=>{ let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; // forEach document.querySelectorAll(".content__item..

이벤트 버블링(Event Bubbling) 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미함 상위의 화면 요소? HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 하며 body 태그를 최상위 요소라고 부른다. { } { var event = document.querySelectorAll("div"); event.forEach(function(div) { div.addEventListener("click", logEvent); }); function logEvent(event){ console.log(event.currentTarget.className) } } 위 코드는 세 개의 di..

{ const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e) { //마우스 좌표값 let mousePageX = e.pageX let mousePageY = e.pageY //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth/2 - mousePageX; //전체 width값에서 - 마우스 좌표값 let centerPageY = window.innerHeight/2 - mousePageY; //최소값-50 최대값-50 설정 let maxPageX = Math.max(-800, Math.min(800, centerPageX)) //-800이하 8..

{ const circle = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", (e)=>{ //이미지안에서만 마우스 움직이게함 //커서 gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top:e.pageY - circle.height/2}); //마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //전체가로 //window.innerWidth 1920 //브라우저 크기 //window.outeWidth..

{ // const circle1 = document.querySelector(".cursor").clientWidth; //190 : border 빠진 상태 알려줌 // const circle2 = document.querySelector(".cursor").offsetWidth //200 : border 포함 상태 const circle = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x, y console.log(circle.width) //gsap를 쓰면 css이름 그대로 쓸 수 있음 left에 x값 top에는 y값을 넣음 function follow(e){ g..

{ const cursor = document.querySelector(".cursor"); const follower = document.querySelector(".cursor-follower") window.addEventListener("mousemove", e =>{ //커서 좌표값 할당 cursor.style.left = e.pageX -5 + "px"; cursor.style.top = e.pageY -5 + "px"; follower.style.left = e.pageX -15 + "px"; follower.style.top = e.pageY -15 + "px"; gsap.to(cursor, {duration: .3, left: e.pageX -5, top: e.pageY -5}) gsap..

{ //출력용 화면에 X,Y값들을 마우스가 움직일때마다 나타나게 출력 window.addEventListener("mousemove", (event)=>{ document.querySelector(".clientX").innerText = event.clientX document.querySelector(".clientY").innerText = event.clientY document.querySelector(".offsetX").innerText = event.offsetX document.querySelector(".offsetY").innerText = event.offsetY document.querySelector(".pageX").innerText = event.pageX document.q..