728x90
반응형

 

퀴즈 이펙트 만들기

 

 

코드 / 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">
        <a href="../javascript14.html">
            <h1>Quiz<em> 정답 확인하기 유형
        </a></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: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 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>

 

 

코드 / css

#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #390b47;
    color: #fff;
    padding: 10px;
    z-index: 1000;
}
#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: 0px 5px 5px 10px;
    font-family: 'DungGeunMo';
    z-index: 10;
    position: relative;
}
#header h1 a {
    color: #fff;
}
#header h1 em {
    font-size: 0.5em;
}
/* main */
#main {
    padding: 100px 0;
}
/* 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);
}

/* quiz__wrap */
.quiz__wrap {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.quiz__wrap .quiz {
    max-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;
    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;
}
.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;
}
.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__view {
    border-bottom: 6px ridge #a12cd3;
    overflow: hidden;
}
.quiz__footer {}

 

 

 

querySelector

document.querySelector( (.quiz__wrap) )

:HTML 문서 내에서 특정 선택자를 가진 요소를 찾아 해당 요소의 참조를 반환하는 역할을 한다.

Selector 뒤에 quiz__wrap이 붙으면 class 속성 값이 quiz__wrap인 첫번째 요소를 찾아 반환합니다.

반환된 요소에 대해 자바스크립트를 이용하여 다양한 조작이 가능하다.

 

quizWrap.querySelector

: quiz__Wrap 변수가 참조하는 요소의 하위 요소 중 Selector 뒤에 오는 선택자의 class 속성을 가진 첫번째 요소를 찾아 해당 요소의 참조를 반환 한다.

document.querySelector와 달리 quiz__Wrap 변수가 참조하는 요소 내에서만 검색을 수행하므로 검색 범위가한정적이다.이는 불필요한 검색을 줄이고 실행 속도를 향상시킨다.

 

.style.display

: HTML 문서 요소의 CSS 스타일을 조작하기 위한 프로퍼티로, 해당 요소의 display 속성 값을 설정하거나 가져올 수 있다.

 

요소명(ex. quizAnswerResult).style.display : none;

: 해당 요소를 화면에서 숨기는 역할을 수행한다. 요소를 화면에서 숨길 뿐 아니라 해당 요소의 영역도 사라진다.

 

요소명.style.display: block;

:해당 요소를 화면에 보이게 하는 역할을 수행한다.

 

 

 

요소명(ex.quizTitle).innerText

:텍스트 컨텐츠를 가져오거나 설정하기 위한 속성.

특정 HTML 요소의 텍스트 컨텐츠를 읽거나 수정할 수 있다.

특정 class나 id를 가진 요소의 텍스트 컨텐츠를 가져와서 변수에 저장하거나 새로운 텍스트를 할당하여 해당 요소의 내용을 변경할 수 있다.
 
 
 

.addEventListener

:이벤트를 처리하기 위해 사용되는 메서드(Method)이다.

이를 사용하면 HTML 요소에서 발생하는 이벤트 (클릭, 마우스 오버, 키보드 입력 등)을 감지하고 이벤트가 발생하였을 때 실행할 함수를 등록할 수 있다.

 

 

 

quizAnswerConfirm.addEventListener("click", function (){

            quizAnswerResult.style.display = "block";
            quizAnswerConfirm.style.display = "none";
        });

 : quizAnswerConfirm 이라는 요소 (정답확인하기 버튼)을 클릭했을 때 실행될 함수가 등록되어 있다.

등록된 함수는 quizAnswerResult 요소를 다시 화면에 보여주어(display: block; 하여) 정답 결과를 나타내고,  quizAnswerConfirm(정답확인버튼)을 화면에서 사라지게 만든다. (display: none;을 실행시킴)

 

 

 

z-index

:HTML 요소의 쌓이는 순서를 지정하는 CSS 속성이다.

z-index 값이 높을 수록 요소가 위에 쌓이게 된다.

 

또한 z-index는 요소가 겹쳐져 있을 때, 이 값을 설정하여 어떤 요소를 먼저 보여줄지 결정할 수 있다.

만약 요소 두 개가 겹쳐져 있다면 보여주어야 하는 요소의 z-index 값을 높게 설정해 위에 표시되게 한다.

z-index의 값은 정수로 지정된다. 음수 값도 사용할 수는 있다.

값이 같은 경우, HTML 코드 순서에 따라 나중에 작성된 요소가 위에 쌓이게 된다.

 

 

 

visibility

:CSS 속성 중 하나로 HTML 요소를 보이게 하는 속성이다.
이 속성을 지정하면 해당 요소가 회면에 표시된다.
 

visible or hidden

:요소를 화면에 보여주기 위해 wisible을 사용한다.
 반대로 요소가 화면에서 사라지게 할 때 hidden을 사용하며, 사용 시 요소는 화면에서 사라지지만 영역은 유지된다.
 
 
 

animation

:CSS 요소에 애니메이션 효과를 적용하는 속성으로, 이 속성을 사용하면 요소에 지정된 애니메이션 효과가 지정된 속성값에 따라 작동한다.

 

animation: cry 0.1s ease-in 0.25s forwards;

▶ cry

: 애니메이션 이름

 

▶ 0.1s

: 애니메이션의 재생 시간으로, 애니메이션이 한 번 실행될 때 걸리는 시간이다.

 

▶ ease-in

: 애니메이션의 타이밍 함수.  이 함수는 애니메이션의 속도를 조절할 수 있으며, 느리게 시작했다가 점점 빨라지는 타이밍 함수이다.

 

▶ 0.25s

: 애니메이션의 지연 시간 (delay) .

 

▶forwards

:애니메이션이 종료된 후에도 애니메이션의 마지막 프레임을 유지한다.

즉, 애니메이션이 끝난 후에도 요소의 최종 상태를 유지하는 것.

 

 

animation: movetail 0.1s linear infinite alternate forwards;

 

▶linear

:애니메이션의 타이밍 함수로, 이 함수는 애니메이션을 일정한 속도로 실행한다.

 

▶infinite

:애니메이션을 무한 반복하는 함수.

 

▶alternate

:애니메이션을 왕복하는 방향으로 반복한다.

 

 

 

 

 

 

+ Recent posts