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>퀴즈 이펙트 02</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz <em> 주관식 확인하기</em></a></h1>
<ul>
<li><a href="quizEffect01.html">1</a></li>
<li class="active"><a href="quizEffect02.html">2</a></li>
</ul>
</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">
<input class="input" type="text" placeholder="정답을 작성해주세요.">
<button class="confirm">정답 확인하기 </button>
<div class="result"></div>
</div>
</div>
<div class="quiz__footer">
<div class="quiz__desc">해설</div>
</div>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:goed0522@gmail.com">goed0522@gmail.com</a>
</footer>
<!-- //footer -->
<script>
//선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");
const quizQuestionNum = quizWrap.querySelector(".quiz__question em");
const quizQuestion = quizWrap.querySelector(".quiz__question span");
const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
const dogWrap = quizWrap.querySelector(".dog__wrap");
const quizDesc = quizWrap.querySelector(".quiz__desc");
const quizFooter = quizWrap.querySelector(".quiz__footer");
const quizAnswerInput = quizWrap.querySelector(".quiz__answer .input");
//문제 정보
const infoType = "정보처리 기능사";
const infoTime = "2011년 5회";
const infoNumber = "2";
const infoQuestion = "프레젠테이션 화면 전체를 전환하는 단위를 의미하는 것은?";
const infoAnswer = "슬라이드";
const infoDesc = "슬라이드는 프레젠테이션 화면 전체를 말하고 개체는 화면을 구성하는 개개의 요소를 말한다.";
//문제 출력
quizTitle.textContent = infoType;
quizTime.textContent = infoTime;
quizQuestionNum.textContent = infoNumber;
quizQuestion.textContent = infoQuestion;
quizDesc.textContent = infoDesc;
quizAnswerResult.textContent = infoAnswer;
//정답 & 해설 숨기기
quizAnswerResult.style.display = "none";
quizFooter.style.display = "none";
//사용자 정답
quizAnswerConfirm.addEventListener("click", function () {
quizAnswerResult.style.display = "block"; //정답 나타냄
quizAnswerConfirm.style.display = "none"; //정답 확인버튼 숨김
const userAnswer = quizAnswerInput.value.trim();
if(infoAnswer == userAnswer) {
alert("정답입니다")
dogWrap.classList.add("like");
quizFooter.style.display = "block"; //팁 박스 숨김
quizAnswerInput.style.display = "none"; //입력 박스 숨김
} else {
alert("오답입니다")
dogWrap.classList.add("dislike");
}
});
</script>
</body>
</html>
코드 보기 / CSS
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #390b47;
color: #fff;
padding: 10px;
z-index: 1000;
display: flex;
justify-content: space-between;
}
#header::before {
content: '';
border: 4px ridge #580073;
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
#header h1 {
font-size: 28px;
padding: 5px 5px 5px 10px;
font-family:'DungGeunMo';
z-index: 10;
position: relative;
}
#header h1 a {
color: #fff;
}
#header h1 em {
font-size: 0.5em;
}
#header ul {
padding: 5px;
}
#header li {
display: inline;
z-index: 10;
position: relative;
}
#header li a {
color: #fff;
font-family: 'DungGeunMo';
border: 1px dashed #fff;
display: inline-block;
padding: 5px;
}
#header li.active a,
#header li a:hover {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #390b47;
padding: 10px;
text-align: center;
}
#footer a {
color: #fff;
padding: 20px;
display: block;
font-family: 'DungGeunMo';
z-index: 10;
position: relative;
}
#footer::before {
content: '';
border: 4px ridge #580073;
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 16px);
height: calc(100% - 18px);
}
/* main */
#main {
padding: 100px;
}
/* quiz__wrap */
.quiz__wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.quiz__wrap .quiz {
width: 500px;
background-color: #fff;
border: 8px ridge #a12cd3;
width: 500px;
}
.quiz__header {}
.quiz__title {
background-color: #a12cd3;
border: 3px ridge #a12cd3;
border-bottom: 6px ridge #a12cd3;
padding: 5px;
font-family: 'DungGeunMo';
font-size: 16px;
color: #fffffff8;
text-align: center;
}
.quiz__main {}
.quiz__question {
padding: 20px;
font-size: 24px;
font-family: 'ElandChoice';
font-weight: bold;
border-bottom: 6px ridge #a12cd3;
line-height: 1.4;
}
.quiz__question em {
color: #2c024e
}
.quiz__answer {
padding: 20px;
font-size: 24px;
font-family: 'ElandChoice';
font-weight: 500;
border-bottom: 6px ridge #a12cd3;
text-align: center;
}
.quiz__answer .confirm {
color: #fff;
background-color: #a12cd3;
width: 100%;
font-family: 'ElandChoice';
padding: 10px 20px;
font-size: 22px;
cursor: pointer;
transition: all 0.3s;
text-shadow: 1px 1px 1px #440460;
font-weight: bold;
margin-bottom: 10px;
}
.quiz__answer .confirm:hover {
background-color: #620689;
}
.quiz__answer .result {
background-color: #fff;
border: 6px ridge #a12cd3;
width: 100%;
font-family: 'ElandChoice';
padding: 10px 20px;
font-size: 22px;
}
.quiz__answer .input {
background-color: #fff;
border: 6px ridge #a12cd3;
width: 100%;
font-family: 'ElandChoice';
padding: 10px 20px;
font-size: 22px;
margin-bottom: 10px;
}
.quiz__view {
border-bottom: 6px ridge #a12cd3;
overflow: hidden;
}
.quiz__footer {
font-family: 'ElandChoice';
border-top: 6px ridge #a12cd3;
padding: 20px;
background-color: #f2e7fe;
}
.quiz__footer::before {
content: "✏Tip";
color : firebrick;
font-weight: bold;
}
.quiz__desc {
padding-top: 5px;
}
textContent
:문서에서 텍스트 컨텐츠를 나타내는 속성이다.
이 속성은 자식 노드1를 포함하지 않고 요소의 텍스트 컨텐츠만 반환한다.
HTML 요소의 경우 HTML 태그를 문자열로 반환하며, 스크립트에서 해당 요소의 텍스트를 변경할 수 있다.
quizDesc.textContent = infoDesc;
:infoDesc라는 변수에 저장된 문자열 값을 가져와 quizDesc라는 요소의 textContent 속성에 할당한다.
quizDesc는 HTML에서 특정 요소를 나타내는 변수이며, textContent를 사용하면 해당 요소의 텍스트 컨텐츠가 infoDesc로 설정된다.
innerText와 같은 역할을 한다고 볼 수 있다.
value
:HTML 요소의 값을 나타내는 속성.
이 속성은 해당 요소의 현재 값을 나타낸다. value를 사용하여 요소에 입력 된 값을 가져오거나 설정할 수 있다.
const userAnswer = quizAnswerInput.value
:const를 사용하여 userAnswer 변수를 선언하고 quizAnswerInput 객체의 value 속성 값을 할당한다.
즉, 입력 창에 사용자가 입력한 현재 값을 가져오는 것이다.
질문에 대한 사용자의 답변을 받아 상수에 저장하는 작업을 수행한다.
trim( )
:원본 문자열을 수정하지 않으면서 문자열 양 옆(시작과 끝)의 공백만을 제거하여 새로운 문자열을 반환하는 메서드(Method)이다.
const userAnswer = quizAnswerInput.value.trim( );
:value가 입력 창에 사용자가 입력한 현재 값을 가져오면 trim( )은 이 값을 가져와서 앞 뒤의 공백을 제거한 후 userAnswer 변수에 할당한다.
즉, 사용자가 입력한 값의 앞 뒤 공백이 제거되기 때문에 결과적으로 문자열이 더 정확하게 비교되고 처리될 수 있다.
classList
:문서 요소의 클래스 속성을 나타내는 속성이다.
이는 DOMTokenList2를 반환하며, 해당 객체는 클래스를 조작하는 여러 메서드(Method)를 가지고 있다.
classList 메서드를 사용하면 문서 요소의 클래스를 추가, 제거 또는 토글3할 수 있다.
clasList의 메서드를 사용하여 문서 요소의 클래스를 동적으로 조작하거나 애니메이션 효과를 만드는데 유용하게 사용된다.
dogWrap.classList.add("dislike");
:dogWrap이라는 클래스 이름을 가진 HTML 요소에 dislike라는 css 클래스를 추가한다.
이를 통해 해당 요소의 스타일을 변경할 수 있다.
justify-content
space-between
:아이템들 즉, 요소 사이(between)에 균일한 간격을 만들어 주는 것.
한글office에서 사용하는 문단모양의 배분정렬이라고 생각하면 쉽다.
position
position : fixed
:요소를 화면에서 고정된 위치에 놓도록 지정하는 속성.
스크롤 되더라고 화면에서 계속 같은 위치에 있도록 요소를 고정한다.
top, left, right, bottom 등을 사용하여 위치를 지정할 수 있다.
width, height
calc(100%-n px)
:100%에서 n px을 뺀 값을 계산하여 그 결과를 적용한다.
주로 박스 모델에서 사용되는 표현식이며, 요소의 너비(widht) 높이(height)를 계산할 때 유용하다.
요소가 화면 전체를 차지하면서 좌우 여백이 n px이 되도록 한다.
숫자와 연산자를 조합하여 사용할 수도 있다.