728x90
퀴즈사이트 만들기
화면에 문제가 나와서 정답여부에 따라 강아지의 모션이 바뀌는 사이트를 만들기
코드블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>퀴즈이펙트01</title>
<link rel="stylesheet" href="CSS/quiz.css">
<link rel="stylesheet" href="CSS/reset.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html"></a> Quiz <em>정답 확인하기 유형</em></h1>
</header>
<!-- header -->
<main id="main">
<div class="quiz__wrap">
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title"><span></span> <em></em></h2>
</div>
<div class="quiz__main">
<div class="quiz__question">
<em></em>. <span></span>
</div>
<div class="quiz__view">
<div class='dog__wrap'>
<div class='card-container'>
<div class='dog'>
<div class='head'>
<div class='ears'></div>
<div class='face'></div>
<div class='eyes'>
<div class='teardrop'></div>
</div>
<div class='nose'></div>
<div class='mouth'>
<div class='tongue'></div>
</div>
<div class='chin'></div>
</div>
<div class='body'>
<div class='tail'></div>
<div class='legs'></div>
</div>
</div>
</div>
</div>
</div>
<div class="quiz__answer">
<button class="confirm">정답 확인하기</button>
<div class="result">연변대비</div>
</div>
</div>
<div class="quiz__footer"></div>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:lee3ll@naver.com">lee3ll@naver.com</a>
</footer>
<!-- footer -->
<script>
//선택자
const quizwrap = document.querySelector(".quiz__wrap");
const quizTitle = document.querySelector(".quiz__title span");
const quizTime = document.querySelector(".quiz__title em");
const quizQuestion = document.querySelector(".quiz__question span");
const quizQuestionNum = document.querySelector(".quiz__question em");
const quizAnswerConfirm = document.querySelector(".quiz__answer .confirm");
const quizAnswerResult = document.querySelector(".quiz__answer .result");
//문제 정보
const infoType = "웹디자인 기능사";
const infoTime = "2012년 1회";
const infoNumber = "1";
const infoQuestion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const infoAnswer = "연변대비";
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
//문제 출력
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
quizQuestionNum.innerText = infoNumber;
quizQuestion.innerText = infoQuestion;
quizAnswerResult.innnerText = infoAnswer;
//정답 숨기기
quizAnswerResult.style.display = "none";
// 정답확인
quizAnswerConfirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerConfirm.style.display = "none";
})
</script>
</body>
</html>
강아지 모션 css는 다음 홈페이지를 참고해 주세요 https://wsss.tistory.com/913
보충설명
| radial-gradient | CSS의 배경 속성 중 하나로, 원형 혹은 타원형 그라데이션을 생성하는 방법. |
|
linear-gradient
|
CSS의 배경 속성 중 하나로, 직선 형태로 그라데이션(gradient)을 생성하는 방법. |
| box-sizing | CSS의 박스 모델(Box Model)에서 요소의 크기를 결정하는 방법을 지정하는 속성. |
| querySelector | DOM)에서 요소를 선택하는 메소드 중 하나로 querySelector를 사용하면 CSS 선택자를 이용하여 원하는 요소를 선택가능. |
|
button
|
텍스트 "버튼"을 가진 일반적인 버튼을 생성. |
| em | 상대적인 길이 단위 중 하나로, 요소의 글꼴 크기에 따라 크기가 결정. 기본적으로 em 단위는 해당 요소의 글꼴 크기(font-size)를 기준으로 계산되는데 예를 들어, 글꼴 크기가 16px인 요소에서 2em을 사용하면 32px의 크기가 됨. |
| ::before와 ::after | CSS 가상요소. HTML 요소의 내부에 삽입되는 가상의 요소를 생성하며 이를 통해, HTML 요소에 직접적인 변경 없이 내부에 새로운 요소 추가가능. |