seop's study seop's study

설명 마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다. 추가적으로 특정한 언어(span태그로 감싼 단어)에 마우스가 오버 됐을 경우에는 마우스를 따라다니는 원이 변하도록 효과를 넣었습니다.

설명 마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다. //출력용 => 마우스좌표 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").inn..

설명 여러 문제를 각각 사용자가 입력한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다. 이번에는 모든 문제를 javascript로 출력 하였습니다.

설명 사용자가 보기를 선택한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다. 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 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 quizDog = document.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 quizDog = document.quer..

설명 화면 하단 부분에 닷 버튼을 추가합니다. 현재의 이미지 인덱스 값과 닷버튼의 인덱스 값을 같게 만들어 닷버튼을 누르면 해당 이미지로 이동합니다 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 const sliderBtn = document.querySelector("..

설명 이미지의 인덱스 값의 따라 '이전'버튼을 눌렀을 때 => 현재 인덱스 값의 - 1 씩 감소합니다. 이미지의 인덱스 값의 따라 '다음'버튼을 눌렀을 때 => 현재 인덱스 값의 + 1 씩 증가합니다. //slider05 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); //이미지 움직이는 영역 const slider = document.querySelectorAll(".slider"); //5개의 이미지 저장 c..

설명 메커니즘은 좌로 움직이기(Slider Effect)와 같습니다. 1번 이미지 -> 2번 이미지 -> 3번 이미지 -> 4번 이미지 -> 5번 이미지 -> 1번 이미지가 출력됨과 동시에 2번~5번 이미지의 위치가 1번 이미지의 뒤로 옮겨집니다. 좌로 움직이기에서는 translate를 X축으로 줬던 반면, 위로 움직이기는 translate를 Y축으로 주고, 이미지의 총길이를 마찬가지로 X축인 width값이 아닌, Y축인 height값으로 설정해 줍니다. //slider04 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); //이미지 보이는 영역..