퀴즈 이펙트

//문제 정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "1",
        answerAsk: "색의 수축, 팽창의 효과에 가장 큰 영향을 주는 요소는?",
        answerChoice: {
            1: "색약",
            2: "명도",
            3: "잔상",
            4: "중량"
        },
        answerResult: "2",
        answerEx: "색의 수축, 팽창의 효과에 가장 큰 영향을 주는 요소는 '명도'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "2",
        answerAsk: "면(plane)에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "폭은 있으나 길이가 없다.",
            2: "이동하는 선의 자취가 면을 이룬다.",
            3: "공간을 구성하는 단위이다.",
            4: "넓이는 있으나 두께는 없다."
        },
        answerResult: "1",
        answerEx: "면에는 길이가 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "3",
        answerAsk: "디자인에서 사용되는 용어 설명으로 잘못된 것은?",
        answerChoice: {
            1: "2차원의 화면이나 형식 위에, 3차원의 공간에 존재하는 형(shape)이나 형태(form)를 표시하는 것을 투시(perspective)라 한다.",
            2: "장소나 위치 또는 방위가 변화되는 과정이나 움직임을 시차(parallax)라고 한다.",
            3: "점진적 변화, 규칙적 단계에 의해 진행되는 변화과정을 그라데이션(gradation)이라고 한다.",
            4: "시각적 영역 안에서 어떤 형이나 형태가 다른 형이나 형태를 부분적으로 덮어 감추어지는 현상을 중첩이라 한다."
        },
        answerResult: "2",
        answerEx: "시차(parallax)란 어떤 물체를 서로 다른 두 지점에서 보았을 때 생기는 방향의 차이를 말합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "4",
        answerAsk: "병원 수술실의 색채계획으로 가장 적당한 배색은?",
        answerChoice: {
            1: "갈색계열",
            2: "무채색계열",
            3: "녹색계열",
            4: "보라색계열"
        },
        answerResult: "3",
        answerEx: "병원 수술실의 색채계획으로 가장 적당한 배색은 '녹색계열'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "5",
        answerAsk: "색입체를 단순화한 각 부분의 명칭이 맞는 것은? (단, A는 입체의 상하, /B는 입체의 가로방향, C는 입체의 둘레를 의미한다.)",
        answerChoice: {
            1: "A-색상, B-채도, C-명도",
            2: "A-채도, B-명도, C-색상",
            3: "A-명도, B-색상, C-채도",
            4: "A-명도, B-채도, C-색상"
        },
        answerResult: "4",
        answerEx: "입체의 상하(A)는 명도, 입체의 가로방향(B)는 채도, 입체의 둘레(C)는 색상입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "6",
        answerAsk: "기계화와 대량생산에 의한 생활용품의 품질 저하에 반대하여 윌리엄 모리스를 중심으로 영국에서 일어난 수공예 부흥 운동은?",
        answerChoice: {
            1: "독일공작연맹운동",
            2: "미술공예운동",
            3: "미래파운동",
            4: "바우하우스"
        },
        answerResult: "2",
        answerEx: "기계화와 대량생산에 의한 생활용품의 품질 저하에 반대하여 윌리엄 모리스를 중심으로 영국에서 일어난 수공예 부흥 운동은 '미술공예운동'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "7",
        answerAsk: "디자인 원리 중 균형(balance)에 해당하지 않는 것은?",
        answerChoice: {
            1: "대칭",
            2: "비례",
            3: "율동",
            4: "주도와 종속"
        },
        answerResult: "3",
        answerEx: "디자인의 기본 원리에는 통일, 강조, 균형, 반복, 비례, 반복, 변화, 조화, 대비, 율동, 리듬, 대칭, 스케일 등이 있고, 균형에 해당하는 것은 대칭(완전한 대칭), 비대칭(숨겨진 균형), 방사형 균형(중심에서 밖으로 퍼짐)이 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "8",
        answerAsk: "디자인의 형식적 요소에 포함되지 않는 것은?",
        answerChoice: {
            1: "형",
            2: "색",
            3: "질감",
            4: "용도"
        },
        answerResult: "4",
        answerEx: "디자인의 형식적 요소는 총 6가지로 형태, 점, 선, 면, 입체, 색이 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "9",
        answerAsk: "다음에 해당하는 디자인의 기본조건은? → 창조는 기존의 디자인을 바탕으로 보다 나은 디자인을 만드는 것이다.",
        answerChoice: {
            1: "합목적성",
            2: "심미성",
            3: "경제성",
            4: "독창성"
        },
        answerResult: "4",
        answerEx: "디자인의 기본조건에는 합목적성, 심미성, 독창성, 경제성, 질서성이 있으며 독창성의 주요 키워드는 디자인의 핵심, 아이디어 독창적, 이미지, 인상적인, 독특함, 개성, 차별성, 문제점 개선 등이 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "10",
        answerAsk: "유채색에서 볼 수 있는 대비로 연속대비라고도 하며, 잔상 효과와 가장 밀접한 관련이 있는 것은?",
        answerChoice: {
            1: "동시대비",
            2: "계시대비",
            3: "채도대비",
            4: "명도대비"
        },
        answerResult: "2",
        answerEx: "유채색에서 볼 수 있는 대비로 연속대비라고도 하며, 잔상 효과와 가장 밀접한 관련이 있는 것은 '계시대비'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "11",
        answerAsk: "그래픽 심벌(symbol)이 가져야 할 조건이 아닌 것은?",
        answerChoice: {
            1: "대중성 및 사용의 편리성",
            2: "구성의 간결성",
            3: "세련된 디자인",
            4: "디자인의 모호성"
        },
        answerResult: "4",
        answerEx: "그래픽 심벌(symbol)이 가져야 할 조건에는 대중성 및 사용의 편리성, 구성의 간결성, 세련된 디자인이 있으며, 디자인이 모호한 것이 아니라 명확해야 합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "12",
        answerAsk: "다음이 설명하고 있는 색의 혼합은? → 혼합된 색의 명도가 혼합 이전의 평균 명도보다 더 높아지는 경우를 말하며, 플러스(Plus)혼합이라고도 한다.",
        answerChoice: {
            1: "감산 혼합",
            2: "가산 혼합",
            3: "중간 혼합",
            4: "회전 혼합"
        },
        answerResult: "2",
        answerEx: "혼합된 색의 명도가 혼합 이전의 평균 명도보다 더 높아지는 경우를 말하며, 플러스(Plus)혼합이라고도 하는 것은 '가산혼합'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "13",
        answerAsk: "다음이 설명하고 있는 디자인 원리는? → 부분과 부분 또는 부분과 전체 사이에 안정된 관련성을 주면서도 공감을 일으켜 성립되는 디자인 원리. 유사(similarity)와 대비(contrast)가 있다.",
        answerChoice: {
            1: "통일",
            2: "변화",
            3: "균형",
            4: "조화"
        },
        answerResult: "4",
        answerEx: "조화는 부분과 부분 또는 부분과 전체 사이에 안정된 관련성을 주면서도 공감을 일으켜 성립되는 디자인 원리입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "14",
        answerAsk: "가산혼합의 3원색 빨강(Red), 초록(Green), 파랑(Blue) 중 빨강(Red)과 초록(Green)의 혼합색으로 알맞은 것은",
        answerChoice: {
            1: "흰색(white)",
            2: "시안(cyan)",
            3: "노랑(yellow)",
            4: "마젠타(matenta)"
        },
        answerResult: "3",
        answerEx: "빨강(Red)과 초록(Green)의 혼합색은 '노랑(yellow)'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "15",
        answerAsk: "감산혼합에 사용되는 Cyan, Magenta, Yellow 의 3원색으로 만들 수 없는 색은?",
        answerChoice: {
            1: "파랑(Blue)",
            2: "흰색(White)",
            3: "빨강(Red)",
            4: "초록(Green)"
        },
        answerResult: "2",
        answerEx: "감산혼합은 섞을수록 어두워지므로 흰색을 만들 수 없습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "16",
        answerAsk: "제품 디자인 과정 중 「완성 예상도」라고도 하며 실물처럼 충실하고 정확히 표현하는 것을 무엇이라 하는가?",
        answerChoice: {
            1: "렌더링(RENDERING)",
            2: "드로잉(DRAWING)",
            3: "스케치(SKETCH)",
            4: "콤바인 페인팅(COMBINE PAINTING)"
        },
        answerResult: "1",
        answerEx: "제품 디자인 과정 중 「완성 예상도」라고도 하며 실물처럼 충실하고 정확히 표현하는 것은 '랜더링'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "17",
        answerAsk: "다음과 가장 관계있는 디자인 원리는? → 여러 개의 흰색바탕 동그라미들 중 하나만 검정바탕 동그라미인 그림",
        answerChoice: {
            1: "조화",
            2: "통일",
            3: "점증",
            4: "강조"
        },
        answerResult: "4",
        answerEx: "강조는 어느 한 부분을 다른 요소들보다 드러나 보이게 하여 다르게 표현하는 것을 말하며 단조로움을 피하기 위함이나 집중시킬때 사용합니다. 강조의 방법으로는 대비, 분리, 배치, 색채에 의한 강조가 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "18",
        answerAsk: "색의 동시대비 중 색상대비에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "명도와 채도가 비슷한 두 가지 이상의 색이 인접해 있을 때 색상의 차이가 커 보이는 현상이다.",
            2: "색상대비는 보색일 경우에 더욱 크게 나타난다.",
            3: "자극이 약한 색상은 자극이 강한 색상에 영향을 받게 된다.",
            4: "색상이 가깝게 인접해 있을수록 대비현상이 약하게 나타나고, 서로 멀리 떨어지면 강하게 나타난다."
        },
        answerResult: "4",
        answerEx: "어떤 색이 다른 색의 영향으로 인하여 실제와는 다른 색으로 변해 보이는 현상을 색의 대비라고 하는데, 인접해 있을수록 대비현상이 강하게 나타나고, 멀리 떨어지면 약하게 나타납니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "19",
        answerAsk: "다음 그림에서 나타나는 착시 현상은? 뮐러 리어 Müller-Lyer 착시의 예로 안쪽으로 모아진 화살표(←→)와 반대로 바깥으로 벌어진 화살표 그림",
        answerChoice: {
            1: "방향의 착시",
            2: "대비의 착시",
            3: "분할의 착시",
            4: "길이의 착시"
        },
        answerResult: "4",
        answerEx: "길이의 착시란 같은 길이지만 조건에 따라 길이가 다르게 보이는 현상을 말합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "20",
        answerAsk: "다음 ( )안에 알맞은 용어는? 보통 보라에서부터 빨강까지의 파장은 380nm에서 780nm의 범위이며, 이 범위는 우리 눈으로 관찰할 수 있기 때문에 이를 () 이라 한다.",
        answerChoice: {
            1: "감마선",
            2: "적외선",
            3: "자외선",
            4: "가시광선"
        },
        answerResult: "4",
        answerEx: "가시광선은 사람의 눈에 보이는 전자기파의 영역입니다. 보통 인간의 눈은 400nm에서 700nm까지의 범위를 감지합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "21",
        answerAsk: "인터넷 검색엔진에 속하지 않는 것은?",
        answerChoice: {
            1: "오페라(Opera)",
            2: "심마니(Simmani)",
            3: "알타비스타(Altavista)",
            4: "구글(Google)"
        },
        answerResult: "1",
        answerEx: "오페라(Opera)는 웹 브라우저 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "22",
        answerAsk: "자바스크립트의 함수 중 사용자로부터 임의의 문자를 입력받기 위한 창을 화면에 띄워 입력한 문자열을 사용할 수 있도록 하는 것은?",
        answerChoice: {
            1: "prompt()",
            2: "eval()",
            3: "confirm()",
            4: "alert()"
        },
        answerResult: "1",
        answerEx: "자바스크립트의 함수 중 사용자로부터 임의의 문자를 입력받기 위한 창을 화면에 띄워 입력한 문자열을 사용할 수 있도록 하는 것은 'promt()'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "23",
        answerAsk: "다음 중 국내 인터넷 역사에서 가장 나중에 이루어진 것은?",
        answerChoice: {
            1: "KT(한국통신)에서 본격적인 상용 접속 서비스 제공",
            2: "연구망에서 인터넷 연결(HANA/SDN : 56kbps)",
            3: "서울대-KIET간 TCP/IP로 SDN구축",
            4: "교육연구망 구성(ARPANet, BITNet과 연결)"
        },
        answerResult: "1",
        answerEx: "서울대-KIET간 TCP/IP로 SDN구축(1982년),교육연구망 구성(ARPANet, BITNet과 연결)(1987년), 연구망에서 인터넷 연결(HANA/SDN : 56kbps)(1990년), KT(한국통신)에서 본격적인 상용 접속 서비스 제공(1994년)"
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "24",
        answerAsk: "개방형 시스템의 상호접속을 위한 참조모델로 ISO에서 제정한 것은?",
        answerChoice: {
            1: "OSI 7 Layer",
            2: "Kermit",
            3: "Proxy",
            4: "Archie"
        },
        answerResult: "1",
        answerEx: "개방형 시스템의 상호접속을 위한 참조모델로 ISO에서 제정한 것은 'OSI 7 Layer'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "25",
        answerAsk: "다음 중 웹 브라우저의 기능이 아닌 것은?",
        answerChoice: {
            1: "웹 페이지 열기",
            2: "자주 방문하는 URL의 기억 및 관리",
            3: "소스파일(HTML) 보기",
            4: "실시간 동영상 캡쳐 및 전송"
        },
        answerResult: "4",
        answerEx: "웹 브라우저에서 GIF, JPG 등의 그래픽 파일과 WAV, AU등의 음성 파일, MPEG, AVI, MOV등의 동영상 파일을 지원하지만 실시간 동영상 캡쳐 및 전송은 할 수 없습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "26",
        answerAsk: "자바스크립트(Javascript)에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "자바스크립트를 지원하는 브라우저만 있으면 모든 운영체제에서 실행된다.",
            2: "자바스크립트는 소스프로그램을 컴파일 한 후 HTML문서에 삽입한다.",
            3: "자바스크립트 객체는 자신의 프로토타입 객체에 있는 프로퍼티를 상속 받는다.",
            4: "클라이언트측 자바스크립트는 HTML문서 내에 적용하여 브라우저를 제어하는데 사용된다."
        },
        answerResult: "2",
        answerEx: "HTML 문서에 JavaScript 삽입 방법은 내부 코드/외부 코드 적용이 있습니다. 내부코드는 script 태그를 이용하는 방법이고, 외부 코드는 JavaScript 파일을 만든 후 문서에 연결하는 방법입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "27",
        answerAsk: "HTML 문서의 시작과 끝을 표시하기 위해 사용되는 태그로 옳은 것은?",
        answerChoice: {
            1: "<T> </T>",
            2: "<body> </body>",
            3: "<html> </html>",
            4: "<link> </link>"
        },
        answerResult: "3",
        answerEx: "HTML 문서의 시작과 끝을 표시하기 위해 사용되는 태그는 '<HTML> </HTML>'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "28",
        answerAsk: "지역 간 또는 국가 간과 같이 지리적으로 완전하게 떨어진 곳을 연결한 통신망은?",
        answerChoice: {
            1: "VAN",
            2: "WAN",
            3: "MAN",
            4: "LAN"
        },
        answerResult: "2",
        answerEx: "지역 간 또는 국가 간과 같이 지리적으로 완전하게 떨어진 곳을 연결한 통신망은 광역네트워크(WAN)입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "29",
        answerAsk: "인터넷 사이트를 방문할 때 1024x768로 최적화 되어 있는 사이트를 방문할 때가 있다. 이 사이트는 전체 화면이 한 눈에 들어오지 않아 스크롤바를 이용하거나 해상도를 높여 한 화면으로 볼 수 있도록 한다. 이때, 해상도를 바꾸지 않고 화면을 확대하는 단축키는?",
        answerChoice: {
            1: "F8",
            2: "F9",
            3: "F10",
            4: "F11"
        },
        answerResult: "4",
        answerEx: "해상도를 바꾸지 않고 화면을 확대하는 단축키는 'F11'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "30",
        answerAsk: "다음이 설명하고 있는 웹 페이지 저작도구는? → 멀티미디어와 애니메이션 제작을 위한 드로잉 전문프로그램. 벡터 방식의 그래픽 처리를 통해 그래픽 파일의 크기를 최적화할 수 있고 웹상에서 실시간 전송 및 재생되는 스트리밍 기법을 통한 빠른 속도를 제공. 다른 멀티미디어 저작도구와 달리 Plug-in 없이도 Active X, Java 기술을 이용하여 실행 가능한 특징을 가지고 있음",
        answerChoice: {
            1: "드림위버",
            2: "자바스크립트",
            3: "플래시",
            4: "포토샵"
        },
        answerResult: "3",
        answerEx: "위의 설명은 '플래시' 관련 설명입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "31",
        answerAsk: "동시 접속자 수가 많아서 서비스 요청에 응답할 수 없는 경우에 발생하는 웹 브라우저 오류메시지는?",
        answerChoice: {
            1: "HTTP 406 Forbidden",
            2: "HTTP 404 Not Found",
            3: "HTTP 500 Internal Server Error",
            4: "HTTP 503 Service Unavailable"
        },
        answerResult: "4",
        answerEx: "동시 접속자 수가 많아서 서비스 요청에 응답할 수 없는 경우에 발생하는 웹 브라우저 오류메시지는 'HTTP 503 Service Unavailable'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "32",
        answerAsk: "DHTML의 구성요소를 옳게 나열한 것은?",
        answerChoice: {
            1: "HTML, CSS, JavaScript",
            2: "HTML, JSS, JavaScript",
            3: "HTML, CSS, JSS, JavaScript",
            4: "HTML, CSS, JSS, JavaScript, VBScript"
        },
        answerResult: "1",
        answerEx: "DHTML의 구성요소를 옳게 나열한 것은 'HTML, CSS, JavaScript'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "33",
        answerAsk: "자원을 해킹(hacking)으로부터 보호하기 위한 방법으로 틀린 것은?",
        answerChoice: {
            1: "조직 내부의 네트워크 컴퓨터들은 공용 IP 주소를 사용하고 외부와 연결되는 컴퓨터에만 개인용 IP 주소를 할당한다.",
            2: "조직 내부의 네트워크를 보호하기 위해 방화벽을 설치하여 네트워크 보안을 강화한다.",
            3: "특정 자원을 사용할 필요가 있는 사용자에게는 필요한 권한만을 할당한다.",
            4: "보안상 문제가 알려진 서비스나 운영체제의 경우 제조사에서 제공하는 패치프로그램을 수시로 적용한다."
        },
        answerResult: "1",
        answerEx: "자원을 해킹(hacking)으로부터 보호하기 위한 방법으로 공용 IP 주소를 사용하는 것은 옳지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "34",
        answerAsk: "TCP/IP 프로토콜에 대한 설명으로 옳은 것은?",
        answerChoice: {
            1: "IP는 에러를 검사하여 에러가 있을 때 송신측으로 재전송을 요구한다.",
            2: "TCP는 통신 경로를 담당한다.",
            3: "TCP/IP 프로토콜이 설치된 컴퓨터에서 인터넷을 이용할 수 있다.",
            4: "TCP/IP는 파일전송 프로토콜로써 재전송 기능이 없다."
        },
        answerResult: "3",
        answerEx: "TCP/IP 프로토콜은 애플리케이션 계층, 전송 계층, 네트워크 계층, 네트워크 인터페이스 계층, 하드웨어입니다. TCP/IP 프로토콜이 설치된 컴퓨터에서 인터넷을 사용할 수 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "35",
        answerAsk: "HTML 태그 종류와 그 기능에 대한 설명으로 옳은 것은?",
        answerChoice: {
            1: "<CENTER></CENTER> : 왼쪽 정렬을 한다.",
            2: "<I></I> : 글자를 이탤릭(Italic)체로 지정한다.",
            3: "<PRE></PRE> : 기본 폰트의 크기를 지정한다.",
            4: "<HN></HN> : 그림을 삽입한다."
        },
        answerResult: "2",
        answerEx: "center태그 안의 요소는 가운데 정렬입니다. pre태그는 미리 서식을 지정한 텍스트를 나타냅니다. hn태그는 주로 본문에 큰 글씨로 제목을 나타낼때에 사용이되는 태그입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "36",
        answerAsk: "검색엔진 ‘네이버’에 대한 설명으로 틀린 것은?(오류 신고가 접수된 문제입니다.)",
        answerChoice: {
            1: "키워드 검색 방식을 사용하고 있다.",
            2: "검색 탭 기능을 지원한다.",
            3: "검색어 배제(exclude) 연산자로 ‘-’를 사용한다.",
            4: "웹 문서와 사이트뿐만 아니라 뉴스, 이미지 검색도 지원한다."
        },
        answerResult: "3",
        answerEx: "네이버는 검색어 배제 연산자로 '!'를 사용합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "37",
        answerAsk: "VRML(Virtual Reality Modeling Language)에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "VRML은 그래픽 기능뿐만 아니라 텍스트, 이미지, 애니메이션, 사운드 등 각종 멀티미디어 데이터를 2차원적 공간에 통합하여 서로상호작용 할 수 있다.",
            2: "VRML 은 상당한 인력과 고급 컴퓨터를 이용한 오랜 시간의 그래픽 렌더링이 필요한 프로그램 언어이다.",
            3: "VRML은 웹 상에 가상공간을 구축할 수 있게 함으로써 원격지의 사용자와 함께 가상공간을 공유할 수 있다.",
            4: "VRML은 HTML과의 결합뿐만 아니라, 기존의 실시간 멀티미디어 전송 기술과 자바 등의 새로운 언어 체계도 수용 할 수 있다."
        },
        answerResult: "1",
        answerEx: "VRML은 3차원 인터렉티브 벡터 그래픽을 표현하는 표준 파일 형식으로, 월드 와이드 웹을 염두에 두고 만들어 졌습니다. 현재는 X3D로 대체되었습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "38",
        answerAsk: "자바스크립트에서 사용자의 특정한 행동에 대해 어떤 처리를 해줄 것인가를 정의하는 것은?",
        answerChoice: {
            1: "event",
            2: "object",
            3: "event handler",
            4: "event provider"
        },
        answerResult: "3",
        answerEx: "자바스크립트에서 사용자의 특정한 행동에 대해 어떤 처리를 해줄 것인가를 정의하는 것은 'event handler'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "39",
        answerAsk: "검색엔진의 유형 중 다른 검색엔진들과 연계하여 검색어를 찾는 방식은?",
        answerChoice: {
            1: "통합형 검색엔진 방식",
            2: "웹 인덱스 검색엔진 방식",
            3: "웹 디렉터리 검색엔진 방식",
            4: "메뉴 검색엔진 방식"
        },
        answerResult: "1",
        answerEx: "검색엔진의 유형 중 다른 검색엔진들과 연계하여 검색어를 찾는 방식은 '통합형 검색엔진 방식' 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "40",
        answerAsk: "동적 HTML에 대한 설명을 틀린 것은?",
        answerChoice: {
            1: "홈페이지를 다이나믹하게 구성하기 위한 기법이다.",
            2: "기존 HTML에 정적인 화면을 만들어 주는 HTML이다.",
            3: "기존의 HTML문서에 CSS 기능을 첨가하였다.",
            4: "기존의 HTML문서에 문서객체모델(DOM) 기능을 첨가하였다."
        },
        answerResult: "2",
        answerEx: "기존 HTML이 정적인 화면을 만들어 주는 것으로 동적 HTML은 CSS 기능을 첨가한 것입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "41",
        answerAsk: "웹 컬러 디자인의 목적과 거리가 가장 먼 것은?",
        answerChoice: {
            1: "정보전달의 목적",
            2: "레이아웃의 목적",
            3: "심미적인 목적",
            4: "상징적인 목적"
        },
        answerResult: "2",
        answerEx: "웹 컬러 디자인의 목적으로는 정보전달, 심미적, 상징적 등이 있습니다. 레이아웃의 목적은 해당하지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "42",
        answerAsk: "경향이나 흐름을 나타내는 말로서 디자인에서 유행추세를 나타내는 것은?",
        answerChoice: {
            1: "트렌드",
            2: "스타일",
            3: "브랜드",
            4: "트레이드"
        },
        answerResult: "1",
        answerEx: "경향이나 흐름을 나타내는 말로서 디자인에서 유행추세를 나타내는 것은 '트렌드'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "43",
        answerAsk: "벡터(Vector)이미지에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "선과 도형으로 그린 이미지를 저장하는 방식이다.",
            2: "단순한 도형의 표현에 적합하다.",
            3: "이미지를 확대하거나 축소해도 손상이 없다.",
            4: "벡터기반 프로그램으로는 photoshop이 있다."
        },
        answerResult: "4",
        answerEx: "photoshop은 비트맵 기반 프로그램입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "44",
        answerAsk: "1인치당 픽셀의 수를 나타내는 단위는?",
        answerChoice: {
            1: "LPI",
            2: "EPI",
            3: "PPI",
            4: "DPI"
        },
        answerResult: "3",
        answerEx: "1인치당 픽셀의 수를 나타내는 단위는 'PPI'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "45",
        answerAsk: "다음이 설명하고 있는 것은? → 기존 HTML의 단점을 개선하여 동적인 웹페이지를 만들 수 있도록 하기 위한 기술. 문서의 각 요소를 하나의 객체로서 위치와 스타일을 지정할 수 있고, 또한 사용자와의 상호작용을 첨가하거나 움직임이 가능함. 자바스크립트를 기반으로 함.",
        answerChoice: {
            1: "CGI",
            2: "JAVA",
            3: "DHTML",
            4: "CSS"
        },
        answerResult: "3",
        answerEx: "위에서 설명하고 있는 내용은 'DHTML'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "46",
        answerAsk: "오려낸 그림을 2차원 평면상에서 한 프레임씩 움직이면서 촬영하는 스톱 애니메이션을 말한다. 클레이 애니메이션이나 인형 애니메이션과 비슷하지만 3차원이 아닌 2차원이라는 점에서 구분되는 애니메이션은?",
        answerChoice: {
            1: "셀 애니메이션",
            2: "종이 애니메이션",
            3: "모래 애니메이션",
            4: "컷 아웃 애니메이션"
        },
        answerResult: "4",
        answerEx: "컷 아웃 애니메이션은 오려낸 그림을 2차원 평면상에서 한 프레임씩 움직이면서 촬영하는 스톱 애니메이션을 말합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "47",
        answerAsk: "내비게이션 디자인(Navigation design) 구조와 관계가 없는 것은?",
        answerChoice: {
            1: "Protocol structure",
            2: "Grid structure",
            3: "Hierarchical structure",
            4: "Sequential structure"
        },
        answerResult: "1",
        answerEx: "protocol은 컴퓨터 내부에서, 또는 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계로 내비게이션 디자인과 관계가 없습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "48",
        answerAsk: "다음 설명과 같은 파일 포맷으로 옳은 것은? → 24비트의 1600만여 가지의 색을 표현할 수 있어 연속적이고 섬세한 색 변화가 필요한 사진 이미지에 많이 쓰인다. 인터넷용은 물론 디지털 카메라와 같은 장비에도 표준적인 파일 포맷으로 주요 사용된다.",
        answerChoice: {
            1: "JPEG",
            2: "GIF",
            3: "PNG",
            4: "TIFF"
        },
        answerResult: "1",
        answerEx: "위 설명의 포맷은 JPEG이며 JPEG는 파일 크기가 작아서 빠르게 전송하고 액세스할 수 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "49",
        answerAsk: "컴퓨터 애니메이션에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "움직임이 없는 무생물이나 상상의 물체에 인위적인 조작을 가해 움직임을 주는 것을 말한다.",
            2: "애니메이션은 라틴어의 아니마투스(Animatus, 생명을 불어 넣다)에서 유래된 말이다.",
            3: "인쇄용 광고 디자인 결과물을 만들어 낸다.",
            4: "일련의 정지된 그림을 빠르게 연속시켜서 보여줌으로써 움직이는 것처럼 착각을 유도한다."
        },
        answerResult: "3",
        answerEx: "애니메이션은 움직임이 없는 것에 움직임을 주는 것이기 때문에 인쇄용과는 맞지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "50",
        answerAsk: "명령어를 일일이 입력하는 번거로움을 없애주며, 사용자들로 하여금 아이콘을 선택하여 원하는 프로그램을 실행할 수 있게 사용되는 컴퓨터 조작기법이 아닌 것은?",
        answerChoice: {
            1: "드래깅",
            2: "포인팅",
            3: "클릭킹",
            4: "더블 클릭킹"
        },
        answerResult: "1",
        answerEx: "드래깅이란 그래픽 사용자 인터페이스를 제공하는 컴퓨터의 화면상에 있는 아이콘이나 기타의 이미지 등을 움직이는 것과 관련되는 용어이며, 마우스가 움직이고 있는 동안 마우스 단추를 누르는 동작을 가리키는데 사용되기도 합니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "51",
        answerAsk: "웹 페이지에 들어갈 그림, 사진, 글자, 음악 등을 종이위에 표현하여 줄거리가 전개되듯이 표현하는 기법은?",
        answerChoice: {
            1: "스토리보드(story board)",
            2: "사이트 맵(site map)",
            3: "레이아웃(layout)",
            4: "내비게이션(navigation)"
        },
        answerResult: "1",
        answerEx: "웹 페이지에 들어갈 그림, 사진, 글자, 음악 등을 종이위에 표현하여 줄거리가 전개되듯이 표현하는 기법은 '스토리보드'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "52",
        answerAsk: "로고(Logo)를 제작하기에 적합한 소프트웨어는?",
        answerChoice: {
            1: "3D MAX",
            2: "Word Processor",
            3: "Edit Plus",
            4: "Illustrator"
        },
        answerResult: "4",
        answerEx: "로고(Logo)를 제작하기에 적합한 소프트웨어는 'illustrator'입니다. illustrator는 벡터 기반의 그래픽 소프트웨어로, 아트웍을 모바일 화면에 맞게 축소하거나 옥외 광고판에 맞게 확대할 수 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "53",
        answerAsk: "동영상 관련 포맷 방식이 아닌 것은?",
        answerChoice: {
            1: "*.wav",
            2: "*.asf",
            3: "*.avi",
            4: "*.rm"
        },
        answerResult: "1",
        answerEx: "*.wav는 비압축 오디오 포맷입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "54",
        answerAsk: "웹에서 타이포를 이용한 애니메이션을 구현할 수 있는 프로그램으로 적절하지 않는 것은?",
        answerChoice: {
            1: "Swish",
            2: "Photoshop",
            3: "Flash",
            4: "Flax"
        },
        answerResult: "2",
        answerEx: "타이포그래피(Typography)는 활자(Type)와 기술(Graphy)를 합친 용어입니다. 활자를 배치하고 배열하고 효과적인 메시지를 전달하는 전반적인 활동을 의미합니다. 타이포를 이용한 애니메이션을 구현할 수 있는 프로그램으로 photoshop은 적절하지 않습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "55",
        answerAsk: "곡선(곡면)이나 사선(사면)을 표현할 때 바탕과 이미지 사이의 경계를 부드럽게 처리해 주는 것은?",
        answerChoice: {
            1: "매핑",
            2: "앨리어싱",
            3: "안티앨리어싱",
            4: "디더링"
        },
        answerResult: "3",
        answerEx: "곡선(곡면)이나 사선(사면)을 표현할 때 바탕과 이미지 사이의 경계를 부드럽게 처리해 주는 것은 '안티엘리어싱'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "56",
        answerAsk: "다음 설명과 같은 모델링 기법은? → 단순한 모양에서 점차적으로 복잡한 형상을 구축해 나가는 기법. 구름이나 바다 물결, 소용돌이, 담배연기, 산, 강 등을 표현하는 기법.",
        answerChoice: {
            1: "프랙탈(Fractal)",
            2: "고체(Solid)",
            3: "표면(Surface)",
            4: "와이어 프레임(Wire Frame)"
        },
        answerResult: "1",
        answerEx: "위 설명과 같은 모델링 기법은'프렉탈(Fractal)'입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "57",
        answerAsk: "바람직한 웹사이트 초기화면구성이라고 볼 수 있는 것은?",
        answerChoice: {
            1: "자료를 테이블화 시켜서 제시하였다.",
            2: "JAVA applet을 많이 사용한다.",
            3: "웹사이트를 홍보할 수 있는 동영상을 게시한다.",
            4: "ActiveX를 많이 사용한다."
        },
        answerResult: "1",
        answerEx: "바람직한 웹사이트 초기화면구성이라고 볼 수 있는 것은 자료를 테이블화 시켜서 제시하는 것입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "58",
        answerAsk: "랜덤 스캔 방식의 화면표시 장치의 특징으로 틀린 것은?",
        answerChoice: {
            1: "그래픽스 명령어를 반복 실행하여 화면에 디스플레이 한다.",
            2: "화상을 이루고 있는 선분을 따라 전자빔을 쏘아 그린다.",
            3: "프레임 버퍼의 크기가 클수록 고화질의 디스플레이가 가능하다.",
            4: "앨리어싱이 발생하지 않으므로 안티앨리어싱 처리가 불필요하다."
        },
        answerResult: "3",
        answerEx: "랜덤스캔은 화면의 임의의 점에서 임의의 점까지에 이르는 직선상으로만 전자빔을 움직이는 방식으로 시작점부터 끝점까지 선을 긋는 것이기 때문에 벡터 스캔이라고도 합니다. 하지만 프레임 버퍼는 화면에 나타날 영상 정보를 일시적으로 저장하는 기억 장치로 면 각 점의 온(on)/오프(off)나 색깔을 비트맵으로 기억하고 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "59",
        answerAsk: "다음 중 홈페이지 제작 및 관리 순서를 옳게 나열한 것은? ㄱ. 홈페이지 제작 ㄴ. 인터넷에 업로드 ㄷ. 자료 수집과 정리 ㄹ. 내용 갱신과 유지보수 ㅁ. 검색 엔진 등록과 홍보 ㅂ. 주제 결졍과 구성도 작성",
        answerChoice: {
            1: "ㄷ→ㄹ→ㄴ→ㅁ→ㅂ→ㄱ",
            2: "ㄷ→ㄹ→ㅁ→ㄴ→ㄱ→ㅂ",
            3: "ㅂ→ㄷ→ㄱ→ㄴ→ㅁ→ㄹ",
            4: "ㅂ→ㄷ→ㄹ→ㄱ→ㄴ→ㅁ"
        },
        answerResult: "3",
        answerEx: "홈페이지 제작 및 관리 순서는 주제 결졍과 구성도 작성 → 자료 수집과 정리 → 홈페이지 제작 → 인터넷에 업로드 → 검색 엔진 등록과 홍보 → 내용 갱신과 유지보수가 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 04회",
        answerNum: "60",
        answerAsk: "컴퓨터 그래픽스에 대한 포괄적인 의미로 가장 옳은 것은?",
        answerChoice: {
            1: "컴퓨터를 이용하여 데이터를 압축하는 기술",
            2: "컴퓨터를 이용하여 데이터 신호를 전달하는 기술",
            3: "컴퓨터를 이용한 정보처리 및 분산하는 기술",
            4: "컴퓨터에 사용되는 모든 이미지와 영상을 다루는 기술"
        },
        answerResult: "4",
        answerEx: "컴퓨터 그래픽스는 컴퓨터를 이용해 실제 세계의 영상을 조작하거나 새로운 영상을 만들어내는 기술을 가리킵니다. 하지만 최근에는 일반적으로 3차원 컴퓨터 그래픽스를 컴퓨터 그래픽스로 부르기도 합니다."
    },
];

const quizWrap = document.querySelector(".quiz__wrap");
let quizScore = "0";

//문제 출력
const updateQuiz = () => {
    const exam = [];

    quizInfo.forEach((question, number) => {
        exam.push(`
            <div class="quiz">
            <span class="quiz__type">${question.answerType}</span>
            <h2 class="quiz__question">
                <span class="number">${question.answerNum}. </span>
                <div class="ask">${question.answerAsk}</div>
            </h2>
            <div class="quiz__view">
                <div class="true">정답입니다!</div>
                <div class="false">틀렸습니다!</div>
                <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">
                <div class="quiz__selects">
                    <label for="select1${number}">
                        <input type="radio" id="select1${number}" class="select" name="select${number}" value="1"> 
                        <span class="choice">${question.answerChoice[1]}</span>
                    </label>                                 
                    <label for="select2${number}">
                        <input type="radio" id="select2${number}" class="select" name="select${number}" value="2"> 
                        <span class="choice">${question.answerChoice[2]}</span>
                    </label>
                    <label for="select3${number}">
                        <input type="radio" id="select3${number}" class="select" name="select${number}" value="3"> 
                        <span class="choice">${question.answerChoice[3]}</span>
                    </label>
                    <label for="select4${number}">
                        <input type="radio" id="select4${number}" class="select" name="select${number}" value="4"> 
                        <span class="choice">${question.answerChoice[4]}</span>
                    </label>
                </div>
            </div>
        </div>
        `);

    });

    exam.push(`
        <div class="quiz__confirm">
            <button class="check">정답 확인하기</button>
            <div class="ex"></div>
        </div>
    `)

    quizWrap.innerHTML = exam.join('');
}
updateQuiz();

//정답 확인
const answerQuiz = () => {
    const quizSelects = document.querySelectorAll(".quiz__selects");    //객관식 보기

    //사용자가 체크한 보기 == 문제 정답
    quizInfo.forEach((question, number) => {
        const userSelector = `input[name=select${number}]:checked`;     //사용자가 체크한 보기
        const quizSelectsWrap = quizSelects[number];
        const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;   //정답체크 하지 않은 것도 확인
        const quizView = document.querySelectorAll(".quiz__view")

        console.log(userAnswer)

        if (userAnswer == question.answerResult) {
            console.log("정답")
            quizView[number].classList.add("like");
            quizScore++;
        } else {
            console.log("오답")
            quizView[number].classList.add("dislike");
            const divBox = document.createElement("div");   //script로 태그 만들기
            quizSelectsWrap.appendChild(divBox).innerHTML = `<p class="result">${question.answerEx}</p>`;      //자식 태그 만들기
        }
    });

    //전체 문제수
    console.log(quizInfo.length)

    //내가 맞힌 수
    console.log(quizScore)

    let Ex = document.querySelector(".quiz__confirm .ex");

    Ex.innerHTML = quizInfo.length + "개 중 " + quizScore + "개 맞았습니다." + "<br>"

    if (quizScore >= 36) {
        Ex.innerHTML += "합격입니다.😍"
    } else {
        Ex.innerHTML += "불합격입니다.😭"
    }
}

//정답 클릭
document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz);

<div class="quiz__wrap">
    <!-- <div class="quiz">
        <span class="quiz__type"></span>
        <h2 class="quiz__question">
            <span class="number"></span>
            <div class="ask"></div>
        </h2>
        <div class="quiz__view">
            <div class="true">정답입니다!</div>
            <div class="false">틀렸습니다!</div>
            <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">
            <div class="quiz__selects">
                <label for="select1">
                    <input type="radio" id="select1" class="select" name="select" value="1"> 
                    <span class="choice"></span>
                </label>                                 
                <label for="select2">
                    <input type="radio" id="select2" class="select" name="select" value="2"> 
                    <span class="choice"></span>
                </label>
                <label for="select3">
                    <input type="radio" id="select3" class="select" name="select" value="3"> 
                    <span class="choice"></span>
                </label>
                <label for="select4">
                    <input type="radio" id="select4" class="select" name="select" value="4"> 
                    <span class="choice"></span>
                </label>
            </div>

            <button class="confirm">정답 확인하기</button>
            <div class="result"></div>
        </div>
    </div> -->
</div>

.quiz__wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 150px;
    flex-wrap: wrap;
}
.quiz {
    max-width: 500px;
    width: 100%;
    background-color: #fff;
    border: 8px ridge #cacaca;
    margin: 10px;
}
.quiz__type {
    background-color: #cacaca;
    text-align: center;
    display: block;
    font-size: 16px;
    border: 3px ridge #cacaca;
    color: #3b3b3b;
    font-family: "DungGeunMo";
    padding: 4px;
}
.quiz__question {
    border-top: 6px ridge #cacaca;
    border-bottom: 6px ridge #cacaca;
    padding: 20px;
    font-family: "Wooridaum";
    line-height: 1.3;
}
.quiz__question .number {
    color: rgb(187, 87, 87);
}
.quiz__question .ask {
    display: inline;
}
.quiz__answer {
    border-top: 6px ridge #cacaca;
    padding: 10px;
    background-color: #f5f5f5;
}
.quiz__answer .confirm {
    border: 6px ridge #cacaca;
    width: 100%;
    font-size: 22px;
    padding: 13px 20px;
    background-color: #b6b6b6;
    font-family: "Wooridaum";
    cursor: pointer;
}
.quiz__answer .result {
    width: 100%;
    font-size: 22px;
    line-height: 1.4;
    padding: 13px 20px;
    border: 6px ridge #cacaca;
    box-sizing: border-box;
    text-align: center;
    font-family: "Wooridaum";
}
.quiz__answer .input {
    width: 100%;
    border: 6px ridge #cacaca;
    font-size: 22px;
    padding: 13px 20px;
    background-color: #fff;
    font-family: "Wooridaum";
    margin-bottom: 10px;  
}
.quiz__view {
    background-color: #f5f5f5;
    font-family: "Wooridaum";
    position: relative;
    overflow: hidden;
}
.quiz__view .true {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color:  rgb(187, 87, 87);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    left: 70%;
    top: 100px;
    opacity: 0;
}
.quiz__view .false {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color:  #fff;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: 70%;
    top: 100px;
    opacity: 0;
}
.quiz__view.like .true {
    opacity: 1;
    animation: wobble 0.6s;
}
.quiz__view.dislike .false {
    opacity: 1;
    animation: wobble 0.6s;
}
.quiz__selects {
    margin: 5px 0;
}
.quiz__selects label {
    display: flex;
}
.quiz__selects label input {
    position: absolute;
    left: -9999px;
}
.quiz__selects label span {
    font-size: 20px;
    line-height: 1.3;
    font-family: "Wooridaum";
    padding: 10px;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
}
.quiz__selects label span::before{
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    margin-right: 15px;
    display: flex;
    flex-shrink: 0;
    box-shadow: inset 0px 0px 0px 4px rgb(187, 87, 87);
    transition: all 0.25s;
}
.quiz__selects label input:checked + span {
    background-color: rgb(244, 202, 202);
}
.quiz__selects label input:checked + span::before {
    box-shadow: inset 0px 0px 0px 10px rgb(187, 87, 87);
}
.quiz__confirm {
    width: 100%;
    text-align: center;
}
.quiz__confirm .check {
    font-size: 22px;
    line-height: 1.3;
    padding: 13px 60px;
    border: 6px ridge #cacaca;
    box-sizing: border-box;
    text-align: center;
    font-family: "Wooridaum";
    cursor: pointer;
    margin: 40px 0;
    transition: background 0.3s;
}
.quiz__confirm .check:hover {
    background: rgba(187, 87, 87, 0.263)
}
@keyframes wobble {
    0%   {transform: translateX(0) rotate(0deg)}
    15%  {transform: translateX(-25%) rotate(-5deg)}
    30%  {transform: translateX(20%) rotate(3deg)}
    45%  {transform: translateX(-15%) rotate(-3deg)}
    60%  {transform: translateX(10%) rotate(2deg)}
    75%  {transform: translateX(-5%) rotate(-1deg)}
    100% {transform: translateX(0) rotate(0deg)}
}

Quiz 객관식(여러 문제) 확인하기 : 점수