Quiz

<div class="quiz__wrap">
    <div class="quiz">
        <h2 class="quiz__type"></h2>
        <h3 class="quiz__question">
            <span class="question__number"></span>
            <span class="question__ask"></span>
        </h3>
        <div class="quiz__view">
            <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 class="quiz__answer">
            <button class="quiz__cunfirm">정답 확인하기</button>
            <div class="quiz__result"></div>
        </div>
    </div>
</div>

<style>
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'DungGeunMo';
    }
    a {
        text-decoration: none;
    }
    body {
        background-color: #f6f6f6;
        background-image:
            linear-gradient(90deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px),
            linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px),
            linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px),
            linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px),
            linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
            linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px),
            linear-gradient(90deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
            linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px),
            linear-gradient(#cdcccc, #cdcccc);
        background-size: 100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
        overflow: hidden;
    }
    /* header */
    #header {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #262626;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        z-index: 10;
    }
    #header::before {
        content: '';
        border: 4px ridge #A3A3A3;
        position: absolute;
        left: 5px;
        top: 5px;
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        z-index: -1;
    }
    #header h1 {
        padding: 3px 0 6px 10px;
    }
    #header h1 a {
        color: #fff;
    }
    #header h1 a:hover {
        color: #A3A3A3;
    }
    #header nav {
        padding-left: 10px;
    }
    #header nav li {
        list-style: none;
        display: inline;
    }
    #header nav li a {
        color: #fff;
        display: inline-block;
        padding: 0 10px;
        transition: all 0.2s;
        border: 1px dashed #fff;
    }
    #header nav li.active a {
        color: #262626;
        background: #fff;
    }
    #header nav li a:hover {
        opacity: 0.5;
    }
    #header nav li a.active {
        background: #000;
        color: #fff;
    }
    /* quiz__wrap */
    .quiz__wrap {
        display: flex;
        align-content: center;
        justify-content: center;
        margin-top: 150px;
    }
    .quiz {
        min-width: 500px;
        background: #fff;
        border: 8px ridge #cacaca;
        margin: 10px;
    }
    .quiz__type {
        background: #cacaca;
        text-align: center;
        font-size: 14px;
        color: #3b3b3b;
        border: 3px ridge #cacaca;
        padding: 3px 0;
        position: relative;
    }
    .quiz__type::before {
        content: '';
        position: absolute;
        left: 2px;
        top: 2px;
        width: 5px;
        height: 5px;
        border: 6px ridge #cacaca;
    }
    .quiz__type::after {
        content: '';
        position: absolute;
        right: 2px;
        top: 2px;
        width: 5px;
        height: 5px;
        border: 6px ridge #cacaca;
    }
    .quiz__question {
        border-top: 6px ridge #cacaca;
        border-bottom: 6px ridge #cacaca;
        padding: 13px 30px;
        font-size: 24px;
        line-height: 1.4;
    }
    .question__number {
        font-family: 'Cafe24Dangdanghae';
        color: #64a30b;
    }
    .question__ask {
        font-family: 'Cafe24Dangdanghae';
    }
    .quiz__view {
        background: #f5f5f5;
    }
    .quiz__answer {
        background: #f5f5f5;
        border-top: 6px ridge #cacaca;
        padding: 10px;

    }
    .quiz__cunfirm {
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #d6d6d6;
        font-family: 'Cafe24Dangdanghae';
        text-shadow: 1px 1px 1px #fff;
        transition: all 0.2s;
    }
    .quiz__cunfirm:hover {
        background: #b3b3b3;
    }
    .quiz__result {
        text-align: center;
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #fff;
        text-shadow: 1px 1px 1px #fff;
        font-family: 'Cafe24Dangdanghae';
        display: none;
    }
    .quiz__infut {
        text-align: center;
        border: 6px ridge #cacaca;
        width: 100%;
        font-size: 22px;
        padding: 13px 20px;
        background: #fff;
        text-shadow: 1px 1px 1px #fff;
        font-family: 'Cafe24Dangdanghae';
        margin-bottom: 10px;
    }

    /* footer */
    #footer {
        margin-top: 237px;
        width: 100%;
        background: #262626;
        text-align: center;
        padding: 20px;

    }
    #footer a {
        color: #ccc;
        font-size: 16px;
    }
    #footer a:hover  {
        opacity: 0.5;
    }
</style>

<script>
    const quizDog = document.querySelector(".quiz__view .dog");
    const quizType = document.querySelector(".quiz__type");          //퀴즈 종류
    const quizNumber = document.querySelector(".question__number");  //퀴즈 번호
    const quizAsk = document.querySelector(".question__ask");        //퀴즈 질문
    const quizCunfirm = document.querySelector(".quiz__cunfirm");    //퀴즈 정답 확인 버튼
    const quizResult = document.querySelector(".quiz__result");      //정답 결과

    // 문제 정보
    const answerType = "HTML";
    const answerNum = 1;
    const answerAsk = "컨텐츠 구조를 정의하는 마크업 언어는 무엇인가요?";
    const answerResult = "HTML";

    // 문제 출력
    quizType.textContent = answerType;
    quizNumber.textContent = answerNum + ". ";
    quizAsk.textContent = answerAsk;
    quizResult.textContent = answerResult

    // 정답 확인
    // 정답 버튼을 클릭하면 정답 확인은 안보이게 / 숨겨진 정답은 보이게
    quizCunfirm.addEventListener("click", () => {
        quizCunfirm.style.display = "none";
        quizResult.style.display = "block";
        quizDog.classList.add("like");
    })
</script>