아라의 WWW

html Quiz 객관식 확인하기(여러문제) 유형 : 슬라이드 유형 1 2 3 4 5 6 정답입니다! 틀렸습니다! 다음 문제 jo0132@naver.com 이번에도 html은 앞서 했던 퀴즈 이펙트에 사용한 html을 사용하도록 합니다. 하지만 이번에는 몇문제가 남았는지 몇점인지가 나옵니다. 문자 정보 const quizinfo =[ { infoType : "정보처리 기능사", infoTime : "2008년 4회", infoNumber : "20080401", infoQuestion : "일반적으로 digital type 의 양을 바르게 표현한 것은?", infoChoice : ["시간의 흐름", "연필의 갯수", "온도의 변화", "식물의 성장"], infoAnswer : "연필의 갯수", infoD..

선택자 const quizWrap = document .querySelector(".quiz__wrap"); let quizScore = 0; 문제 정보 // 문제정보 const quizinfo =[ { infoType : "정보처리 기능사", infoTime : "2008년 4회", infoNumber : "20080401", infoQuestion : "일반적으로 digital type 의 양을 바르게 표현한 것은?", infoChoice : { 1: "시간의 흐름", 2: "연필의 갯수", 3: "온도의 변화", 4: "식물의 성장" }, infoAnswer : "2", infoDesc : "연필은 1.5개가 존재 하지 않으므로 디지털입니다" // 문제1 end },{ infoType : "정보처리..

HTML Javascript Mouse Effect03 마우스를 따라다니는 조명효과입니다. 1 2 3 4 5 6 "The road to success and the road to failure are almost exactly the same." 성공하는 길과 실패하는 길은 거의 같다. 오늘은 마우스을 움직이면 따라다니면서 돋보기처럼 선명하게 보이는 효과를 줍니다. 마우스을 따라다니는 200px의 원을 만들고 커서의 가운데로 오도록 합니다.(background-position: center center;) 속성 속성특징 속성 내용 background-attachment: fixed; 배경 이미지가 화면에서 고정되어 스크롤해도 항상 같은 위치에 남아 있게 됩니다. 배경이미지를 고정하여 커서를 움직여도 배경..

html Javascript Mouse Effect03 GSAP를 이용해서 마우스를 따라다니는 효과입니다. 1 2 3 4 5 6 Success is not final; failure is not fatal: It is the courage to continue that counts. 성공은 종점이 아니며, 실패는 치명적이지 않습니다. 중요한 것은 용기이다. jo0132@naver.com 우선 html에서는 별다른 효과 없이 명원이 나오는 것으로 주었습니다. 저번과 다른 점은 마우스 커스를 대신할 div박스가 두개라는 점입니다 이는 실행할때 나오는데 두 박스는 서로 다르게 움직이게 css를 주었습니다. 그리고 active를 주어 서로 span에 닿을 때 애니메이션 효과가 나도록 transform을 주었습니..

HTML Javascript Mouse Effect01 마우스 이팩트 - 마우스 따라다니기 1 2 3 4 5 6 Change will not come if we wait for some other person or some other time. 변화는 누군가 언젠가 가져다줄 거라 기다리면 절대로 오지 않는다. clientX : 0px clientY : 0px offsetX : 0px offsetY : 0px pageX : 0px pageY : 0px screenX : 0px screenY : 0px jo0132@naver.com 마우스 이펙트는 마우스 커서의 좌표값을 받아 표시하고 커서를 따라다니는 오브젝트를 만들었습니다. 또한 여러가지 효과를 주어 커서가 특정 단어에 올라갈때 커서의 모양이 변하는 애니..

html Quiz 객관식 확인하기 유형 1 2 3 4 5 정답입니다! 틀렸습니다! 정답 확인하기 jo0132@naver.com 우선 지금까지 만들었던 퀴즈 이펙트에서 여러 가지 보기중 하나를 선택하면 선택한 답이 정답과 동일한지 비교하는 객관식입니다. 우선 label로 보기를 만드는데 for이라는 속성으로 이름들 지정합니다. 또한 value로 값을 주어 번호를 매깁니다. script 우선 늘 그랬듯이 문제 정보에 키값과 원하는 정보를 객체에 저장합니다. 이때 우리는 객관식 문제를 만들기때문에 정답 선택지를 저장하기 위해 infoChoice라는 키값에 배열로 선택지를 저장합니다. 그 후 문제 출력부분에서 updateQuiz함수를 만들어 문제를 불러오는데 이때 innerHTML을 사용하여 html속성까지 불..

오늘 은 퀴즈 이펙트를 한페이지에 여러개를 넣어 한번에 풀 수 있도록 하려고 합니다. html . 정답입니다! 틀렸습니다! 정답 확인하기 html을 위와 같이 세개를 만들어 줍니다. 이는 한페이지에 3문제를 한번에 볼 수있도록 하는것으로 똑같은 이펙트를 html로 구현합니다. 선택자 const quizWrap = document .querySelector(".quiz__wrap"); const quizTitle = quizWrap .querySelectorAll(".quiz__title"); // 시험 날짜_시간 const quizQuestionNum = quizWrap.querySelectorAll(".quiz__question em"); // 문제 번호 const quizQuestion = quizW..