study 코딩하자

마우스 이벤트의 종류 click : 마우스를 클릭할 때 발생 dbclick : 마우스를 더블 클릭할 때 발생 mousedown : 마우스 버튼을 누를 때 발생 mouseup : 마우스 버튼을 뗄 때 발생 mousemove : 마우스를 움직일 때 발생 mouseover : 마우스를 요소 안에 들어올 때 발생 mouseout : 마우스가 요소를 벗어날 때 발생 mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 mouseover, mouseout / mouseenter, mouseleave 차이점 mouseover, mouseout 과 mouseenter, mouseleave의 차이점은 자식 요소까지 인식하..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect03.html const circle = document.querySelector(".cursor").getBoundingClientRect(); //변수 circle에 클래스 cursor의 정보 저장 //circle = {bottom: 200, height: 200, left: 0, right: 200, top: 0, width: 200, x: 0, y: 0} function follow(e){//함수 follow를 매개변수 e로 선언 gsap.to(".cursor", {duration: .3, left: e.pageX-(circle.width/2), top: e.pageY-(cir..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect02.html const cursor = document.querySelector(".cursor");//변수 cursor에 클래스 cursor 저장 const follower = document.querySelector(".cursor-follower");//변수 follower에 클래스 cursor-follower 저장 const span = document.querySelectorAll(".mouse__wrap span");//변수 span에 클래스 mouse__wrap의 span 태그들 저장 const info = document.querySelectorAll(".info");..

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect01.html const style = document.querySelectorAll(".mouse__wrap span");//변수 style에 클래스 mouse__wrap의 span태그들 저장 const cursor = document.querySelector(".cursor");//변수 cursor에 클래스 cursor 저장 //마우스 움직이기 window.addEventListener("mousemove", e => {//브라우저에 마우스를 움직였을 때 이벤트 설정 let x = e.clientX-25 + "px";//변수 x에 "e(마우스위치)의 x좌표-25px" 저장 let ..

https://garenchoi.github.io/webs_class/javascript/effect/quizEffect05.html const quizWrap = document.querySelector(".quiz__wrap");//quizWrap에 클래스 quiz__wrap저장 //문제 정보 const quizInfo = [//quizInfo에 문제 정보 저장 { answerType : "javascript", answerNum : 1, answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?", answerChoice : { 1: "html", 2: "css", 3: "javascript", 4: "react" }, answerResult : "3", answerEx : "객체 ..

https://garenchoi.github.io/webs_class/javascript/effect/quizEffect04.html const quizType = document.querySelector(".quiz__type"); //문제 유형 const quizNumber = document.querySelector(".quiz__number"); //문제 번호 const quizAsk = document.querySelector(".quiz__ask"); //문제 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //정답 확인 버튼 const quizResult = document.querySelector(".quiz__result..

https://garenchoi.github.io/webs_class/javascript/effect/quizEffect03.html const quizType = document.querySelectorAll(".quiz__type"); //문제 유형 const quizNumber = document.querySelectorAll(".quiz__number"); //문제 번호 const quizAsk = document.querySelectorAll(".quiz__ask"); //문제 질문 const quizConfirm = document.querySelectorAll(".quiz__confirm"); //정답 버튼 const quizResult = document.querySelectorAll("...

https://garenchoi.github.io/webs_class/javascript/effect/quizEffect02.html const quizType = document.querySelector(".quiz__type"); //퀴즈 종류 const quizNumber = document.querySelector(".quiz__number"); //퀴즈 번호 const quizAsk = document.querySelector(".quiz__ask"); //퀴즈 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //정답 확인 버튼 const quizResult = document.querySelector(".quiz__result..