코딩 공부 코딩 공부

const mouseImg = document.querySelectorAll(".mouse__img"); mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation:-15, scale: 0.3, opacity:0}); gsap.to(imageWrap, {xPercent: -50, yPerc..

const quizWrap = document.querySelector(".quiz__wrap"); //quizWrap(퀴즈박스전체)를 읽어옴 //문제 정보를 배열 안 객체 형태로 저장(3문제) const quizInfo = [ { answerType : "javascript", answerNum : 1, answerAsk : "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?", answerChoice : { //제시 답안을 객체 형태로 저장 1: "html", 2: "css", 3: "javascript", 4: "react" }, answerResult : "3", answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다." }, { answerType : "html", an..

const quiz = document.querySelector(".quiz"); 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"); //문제 정답 const quizView = ..

const quiz = document.querySelectorAll(".quiz"); 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(".quiz__result"); //문제 정답..

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"); //정답 결과 const quizView = document.querySelector(".quiz__view"); //강아지 c..

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"); //정답 결과 const quizDog = document.querySelector(".dog"); //강아지 애니메이션 //문..

const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e) { //마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth / 2 - mousePageX; let centerPageY = window.innerHeight / 2 - mousePageY; //X: 최솟값은 -800 최댓값은 800, Y: 최솟값은 -300, 최댓값은 300 let maxPageX = Math.max(-800, Math.min(800, centerPageX));..

//div.cursor의 속성값 저장 const circle = document.querySelector(".cursor").getBoundingClientRect(); document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { //div.cursor의 위치를 pageX,pageY로 받은 값에서 div.cursor의 크기 절반 값을 빼서 정 가운데로 위치시키게한다. gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2}); //마우스 좌표 값 let mousePageX = e.pageX; let mousePa..