코딩 공부 코딩 공부

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

function follow(e){ // const circle1 = document.querySelector(".cursor").clientWidth; //190 : border값 빠진 상태 // const circle2 = document.querySelector(".cursor").offsetWidth; //200 : border값 포함 상태 const circle3 = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, width, x(좌표값), y(좌표값) // console.log(circle1); // console.log(circle2); // console.log(circ..

const cursor = document.querySelector(".cursor"); //div.cursor const follower = document.querySelector(".cursor-follower"); //div.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(c..

//출력용 window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; //현재창 기준 마우스커서 수평 좌표 document.querySelector(".clientY").innerText = event.clientY; //현재창 기준 마우스커서 수직 좌표 document.querySelector(".offsetX").innerText = event.offsetX; //좌표를 출력하도록 하는 이벤트가 걸려있는 DOM node를 기준으로 수평 좌표 document.querySelector(".offsetY").innerText = event.offsetY; //좌표를 ..

highlight(); //외부 스크립트 함수 (highlight)호출 modal(); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu(); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider03 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sliderInner = document.querySelector(".slide..

highlight(); //외부 스크립트 함수 (highlight)호출 modal (); //외부 스크립트 함수 (modal, 소스보기 창)호출 tabMenu (); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출 // slider03 const sliderWrap = document.querySelector(".slider__wrap"); //sliderWrap에 div 태그 .slider__wrap 저장 const sliderImg = document.querySelector(".slider__img"); //sliderImg에 div 태그 .slider_img 저장, 이미지 한 칸만 보이는 영역 const sliderInner = document.querySelector(".sli..