근혁 study 공부정리

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

{ const quizWrap = document.querySelector(".quiz__wrap") //문제 정보를 quizInfo 전부 저장 const quizInfo = [ { answerType: "javascript", answerNum: 1, answerAsk: "객체 기반의 스크립트 프로그래밍 언어는 무엇입니까?", answerChoice : { 1:"html", 2:"css", 3:"javascript", 4:"react" }, answerResult: "3", answerEx : "객체 기반의 스크립트 프로그래밍 언어는 자바스크립트입니다." }, { answerType: "css", answerNum: 1, answerAsk: "HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위..

{ 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") //문제 화면 const q..

{ 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"); //강아지 co..

{ 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(".quiz__view .dog"); cons..

{ 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 sliderDot = document.querySelector(".slider__dot") //dot 버튼 let currentI..