퀴즈 사이트를 만들어보자!

JAVASCRIPT/퀴즈 이펙트

퀴즈 사이트를 만들어보자!

younajeong 2023. 3. 8. 19:26

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

퀴즈 이펙트

HTML과 CSS를 이용해 퀴즈를 풀 수 있는 사이트를 만들어보았습니다. 먼저 비주얼코드로 가서 javascript폴더 안에 card폴더를 만들어 줍니다. 그리고 quizEffext html 파일을 만들어줘서 실행시켜 줍니다.

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:jeongyouna_@naver.com">jeongyouna_@naver.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 quizQuestion = quizWrap.querySelector(".quiz__question span")
        const quizQuestionNum = quizWrap.querySelector(".quiz__question em")
        const quizAnswerConfirm = quizWrap.querySelector(".quiz__answer .confirm")
        const quizAnswerResult = quizWrap.querySelector(".quiz__answer .result")

        // 문제 정보
        const infoType = "웹디자인 기능사";
        const infoTime = "2012년 1회";
        const infoNumber = "1";
        const infoQuestion = "인접하는 두 색의 경계 부분에 색상, 명도, 채도의 대비가 더욱 강하게 일어나는 현상을 무엇이라고 하는가?";
        const infoAnswer = "연변대비";

        //문제 출력
        quizTitle.innerText = infoType;
        quizTime.innerText = infoTime;
        quizQuestionNum.innerText =infoNumber; 
        quizQuestion.innerText = infoQuestion;
        quizAnswerResult.innerText = infoAnswer;

        //정답 숨기기
        quizAnswerResult.style.display = "none";

        //정답 확인
        quizAnswerConfirm.addEventListener("click",function(){
            quizAnswerResult.style.display = "block";
            quizAnswerConfirm.style.display = "none";
        });
    </script>
</body>
</html>

HTML 들여다보기

퀴즈 이펙트라는 타이틀을 만들어 준후 코드가 지저분해지지 않게 link를 사용해서 reset과 css파일을 만들어줍니다.
header, main, footer로 나누어 전체적인 body를 잡아줍니다.
CSS로 묶어 줄 수 있게 quize wrap, tittle, question,view,answer로 요소들로 묶어줍니다.
CSS에서 각 요소들에게 효과를 준 후 자바스크립트를 통해 화면에 글자가 나올 수 있게끔 실행시켜줍니다.
Script를 보면 선택자,문제정보,문제출력,정답숨기기,정답확인 이라는 큰 타이틀이 있습니다.
먼저 우리가 배운 스크립트를 토대로 출력을 해주는데 'querySelector'란 문서내 CSS선택자를 사용하여 요소를 선택하는 javascript매서드 입니다. 매서드는 단일요소를 선택하며 첫번째로 일치하는 요소만 반환 합니다. 또한 document객체를 통해 호출 됩니다.
따라서 선택자와 정보를 이용해 출력해줍니다.

CSS

/* header */
#header {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #262626;
    color: #fff;
    padding: 10px;
    width: 100%;
    z-index: 1000;
}
#header::before {
    content: '';
    border:  4px ridge#c5c5c5;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}
#header h1 {
    font-size: 28px;
    padding: 0px 5px 5px 10px;
    font-family: 'DungGeunMo';
    z-index: 10;
    position: relative;
}
#header h1 a {
    color: #fff;
}
#header h1 em {
    font-size: 0.5em;
}

/* footer */

#footer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #262626;
    text-align: center;
    position: relative;
}
#footer a {
    color: #fff;
    padding: 20px;
    display: block;
    font-family: 'DungGeunMo';
    z-index: 10;
    position: relative;
    
}
#footer::before {
    content: '';
    border:  4px ridge#a3a3a3;
    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;
}
.quiz__wrap .quiz {
    max-width: 500px;
    background-color: #ffffff;
    border: 8px ridge #cacaca;
    
}
.quiz__title {
    background-color: #fff7ca;
    border: 3px ridge #bab9b9;
    border-bottom-width: 6px;
    padding: 5px;
    font-family: 'DungGeunMo';
    font-size: 16px;
    color: #3d3d3d;
    text-align: center;
}
.quiz__question {
    padding: 20px;
    font-size: 24px;
    font-family: 'suncheon';
    font-weight: 300;
    line-height: 1.5;
    border-bottom: 6px ridge #cacaca;
}
.quiz__question em {
    color: #125ca2;
}
.quiz__answer {
    font-family: 'suncheon';
    padding: 20px;
    text-align: center;
    font-size: 24px;
    /* border-bottom: 6px ridge #cacaca; */
}
.quiz__answer .confirm {
    background-color: #fff091;
    border: 6px ridge #cacaca;
    width: 100%;
    font-family: 'DungGeunMo';
    padding: 20px;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
}
.quiz__answer .confirm:hover{
    background-color: #efdd75;
}
.quiz__answer .result {
    background-color: #ffffff;
    border: 6px ridge #cacaca;
    width: 100%;
    font-family: 'suncheon';
    padding: 20px;
    font-size: 22px;
}
.quiz__view {
    border-bottom: 6px ridge#cacaca;
    overflow: hidden;
}

/* dog__wrap */
.dog .tail, 
.dog .chin, 
.dog .tongue::before, 
.dog .tongue::after, 
.dog .mouth, 
.dog .nose, 
.dog .teardrop, 
.dog .eyes, 
.dog .face::before, 
.dog .face::after, 
.dog .ears::before, 
.dog .ears::after,
.dog__wrap {
    transition: 0.2s ease-in;
}
.card-container {
    position: relative;
    width: 360px;
    height: 378px;
    margin: auto;
    padding-top: 125px;
    border-radius: 3%;
    z-index: 0;
}
.card-container::before, .card-container::after {
    content: "";
    position: absolute;
    height: 100%;
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 3%;
    z-index: -1;
}
.card-container::before {
    top: 3%;
    width: 93%;
}
.card-container::after {
    top: 5.5%;
    width: 85%;
}

.dog .head,
.dog .body {
    position: relative;
    width: 115px;
}
.dog .head {
    height: 115px;
    border-radius: 50% 50% 0 0;
    margin: 0 auto;
}
.dog .ears {
    position: relative;
    top: -14%;
    width: 100%;
}
.dog .ears::before, .dog .ears::after {
    content: "";
    position: absolute;
    top: 0;
    width: 35px;
    height: 70px;
    background: #CB7A1D;
    border-top: 11px solid #F7AA2B;
    border-left: 7px solid #F7AA2B;
    border-right: 7px solid #F7AA2B;
}
.dog .ears::before {
    left: 0;
    border-radius: 50% 45% 0 0;
}
.dog .ears::after {
    right: 0;
    border-radius: 45% 50% 0 0;
}
.dog .face {
    position: absolute;
    background: #F7AA2B;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 0 0;
}
.dog .face::before, .dog .face::after {
    content: "";
    display: block;
    margin: auto;
    background: #FEFEFE;
}
.dog .face::before {
    width: 15px;
    height: 35px;
    margin-top: 24px;
    border-radius: 20px 20px 0 0;
}
.dog .face::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 60px;
    height: 65px;
    border-radius: 45% 45% 0 0;
}
.dog .eyes {
    position: relative;
    top: 29%;
    text-align: center;
}
.dog .eyes::before, .dog .eyes::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #451d1c;
    margin: 0 14.5%;
}
.dog .teardrop {
    position: absolute;
    top: 125%;
    left: 19%;
    width: 6px;
    height: 6px;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    background: #FEFEFE;
    visibility: hidden;
}
.dog .nose {
    position: relative;
    top: 35%;
    width: 16px;
    height: 8px;
    border-radius: 35px 35px 65px 65px;
    background: #451d1c;
    margin: auto;
}
.dog .mouth {
    position: relative;
    top: 34.5%;
    width: 4px;
    height: 6px;
    margin: 0 auto;
    text-align: center;
    background: #451d1c;
}
.dog .mouth::before, .dog .mouth::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 4px solid #451d1c;
    border-left-color: transparent;
    border-top-color: transparent;
    z-index: 2;
}
.dog .mouth::before {
    transform: translateX(-89%) rotate(45deg);
}
.dog .mouth::after {
    transform: translateX(-2px) rotate(45deg);
}
.dog .tongue {
    position: relative;
    z-index: 1;
}
.dog .tongue::before, .dog .tongue::after {
    content: "";
    position: absolute;
}
.dog .tongue::before {
    top: 10px;
    left: -7px;
    width: 18px;
    height: 0;
    border-radius: 50%;
    background: #451d1c;
    z-index: -1;
}
.dog .tongue::after {
    top: 14px;
    left: -4px;
    width: 12px;
    height: 0;
    border-radius: 20px;
    background: #F5534F;
    z-index: 5;
}
.dog .chin {
    position: relative;
    top: 47.5%;
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-top: 10px solid #e8e7ec;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-radius: 2px;
    z-index: 0;
}
.dog .body {
    position: relative;
    height: 139px;
    margin: auto;
    z-index: 0;
}
.dog .body::before, .dog .body::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    margin: auto;
    background: #F7AA2B;
}
.dog .body::after {
    top: -2px;
    bottom: -1px;
    width: 60px;
    background: #FEFEFE;
}
.dog .tail {
    position: absolute;
    left: -60%;
    bottom: 1px;
    background: #F7AA2B;
    width: 93px;
    height: 15px;
    transform: rotate(45deg);
    transform-origin: 100% 50%;
    border-radius: 25px 0 0 25px;
    z-index: -2;
}
.dog .legs {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 15%;
    background: #F7AA2B;
    border-radius: 10px 10px 0 0;
}
.dog .legs::before, .dog .legs::after {
    content: "";
    position: absolute;
    bottom: 1px;
    background: #CB7A1D;
    z-index: -1;
}
.dog .legs::before {
    left: -7.5%;
    width: 115%;
    height: 55%;
    border-radius: 5px 5px 0 0;
}
.dog .legs::after {
    left: -3.5%;
    width: 107%;
    height: 250%;
    border-radius: 20px 20px 35px 35px;
}


@keyframes movetongue {
    100% {
    height: 27px;
    }
}

@keyframes movetail {
    0% {
    transform: rotate(37deg);
    }
    100% {
    transform: rotate(52deg);
    }
}

@keyframes cry {
    100% {
    visibility: visible;
    }
}



.like {
    background: #fcf390;
}
.like .face::before {
    margin-top: 10px;
}
.like .face::after {
    height: 85px;
}
.like .eyes {
    top: 13%;
}
.like .eyes::before,
.like .eyes::after {
    width: 18px;
    height: 5px;
    margin: 0px 12.5%;
    transform: rotate(-37.5deg);
    border-radius: 20px;
}
.like .eyes::after {
    transform: rotate(37.5deg);
}
.like .nose {
    top: 18%;
}
.like .mouth {
    top: 16.5%;
}
.like .tongue::before {
    height: 12px;
}
.like .tongue::after {
    height: 24px;
    animation: movetongue 0.1s linear 0.35s infinite alternate forwards;
}
.like .chin {
    top: 34%;
}
.tail {
    animation: movetail 0.1s linear infinite alternate forwards;
}

.dislike {
    background: #5252da;
}
.dislike .ears::before {
    transform: rotate(-50deg) translate(-7px, 2px);
}
.dislike .ears::after {
    transform: rotate(50deg) translate(7px, 2px);
}
.dislike .face::before {
    margin-top: 28px;
}
.dislike .face::after {
    height: 55px;
}
.dislike .eyes {
    top: 38%;
}
.dislike .eyes::before,
.dislike .eyes::after {
    width: 18px;
    height: 5px;
    margin: 0px 14.5%;
    transform: rotate(-37.5deg);
    border-radius: 20px;
}
.dislike .eyes::after {
    transform: rotate(37.5deg);
}
.dislike .teardrop {
    animation: cry 0.1s ease-in 0.25s forwards;
}
.dislike .nose {
    top: 44%;
}
.dislike .mouth {
    top: 42%;
}
.dislike .chin {
    top: 52%;
}
.dislike .tail {
    transform: rotate(0);
    animation: movetail 0.5s linear infinite alternate forwards;
}

CSS 들여다보기!

z-index : 요소의 쌓임 순서 (z-order)를 지정하는 데 사용됩니다. 요소가 쌓여 있는 순서는 해당 요소의 위치와 함께 결정됩니다. 쌓인 순서가 높은 요소는 다른 요소 위에 더 나중에 배치되며, 높은 쌓임 순서를 가진 요소는 다른 요소보다 위쪽에 나타납니다. z-index의 속성은 position 속성이 static이 아닌 요소에만 적용됩니다. 즉, "position: relative", "position: absolute", "position: fixed"등의 속성을 가진 요소에 적용 됩니다.
position : 요소의 위치 지정 방법을 설정하는 방법입니다. 속성은 "static","relative","absolute","fixed","sticky"값을 가질 수 있습니다.

속성	적용되는 방법
static	기본값으로 요소가 문서의 흐름에 따라 위치가 지정됩니다. "top","bottom","left","right","z-index"는 적용되지 않습니다.
relative	요소의 위치가 기본 위치를 기준으로 상대적으로 이동합니다 "top","bottom","left","right"를 사용하여 요소를 이동할 수 있으며 "z-index"를 사용하여 요서의 쌓임 순서를 조정할 수 있습니다.
absolute	요소의 위치가 부모 요소를 기준으로 상대적으로 이동됩니다. 부모 요소 중 가장 가까운 "position"속성이 relative", "absolute", "fixed", "sticky"일 경우 그 부모 요소를 기준으로 요소의 위치가 결정됩니다. "top", "bottom", "left", "right" 속성을 사용하여 요소를 이동할 수 있으며, "z-index" 속성을 사용하여 요소의 쌓임 순서를 조정할 수 있습니다.
fixed	요소가 뷰포트를 기준으로 상대적으로 이동됩니다. 스크롤을 내려도 요소의 위치가 변경되지 않으며, 항상 같은 위치에 고정됩니다.
sticky	요소가 스크롤 영역을 기준으로 상대적으로 이동할 수 있습니다. 일정 영역까지 스크롤을 내리면 요소가 고정되어 더 이상 스크롤 되지 않습니다.

위의 속성 중 "relative", "absolute", "fixed", "sticky"를 사용할 경우 요소가 위치를 잡게 되는 기준점이 결정됩니다. 이때 요소를 감싸는 부모 요소가 "position" 속성을 갖고 있으면 그 부모 요소를 기준점으로 위치가 결정됩니다. 부모 요소가 "position" 속성을 갖고 있지 않다면, 문서의 최상단을 기준점으로 위치가 결정됩니다.

완성본

현재글퀴즈 사이트를 만들어보자!

300x250

코딩 공부 기록장📁

GIT 블로그

슬라이드이펙트, 슬라이드효과, 퀴즈유형, 피그마, html, gsap, jquery, 퀴즈사이트만들기, 코딩공부, css, 사이트만들기, 홈페이지제작, 코딩, 자바스크립트, 애니메이션효과, 레이아웃, 함수, 오답노트, 코딩일기, 효과,

Today :
Yesterday :

Youna