코딩 공부 코딩 공부

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); const sliderInner = document.querySelector(".slider__inner"); const slider = document.querySelectorAll(".slider"); const sliderBtn = document.querySelector(".slider__btn"); const sliderBtnPrev = sliderBtn.querySelector(".prev"); const sliderBtnNext = sliderBtn.querySelector(".nex..

const cursor = document.querySelector(".cursor"); //div.cursor const follower = document.querySelector(".cursor-follower"); //div.cursor-follower,커서에 점 따라다니는 효과 const hoverText = document.querySelectorAll(".mouse__wrap div p span"); let hover = 1; function move(e, hover){ gsap.to(cursor, { duration: .3, left: e.pageX - 5, top: e.pageY - 5 }) if(hover){ gsap.to(follower, { duration: .8, left: e.p..

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 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..