728x90
반응형
정답 확인하기 유형 퀴즈 이펙트
수업 시간에 배운 내용을 복습하면서 해보겠습니다.
코드 보기(HTML, JAVASCRIPT / CSS1 / CSS2) / 완성 화면
HTML
<!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/reset.css">
<link rel="stylesheet" href="css/quiz.css">
</head>
<body>
<header id="header">
<h1><a href="../javascript14.html">Quiz</a> <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:dongjin6539@naver.com">dongjin6539@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>HTML 구성
- body 태그에 알맞은 header 구역, main 구역, footer 구역을 만들어줍니다.
- header 구역에 h1 태그를 사용해 알맞은 제목을 입력해줍니다.
- footer 구역에 a 링크 태그를 사용해 받을 이메일 주소를 링크와 같이 입력해줍니다.
- main 구역에 각 자식의 자식 태그를 알맞게 만들어주고 각 class 명을 입력해줍니다.
- 강아지 이미지는 인터넷을 통해 얻어왔습니다. (참조: https://wsss.tistory.com/913)
- 위 페이지에 들어가서 코드펜을 통해 html 구조를 가져와서 main 구역에 입력해줍니다.(css 구조는 css 파일에 입력했습니다.)
- 그러면 body 태그의 구조는 완성됩니다.
- CSS는 각 태그에 알맞는 속성을 입력하고 속성 값을 입력해줍니다.
CSS1
/* header */
#header {
position: fixed;
left: 0;
top: 0;
background-color: #0243f1;
color: #fff;
padding: 10px;
width: 100%;
z-index: 1000;
display: flex;
justify-content: space-between;
}
#header::before {
content: '';
border: 4px ridge #00f7ff55;
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: #0243f1;
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 #00f7ff55;
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
height: calc(100% - 10px);
}
#main {
padding: 100px 0;
}
/* quiz__wrap */
.quiz__wrap {
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: flex-start;
}
.quiz__wrap .quiz {
width: 500px;
background-color: #fff;
border: 8px ridge #0243f1;
margin: 10px;
}
.quiz__title {
background-color: #0243f1;
border: 3px ridge #00f7ff55;
border-bottom-width: 6px;
padding: 5px;
font-family: 'DungGeunMo';
font-size: 16px;
color: #fff;
text-align: center;
}
.quiz__question {
padding: 20px;
font-size: 24px;
font-family: 'PyeongChang';
font-weight: 300;
line-height: 1.4;
border-bottom: 6px ridge #0243f1;
}
.quiz__question em {
color: #0243f1;
}
.quiz__answer {
font-family: 'PyeongChang';
padding: 20px;
text-align: center;
font-size: 24px;
}
.quiz__answer .confirm {
color: #fff;
background-color: #0243f1;
border: 6px ridge #0243f1;
width: 100%;
font-family: 'PyeongChang';
padding: 10px 20px;
font-size: 22px;
cursor: pointer;
transition: all 0.3s;
font-weight: bold;
}
.quiz__answer .confirm:hover {
color: #000;
background-color: #0243f155;
}
.quiz__answer .result {
background-color: #0243f155;
border: 6px ridge #0243f1;
width: 100%;
font-family: 'PyeongChang';
padding: 10px 20px;
font-size: 22px;
}
.quiz__answer .input {
background-color: #fff;
border: 6px groove #0243f1;
width: 100%;
font-family: 'PyeongChang';
padding: 10px 20px;
font-size: 22px;
margin-bottom: 10px;
}
.quiz__view {
border-bottom: 6px ridge #0243f1;
overflow: hidden;
}
.quiz__desc {
border-top: 6px ridge #0243f1;
padding: 20px;
font-family: 'PyeongChang';
background-color: #0243f155;
}
.quiz__desc::before {
content: '✍️ Tip ';
color: #ff3c3c;
font-weight: bold;
}
.quiz__choice {
padding: 20px;
border-bottom: 6px ridge #0243f1;
font-family: 'PyeongChang';
}
.quiz__choice label {
display: flex;
}
.quiz__choice label input {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
.quiz__choice label span {
font-size: 20px;
line-height: 1.4;
padding: 6px;
display: flex;
cursor: pointer;
margin: 2px 0;
}
.quiz__choice label span::before {
content: '';
width: 26px;
height: 26px;
border-radius: 50%;
background: #fff;
box-shadow: inset 0 0 0 4px #0243f1;
margin-right: 15px;
transition: all 0.2s;
}
.quiz__choice label input:checked + span {
background-color: #0243f155;
}
.quiz__choice label input:checked + span::before {
box-shadow: inset 0 0 0 8px #0243f1;
}
CSS2
@import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
* {
margin: 0;
padding: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #222;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
li, ul, ol {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
em {
font-style: normal;
}
body {
background:
radial-gradient(#0243f1 3px, transparent 4px),
radial-gradient(#0243f1 3px, transparent 4px),
linear-gradient(#fff 4px, transparent 0),
linear-gradient(45deg, transparent 74px, transparent 75px, #00f7ff 75px, #00f7ff 76px, transparent 77px, transparent 109px),
linear-gradient(-45deg, transparent 75px, transparent 76px, #00f7ff 76px, #00f7ff 77px, transparent 78px, transparent 109px),
#fff;
background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}
JAVASCRIPT
<script>
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");
const quizQusetion = quizWrap.querySelector(".quiz__question span");
const quizQusetionNumber = quizWrap.querySelector(".quiz__question em");
const quizAnswerCofirm = quizWrap.querySelector(".quiz__answer .confirm");
const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result");
// 문제 정보
const infoType = "웹디자인 기능사";
const infoTime = "2012년 1회";
const infoNumber = "1";
const infoQuestion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
const infoCofirm = "정답 확인하기";
const infoAnswer = "연변대비";
// 문제 출력
quizTitle.innerText = infoType;
quizTime.innerText = infoTime;
quizQusetionNumber.innerText = infoNumber;
quizQusetion.innerText = infoQuestion;
quizAnswerCofirm.innerText = infoCofirm;
quizAnswerResult.innerText = infoAnswer;
// 정답 숨기기
quizAnswerResult.style.display = "none";
// 정답 확인
quizAnswerCofirm.addEventListener("click", function(){
quizAnswerResult.style.display = "block";
quizAnswerCofirm.style.display = "none";
})
</script>자바스크립트 이용
- 위의 html body 구조는 반복해서 사용 될 수도 있어 script를 이용해 글씨를 입력해줍니다.
- 선택자로 변수를 지정해주고 document.querySelector 사용해서 선택자를 만들어주고 ( ) 안에 html body 태그의 입력하고자 하는 위치의 class 명과 태그를 입력해줍니다.
- 문제 정보로 변수를 지정해주고 각 구역에 맞는 알맞은 값을 입력해줍니다.
- 문제 출력으로 선택자의 변수를 적고 .innerText를 사용하고 값으로 알맞은 문제 정보의 변수를 입력해서 body 구조에 입력이 되도록 해줍니다.
- 처음에 화면이 뜰 때 정답을 숨기기 위해 선택자의 변수를 가져와 style을 display = "none";를 입력해주면 처음 화면에 숨겨져 있습니다.
- '정답 확인하기' 버튼을 클릭했을 때 정답이 나오면 버튼을 사라지게 하기 위해서 맞는 선택자를 가져오고 .addEventListener 속성을 가져와서 함수를 이용해 각 선택자의 변수가 나타나거나 사라지는 알맞은 스타일 속성을 입력해줍니다.
참고
- 아직 잘 모르는 자바스크립트 속성에 대해 알아보겠습니다.(https://developer.mozilla.org/en-US/)
| 속성 | 속성 설명 |
| querySelector( ) | 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. |
| innerText | 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. |
| addEventListener | 지정된 이벤트가 대상에 전달될 때마다 호출될 함수를 설정합니다. |
- 아직 잘 모르는 CSS 속성에 대해 알아보겠습니다.(https://developer.mozilla.org/en-US/)
| 속성 | 속성 설명 |
| z-index | 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. |
| calc | CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. |
| visibility | 문서의 레이아웃을 변경하지 않고 요소를 보이거나 숨깁니다. |
| ::before | 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. |
| ::after | 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. |
728x90
반응형
