
//설명. 참고사항. //출력용 window.addEventListener("mousemove",(event)=>{ document.querySelector(".clientX").innerText = event.clientX; //브라우저 기준 x좌표 document.querySelector(".clientY").innerText = event.clientY; //브라우저 기준 y좌표 document.querySelector(".offsetX").innerText = event.offsetX; //요소 기준 x 좌표 document.querySelector(".offsetY").innerText = event.offsetY; //요소 기준 y 좌표 document.querySelector(".pageX"..

//설명. 참고사항. const quizWrap = document.querySelector(".quiz__wrap"); //문제 정보 const quizInfo = [ { answerType : "html", answerNum : 1, answerAsk : "컨텐츠의 구조를 정의하는 마크업 언어는 무엇인가요?", answerChoice : { 1: "html", 2: "css", 3: "javascript", 4: "react" }, answerResult : "1", answerEx : "컨텐츠의 구조를 정의하는 마크업 언어는 HTML 입니다." }, { answerType : "css", answerNum : 2, answerAsk : "웹 페이지를 꾸미기위해서 사용하는 언어는 무엇입니까?", an..

//설명. 참고사항. 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 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 quizView = document.querySelecto..

//설명. 참고사항. 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 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..

setInterval()을 이용한 이미지 슬라이드 - 닷 버튼 추가 //설명. 참고사항. 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");..

setInterval()을 이용한 이미지 슬라이드 - 버튼 추가 //설명. 참고사항. 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"); con..