퀴즈 이펙트

정답입니다!

틀렸습니다!

소스보기

Javascript

HTML

CSS

//문제정보
const quizInfo = [
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 1,
        answerAsk: "다음 중 디자인의 조건에 해당하지 않는 것은?",
        answerChoice: [
             "대칭",
             "점증",
             "반복",
             "강조"
        ],
        answerResult: "대칭",
        answerEx: "디자인의 원리 : 균형, 비례, 반복, 통일, 강조",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 2,
        answerAsk: "시각적 균형과 가장 거리가 먼 것은?",
        answerChoice: [
             "명암에 의한 균형",
             "경험에 의한 균형",
             "질감에 의한 균형",
             "위치에 의한 균형"
        ],
        answerResult: "경험에 의한 균형",
        answerEx: "경험에 의한 균형은 시각적이지않고 추상적이기 때문이다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 3,
        answerAsk: "미적 대상을 구상하는 부분과 부분의 사이에 질적으로나 양적 으로 모순되는 일 없이 질서가 잡혀 어울리는 것은?",
        answerChoice: [
             "균형",
             "조화",
             "변화",
             "리듬"
        ],
        answerResult: "조화",
        answerEx: "조화란 요소들이 상호 관계를 가지고 균형감이 안정적으로 이루어진 상태.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 4,
        answerAsk: "편집디자인의 구성요소에 해당되지 않는 것은?",
        answerChoice: [
             "포맷",
             "레이아웃",
             "타이포그래피",
             "일러스트레이션"
        ],
        answerResult: "포맷",
        answerEx: "포맷은 파일확장자로서 구성요소에 해당하지 않음.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 5,
        answerAsk: "색의 진출에 대한 설명으로 틀린 것은?",
        answerChoice: [
             "따뜻한 색이 차가운 색보다 더 진출하는 느낌을 준다.",
             "밝은 색이 어두운 색보다 더 진출하는 느낌을 준다.",
             "무채색이 유채색보다 더 진출하는 느낌을 준다.",
             "팽창색이 수축색보다 더 진출하는 느낌을 준다."
        ],
        answerResult: "무채색이 유채색보다 더 진출하는 느낌을 준다.",
        answerEx: "진출색: 난색<따뜻한 색>계, 밝은색, 후퇴색: 한색<차가운 색>계, 어두운 색",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 6,
        answerAsk: "저드(D.B.judd)의 “색채 조화론”에 해당하지 않는 것은?",
        answerChoice: [
             "질서의 원리",
             "모호성의 원리",
             "친근성의 원리 ",
             "유사성의 원리"
        ],
        answerResult: "모호성의 원리",
        answerEx: "저드의 색채 조화의 원리는 질서의 원리, 유사의 원리, 친근감의 원리, 명료성(비모호성)의 원리 등이 있다",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 7,
        answerAsk: "한국산업표준(KS)에 따른 색의 3속성으로 알맞은 것은?",
        answerChoice: [
             "Cyan, Value, Chroma",
             "Hue, Black, Chroma",
             "Hue, Value, Cloudy",
             "Hue, Value, Chroma"
        ],
        answerResult: "Hue, Value, Chroma",
        answerEx: "Hue(색상),Value(명도),Chroma(채도)",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 8,
        answerAsk: "같은 크기의 형을 상, 하로 겹칠 때 위쪽의 것이 크게 보이는 착시현상은?",
        answerChoice: [
             "각도와 방향의 착시",
             "수직 수평의 착시",
             "바탕과 도형의 착시",
             "상방 거리의 과대착시"
        ],
        answerResult: "상방 거리의 과대착시",
        answerEx: "",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 9,
        answerAsk: "디자인 원리 중 동질의 부분이 조합될 때 이루어지는 것은?",
        answerChoice: [
             "유사",
             "대비",
             "대조",
             "점이"
        ],
        answerResult: "유사",
        answerEx: "유사는 같은 설징을 조화시킬 떄 나타나는 것으로 친근감과 부드러움을 주는 반면 단조로울 수 있음",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 10,
        answerAsk: "색광의 혼합에서 색을 혼합하면 할수록 높아지는 색의 속성은?",
        answerChoice: [
             "명도",
             "채도",
             "색상",
             "점도"
        ],
        answerResult: "명도",
        answerEx: "색광의 혼합은 가산혼합에서 쓰이므로 가산혼합은 색이 추가될 수록 색이 밝아지기 때문에 명도가 높아진다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 11,
        answerAsk: "환경 디자인에 속하지 않는 것은?",
        answerChoice: [
             "인테리어 디자인",
             "원예 디자인",
             "가구 디자인",
             "조경 디자인"
        ],
        answerResult: "가구 디자인",
        answerEx: "환경디자인이란 도시의 환경과 관련하여 경관과 조경 등을 디자인하는 분야입니다. 환경디자인은 1번. 2번, 4번이고 3번 가구디자인은 공업디자인중 3차원 입체디자인에 속합니다",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 12,
        answerAsk: "색채를 과학적으로 정리하여 스펙트럼을 7색으로 분리한 사람은?",
        answerChoice: [
             "뉴턴",
             "먼셀",
             "오스트발트",
             "돈더스"
        ],
        answerResult: "오스트발트",
        answerEx: "1666년 뉴턴이 처음으로 프리즘을 통해 태양광선을 빨강, 주황, 노랑, 녹색, 파랑, 남색, 보라로 나누어 관찰한 것이 가시스펙트럼이다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 13,
        answerAsk: "원근에 의한 공간표현으로 색채와 명암을 활용하는 방법은?",
        answerChoice: [
             "직선원근법",
             "대기원근법",
             "과장원근법",
             "다각원근법"
        ],
        answerResult: "대기원근법",
        answerEx: "대기원근법 : 멀리있는 물체는 옅게, 근접해있는 물체는 짙고 선명하게 칠해서 원근감을 표현",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 14,
        answerAsk: "게슈탈트 이론 중 비슷한 모양이 서로 가까이 놓여 있을 때 그 모양들이 동일한 형태의 그룹으로 보이는 경향을 무엇이라고 하는가?",
        answerChoice: [
             "근접성의 법칙",
             "유사성의 법칙",
             "연속성의 법칙",
             "폐쇄성의 법칙"
        ],
        answerResult: "근접성의 법칙",
        answerEx: "근접성의법칙 - 서로 비슷한 조건에서는 가까이 있는 것끼리 무리지어 보인다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 15,
        answerAsk: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?",
        answerChoice: [
             "빨간색",
             "노란색",
             "검정색",
             "녹색"
        ],
        answerResult: "녹색",
        answerEx: "빨강 :식욕 자극, 열, 더위, 건조, 정열, 위험, 혁명, 적극, 애정, 정지, 힘 | 노랑 :신맛, 달콤함, 식욕 돋우는 기능, 광명, 명랑, 상상력, 팽창, 환희, 신경질, 염증 | 녹색 : 상큼한 맛, 쓴맛, 숲, 평화, 휴식, 신념, 지성, 상쾌, 학구적",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 16,
        answerAsk: "다음 중 슈퍼그래픽이 속하는 분야와 가장 관계가 있는 것은?",
        answerChoice: [
             "패턴디자인",
             "제품디자인",
             "환경디자인",
             "의류디자인"
        ],
        answerResult: "환경디자인",
        answerEx: "슈퍼그래픽(Super Graphic)는 1960년대 이후에 나타난 환경 디자인의 유형으로 1960년대 후반부터 유행하였다. 벽체 전체의 디자인으로 건물 외벽에 장식할 수 있고, 그래픽 작업의 건물, 아파트, 공장, 학교 등이 외벽을 미관상 장식해 도시의 경관을 아름답게 한다. 1920년대와 1930년대의 멕시코와 미국의 벽화운동에서 유래되었다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 17,
        answerAsk: "서로 다른 관련이 없어 보이는 요소를 합친다는 의미로 보는 관점을 완전히 다르게 하여 연상되는 점과 관련성을 찾아내어 아이디어를 발상시키는 방법은?",
        answerChoice: [
             "브레인스토밍(Brain storming)법",
             "연상결합(Image association)법",
             "입출력(input - output)법",
             "시넥틱스(Synectics)법"
        ],
        answerResult: "시넥틱스(Synectics)법",
        answerEx: "브레인스토밍 : 자유분방하게 많은 양의 아이디어를 도출하는 방식, 연상결합법 : 관련없는 사건이나 요소로부터 주관적으로 떠오른 정보에서 유사점이나 차이점을 결합시킴으로써 아이디어를 도출하는 방법, 압출력법 : 주어진 문제에 대해 강제로 도달해야하는 지점을 연결시키는 방법, 시넥틱스법 : 언뜻 보기에 관련없는 요소들을 서로 연결시켜 새로운 것을 유추해 내는 방법",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 18,
        answerAsk: "수적 법칙에 의해 생겨난 형태로 규칙적이고 명쾌한 조형적 감정을 유발시키는 형태는?",
        answerChoice: [
             "유기적 형태",
             "기하학적 형태",
             "현대적 형태",
             "조형적 형태"
        ],
        answerResult: "기하학적 형태",
        answerEx: "기하학적은 수학의 한 분야이므로 수적 법칙이라 하면 수학과 관련이 있는 기하학을 생각하시면 됩니다",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 19,
        answerAsk: "먼셀의 표색계에서 색상을 표시하는 기호로 맞는 것은?",
        answerChoice: [
             "C/HV",
             "HC/V",
             "HV/C",
             "CV/H"
        ],
        answerResult: "HV/C",
        answerEx: "먼셀의 표색계는 색의 3속성에 의한 방법이다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 20,
        answerAsk: "윌리엄 모리스의 미술공예운동(Art& Crafts Movement)의 설명으로 틀린 것은?",
        answerChoice: [
             "대량생산제품에 대해 찬성하였다.",
             "양산제품에서의 품질문제를 제기하였다.",
             "미술, 공예, 디자인 간의 차이를 줄임으로써 실용적 디자인을 추구하는 것을 목표로 하였다.",
             "수작업으로 돌아가자는 주장을 하였다."
        ],
        answerResult: "대량생산제품에 대해 찬성하였다.",
        answerEx: "미술공예운동 : 기계의 대량생산으로 제품의 질이 떨어지는것에 반대하여 일어난 운동. 수작업으로 돌아가자는 주장을 하였다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 21,
        answerAsk: "사용자가 특정한 서버에 집중적으로 몰리면 병목현상이 발생하여 성능이 저하된다. 이를 해결하기 위해 FTP 서버의 자료를 다른 곳에 그대로 복사하여, 보다 가까운 위치에서 자료를 전송 받을 수 있도록 하는 것은?",
        answerChoice: [
             "Plug-un",
             "Quick Time",
             "Mirroring",
             "File Server"
        ],
        answerResult: "Mirroring",
        answerEx: "Mirroring Site : 익명 FTP 서비스에 많은 접속자가 몰려 서비스 속도가 느려지는 것을 방지 하기 위한 것으로, 원래이 익명 FTP 서버와 동일한 디렉터리 구조를 가진 복사복 사이트를 가리킨다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 22,
        answerAsk: "HTML 태그에서 “cellpadding” 에 대해 올바르게 설명한 것은?",
        answerChoice: [
             "table 태그에서만 쓰는 속성으로 셀 구분선과 셀 안의 문자간의 여백을 설정한다",
             "table 태그에서만 쓰는 속성으로 셀과 셀 사이의 간격을 설정한다.",
             "table 태그에 삽입하면 테이블의 전체의 높이를 설정한다.",
             "table 태그에 삽입하면 해당 셀의 높이를 설정한다."
        ],
        answerResult: "table 태그에서만 쓰는 속성으로 셀 구분선과 셀 안의 문자간의 여백을 설정한다",
        answerEx: "2번은 cell spacing 이다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 23,
        answerAsk: "연산자 좌우의 검색어를 모두 포함하는 데이터를 찾는 정보검색 연산자는?",
        answerChoice: [
             "OR",
             "NOT",
             "AND",
             "AND NOT"
        ],
        answerResult: "AND",
        answerEx: "OR : 둘 중 어느 하나만 포함되어 있어도 해당 정보 검색, AND : 두가지 키워드 모두 포함되어 있는 정보 검색, NOT : 키워드 정보를 제외하고 검색",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 24,
        answerAsk: "웹페이지 작성 언어들 중 그 특성이 다른 하나는?",
        answerChoice: [
             "ASP",
             "JSP",
             "PHP",
             "JavaScript"
        ],
        answerResult: "JavaScript",
        answerEx: "1,2,3 은 서버 언어 4는 클라이언트 언어입니다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 25,
        answerAsk: "컴퓨터 그래픽의 역사는 컴퓨터의 탄생부터 오늘날 인터넷 시대까지 크게 다섯 단계로 나누어 분류한다. 시대별 발달 과정을 주요 소자별로 바르게 분류한 것은?",
        answerChoice: [
             "진공관 → 트랜지스터 → 집적회로 → 고밀도 집적회로 → SVLSI",
             "트랜지스터 → 진공관 → 집적회로 → 고밀도 집적회로 → SVLSI",
             "트랜지스터 → 집적회로 → 진공관 → 고밀도 집적회로 → SVLSI",
             "진공관 → 집적회로 → 트랜지스터 → 고밀도 집적회로 → SVLSI"
        ],
        answerResult: "진공관 → 트랜지스터 → 집적회로 → 고밀도 집적회로 → SVLSI",
        answerEx: "진공관:1946~1950년대, 트랜지스터시대:1950년대말~1970년대 초, 집적회로:1970년대, 고밀도 집적회로:1980년대, SVLSI:1980년대 후반부터~현재",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 26,
        answerAsk: "다음 마크업 언어 중 가장 나중에 만들어진 것은?",
        answerChoice: [
             "SGML",
             "HTML",
             "XML",
             "XHTML"
        ],
        answerResult: "XHTML",
        answerEx: "SGML IBM에서 1960년대에 개발, HTML 1980년대 초~1990년대 중, XML 1990년대 말, XHTML 2000년",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 27,
        answerAsk: "다음 중 자바스크립트의 이벤트 핸들러에 대한 종류와 설명이 옳지 않은 것은?",
        answerChoice: [
             "onBlur : 대상이 포커스를 잃어 버렸을 때 발생되는 이벤트를 처리",
             "onFocus : 대상에 포커스가 들어왔을 때 발생되는 이벤트를 처리",
             "onMouseOn : 마우스가 대상의 링크나 영역 안에 위치할 때 발생되는 이벤트를 처리",
             "onMouseOut : 마우스가 대상의 링크나 영역 안을 벗어 날 때 발생되는 이벤트를 처리"
        ],
        answerResult: "onMouseOn",
        answerEx: "OnMouseOver가 알맞은 표기이다",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 28,
        answerAsk: "월드 와이드 웹(WWW)서비스를 이용하기 위해 개발된 프로그램으로 인터넷에 연결된 컴퓨터를 탐색하고 원하는 정보를 읽어들여 그 내용을 화면에 표시해 주는 클라이언트 프로그램은?",
        answerChoice: [
             "배너",
             "포털 사이트",
             "웹 브라우저",
             "홈페이지"
        ],
        answerResult: "웹 브라우저",
        answerEx: "웹브라우저는 인터넷상에 연결된 컴퓨터들로부터 탐색하고 모든 종류의 정보를 가져와서 정보를 나타내주는 기능을 가진 프로그램이다",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 29,
        answerAsk: "전용선을 이용하여 인터넷을 접속하려고 한다. 네트워크 환경 설정 시 입력해야 할 내용으로 올바르지 않은 것은?",
        answerChoice: [
             "게이트웨이",
             "서브넷 마스크",
             "접속 전화번호",
             "DNS"
        ],
        answerResult: "접속 전화번호",
        answerEx: "여기서 설명하는 것은 전화선이 아닌 랜선이기 때문에 접속 전화번호는 굳이 필요 없을거 같습니다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 30,
        answerAsk: "다음 중 일반적인 HTML문서의 기본구조로 옳은 것은?",
        answerChoice: [
             "<HTML><HEAD></HEAD><BODY></BODY></HTML>",
             "<HEAD></HEAD><HTML><BODY></HTML></BODY>",
             "<HEAD><HTML></HTML></HEAD><BODY></BODY>",
             "<HEAD></HEAD><HTML><BODY></BODY></HTML>"
        ],
        answerResult: "<HTML><HEAD></HEAD><BODY></BODY></HTML>",
        answerEx: "HTML 로 시작해서 HTML로 끝나는게 답.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 31,
        answerAsk: "VRML을 만들 수 있는 저작도구가 아닌 것은?",
        answerChoice: [
             "Cosmo Worlds",
             "Cosmo Player",
             "VR Creator",
             "3d studio max"
        ],
        answerResult: "Cosmo Player",
        answerEx: "VRML (Virtual Reality Modeling Language; 가상 현실 모델링 언어)는 3차원 인터렉티브 벡터 그래픽을 표현하는 표준 파일 형식으로, 월드 와이드 웹을 염두에 두고 만들어졌다. | Player는 재생 또는 실행 도구이다",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 32,
        answerAsk: "일반적으로 처리기나 CPU에 의해 처리되는 사용자 프로그램, 즉 실행중인 프로그램을 의미하며 작업(Job) 또는 태스크(Task)라고도 하는 것은?",
        answerChoice: [
             "컴파일러(Compiler)",
             "링커(Linker)",
             "로더(Loader)",
             "프로세스(Process)"
        ],
        answerResult: "프로세스(Process)",
        answerEx: "프로세스(Process)는 일반적으로 프로세서(처리기, CPU)에 의해 처리되는 사용자 프로그램, 시스템 프로그램, 즉 실행중인 프로그램을 의미하며, 작업(Job), 태스크(Task)라고도 한다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 33,
        answerAsk: "인물 정보를 대상으로 데이터베이스를 구축하여 전자우편 주소 등의 정보를 제공해 주는 사이트를 일컫는 용어는?",
        answerChoice: [
             "비비시모(Vivisomo)",
             "옐로우페이지(Yellow Page)",
             "화이트페이지(White Page)",
             "옐로우북(Yellow Book)"
        ],
        answerResult: "화이트페이지(White Page)",
        answerEx: "옐로우페이지, 화이트페이지는 미국넘들의 전화번호부 책자 색깔에서 유래된거다., 엘로우 페이지는 업무 중심의 전화번호 책자 이며 화이트 페이지는 인물중심의 책자였던거다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 34,
        answerAsk: "다음 HTML 태그 중 성격이 다른 태그는?",
        answerChoice: [
             "<OL> </OL>",
             "<UL> </UL>",
             "<LI> </LI>",
             "<BR> </BR>"
        ],
        answerResult: "<BR> </BR>",
        answerEx: "1번, 2번, 3번 태그는 목록을 만들때 사용하는 태그들 입니다., br 은 줄바꿈 태그",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 35,
        answerAsk: "라우팅 프로토콜에 해당하지 않는 것은?",
        answerChoice: [
             "BGP",
             "NNTP",
             "OSPF",
             "RIP"
        ],
        answerResult: "NNTP",
        answerEx: "NNTP(Network News Transfer Protocol) 인터넷 뉴스 서비스, 라우팅 프로토콜 : 라우터 간 통신 방식을 규정하는 통신 규약, BGP : 경계 경로 프로토콜, 인터넷에서 주 경로 지정을 담당하는 프로토콜의 한 종류이다. 가장 널리 쓰이는 외부 게이트웨이 프로토콜, OSPF(Open Shortest Path First : 최단 경로 우선 프로토콜, 대기업에서 가장 널리 쓰이는 내부 게이트웨이, 프로토콜RIP(Routing Information Protocol) : UDP/IP 상에서 동작하는 라우팅 프로토콜",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 36,
        answerAsk: "일반적으로 드림위버에서 웹문서에 자바스크립트 소스를 삽입하여 인터렉티브한 페이지를 만들 수 있도록 제공해 주는 것은?",
        answerChoice: [
             "Layer",
             "Behaviors",
             "Form",
             "CSS"
        ],
        answerResult: "Behaviors",
        answerEx: "Behaviors 코드는 클라이언트측 JavaScript 코드입니다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 37,
        answerAsk: "다음 중 도표, 그림, 설계 도면 등의 좌표 데이터를 컴퓨터 내로 정확하게 입력할 수 있는 장치로 주로 설계나 공학용 제도에 사용되는 컴퓨터의 입력 장치는?",
        answerChoice: [
             "디지타이저(Digitzer)",
             "키노트(Keynote)",
             "광펜(Light pen)",
             "접촉 감지 스크린(Touch Screen)"
        ],
        answerResult: "디지타이저(Digitzer)",
        answerEx: "디지타이저를 타블렛이라고 생각하시면 편할것 같습니다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 38,
        answerAsk: "아래 스크립트를 분석한 내용으로 잘못된 것은? oMOver=bgColor=yello oMOut.bgColor=red onClick=white",
        answerChoice: [
             "마우스로 “안녕하세요”를 클릭하면 새로운 팝업창이 열리고, 문자색이 변한다.",
             "“안녕하세요”에 마우스 포인터가 닿으면 배경색이 노란색으로 변한다.",
             "“안녕하세요”에서 마우스 포인터가 멀어지면 배경이 빨간색으로 변한다.",
             "마우스로 “안녕하세요”를 클릭하면 배경이 백색으로 변한다."
        ],
        answerResult: "마우스로 “안녕하세요”를 클릭하면 새로운 팝업창이 열리고, 문자색이 변한다.",
        answerEx: "1번의 경우 onClick 이벤트에 걸려있는 동작은 배경색을 화이트로 변경 하는 것이지 팝업창을 띄우는 것은 없습니다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 39,
        answerAsk: "인터넷에서 두 호스트 시스템과의 연결 검사 또는 특정 호스트의 실행 여부 검사 등에 사용되는 서비스는?",
        answerChoice: [
             "Rlogin",
             "PING",
             "NTP",
             "SNMP"
        ],
        answerResult: "PING",
        answerEx: "핑(Ping)은 TCP/IP 프로토콜을 사용하는 응용 프로그램으로 다른 호스트에 IP 데이터그램이 도착할 수 있는지 검사하는 것을 의미한다. 핑(Ping)이라는 이름은 'Packet Internet Groper'의 약자로, 물체의 위치를 찾는 음파탐지기로부터 유래되었으며 마이크 무스(Mike Muuss)에 의해 개발되었다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 40,
        answerAsk: "웹브라우저의 기능으로 옳지 않은 것은?",
        answerChoice: [
             "웹사이트 접속",
             "정보 검색",
             "사진 합성",
             "인터넷서비스 제공"
        ],
        answerResult: "사진 합성",
        answerEx: "사진합성은 웹브라우저에서가 아닌 포토샵 PSD에서 가능하다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 41,
        answerAsk: "큰 이미지 또는 사진과 같이 컬러 수가 많은 웹 이미지에 적합한 파일 포맷은?",
        answerChoice: [
             "EPS",
             "PSD",
             "JPEG",
             "BMP"
        ],
        answerResult: "JPEG",
        answerEx: "24비트의 1600만여 가지의 색을 표현하며, 웹 용 이미지로 사용된다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 42,
        answerAsk: "다음은 무엇에 관한 설명인가?<br>1. 웹사이트의 전체구조, 화면구성, 콘테츠정보 등을 작성해 보는것이다.<br>2.화면 단위로 삽입될 구성 요소 및 구체적 내용을 정리해 놓는다.",
        answerChoice: [
             "레이아웃",
             "내비게이션",
             "스토리보드",
             "동영상"
        ],
        answerResult: "스토리보드",
        answerEx: "문제에 나옴",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 43,
        answerAsk: "3차원 대상물 표면에 2차원의 이미지를 입히는 과정을 무엇이라고 하는가?",
        answerChoice: [
             "쉐이딩(Shading)",
             "안티 앨리아싱(Anti Aliasing)",
             "텍스처 매핑(Texture Mapping)",
             "필터링(Filtering)"
        ],
        answerResult: "텍스처 매핑(Texture Mapping)",
        answerEx: "텍스처 매핑가상의 3차원 물체의 표면에 2차원 텍스처 묘사를 하거나 색을 칠하는 기법",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 44,
        answerAsk: "인간의 두뇌에 해당하는 것으로 대부분의 계산과 판단을 수행하는 컴퓨터그래픽스 시스템 하드웨어는?",
        answerChoice: [
             "RAM",
             "LAN",
             "CPU",
             "ROM"
        ],
        answerResult: "CPU",
        answerEx: "문제에 나옴",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 45,
        answerAsk: "어느 특정분야에서 우수한 상대를 표적 삼아 성과차이를 비교하여 이를 극복하기 위해 상대의 뛰어난 점을 배우면서 자기혁신을 추구하는 기법을 무엇이라 하는가?",
        answerChoice: [
             "벤치마킹",
             "UI디자인",
             "프로모션",
             "콘셉트개발"
        ],
        answerResult: "벤치마킹",
        answerEx: "벤치에 앉아 마킹하며 배우는 태도 - 우수한 상대를 표적 삼아 성과차이를 비교하여 이를 극복하기 위해 상대의 뛰어난 점을 배우면서 자기혁신을 추구하는 기법",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 46,
        answerAsk: "웹 애니메이션의 시각적인 깜빡임(Flicker) 현상을 줄이기 위한 방법으로 옳은 것은?",
        answerChoice: [
             "모니터의 크기를 최대한 큰 것을 사용한다.",
             "초당 프레임 수를 최대한 높여서 제작한다.",
             "화려한 배색보다는 유사색을 이용하여 제작한다.",
             "고해상도의 원본 이미지를 사용한다."
        ],
        answerResult: "초당 프레임 수를 최대한 높여서 제작한다.",
        answerEx: "웹 애니매이션의 깜빡임 현상을 줄이기 위해서는 FPS (Frame Per Second)를 최대한 높여 제작하는 것이 바람직하죠",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 47,
        answerAsk: "다음과 같은 내비게이션 구조는?<br> 형님 네모<br>[동생네모, 동생네모, 동생네모]<br>[동생네모2, 동생네모2, 동생네모2]",
        answerChoice: [
             "순차 구조",
             "프로토콜 구조",
             "계층 구조",
             "네트워크 구조"
        ],
        answerResult: "계층 구조",
        answerEx: "게층 구초 : 정보가 계층적으로 연결되어 있다. 정보의 양이 많고 정보의 우선순위에 따라 제작할 때 유용함., 순차 구조 : 정보를 순서에 따라 보여주고, 앞/뒤로만 이동이 가능한 선형구조, 네트워크 구조 : 웹 페이지의 정보를 순서 없이 나열한 상태. 초보 사용자에게는 혼동을 야기 할 수 있다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 48,
        answerAsk: "이미지를 선분의 집합이 아니라 픽셀들의 배열 형태로 처리하는 방식은?",
        answerChoice: [
             "랜덤 그래픽스",
             "벡터 그래픽스",
             "래스터 그래픽스",
             "픽셀 그래픽스"
        ],
        answerResult: "래스터 그래픽스",
        answerEx: "문제에 나옴",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 49,
        answerAsk: "웹용으로 이미지를 디자인할 때 고려해야 할 사항으로 가장 거리가 먼 것은?",
        answerChoice: [
             "파일 크기",
             "파일 포맷 형식",
             "이미지의 색상",
             "인쇄 설정"
        ],
        answerResult: "인쇄 설정",
        answerEx: "인쇄는 디자인요소가 아니다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 50,
        answerAsk: "컴퓨터 그래픽스(Graphics)의 장점으로 틀린 것은?",
        answerChoice: [
             "인간의 상상력을 기반으로 자유롭게 표현할 수 있다.",
             "제작물을 수정하는 것이 가능하다.",
             "미세한 부분은 전혀 표현할 수 없다.",
             "명암이나 컬러, 질감을 자유롭게 바꿀 수 있다"
        ],
        answerResult: "미세한 부분은 전혀 표현할 수 없다.",
        answerEx: "미세한 부분은 전혀 표현할 수 있다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 51,
        answerAsk: "세대별 컴퓨터 그래픽스(CG)의 발달과정에서 제 1세대(1946년~1950년대 말)의 특징으로 잘못된 것은?",
        answerChoice: [
             "기본 소자로 진공관을 사용하였다.",
             "세계최초의전자식 디지털 컴퓨터인 에니악(ENIAC)을 발명하였다.",
             "컴퓨터 그래픽의 발전 기반을 마련한 시기이다.",
             "X-Y 플로터가 개발되어 종이 위에 그림을 그릴 수 있게 되었다."
        ],
        answerResult: "컴퓨터 그래픽의 발전 기반을 마련한 시기이다.",
        answerEx: "2세대-트렌지스터:컴퓨터 그래픽스 기반을 구축",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 52,
        answerAsk: "다음은 PhotoShop CS3에서 제작한 것이다. A 이미지를 B 이미지로 만들기 위해 필요한 명령어는?<br> A:👉 B:👈 ",
        answerChoice: [
             "Flip Horizontal",
             "Flip Vertical",
             "Rotate",
             "Scale"
        ],
        answerResult: "Flip Horizontal",
        answerEx: "Flip Horizontal : 좌우로 뒤집기, Flip Vertical : 상하로 뒤집기, Rotate : 돌리기, Scale : 규모(크기)",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 53,
        answerAsk: "웹 그래픽 제작에서 반복되는 배경이미지 제작에 관한 설명으로 가장 거리가 먼 것은?",
        answerChoice: [
             "줄무늬를 배경 이미지로 제작",
             "도형을 이용한 패턴 제작",
             "부드러운 그라데이션 제작",
             "동영상을 배경 이미지로 제작"
        ],
        answerResult: "동영상을 배경 이미지로 제작",
        answerEx: "동영상을 배경 이미지로 제작할 수 없습니다. (용량 문제로 로딩 시간이 길어지기 때문에)",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 54,
        answerAsk: "벡터(vector) 이미지에 대한 설명으로 틀린 것은?",
        answerChoice: [
             "흑백 이미지로부터 트루컬러 이미지까지 다양한 컬러작업이 용이하다.",
             "이미지를 확대 또는 축소, 회전 변환 시키더라도 왜곡이 발생하지 않는다.",
             "점, 선, 면의 좌표 값을 수학적으로 저장하는 방식으로 그림을 표현한다.",
             "로고 제작, 플래시 애니메이션 등 그래픽 프로그램에서 사용한다."
        ],
        answerResult: "흑백 이미지로부터 트루컬러 이미지까지 다양한 컬러작업이 용이하다.",
        answerEx: "1번은 래스터 이미지에 대한 사항이다. 트루컬러란 24비트 이상의 컬러를 사용하는 것을 말한다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 55,
        answerAsk: "웹상에서 반복되는 패턴으로 제작된 배경을 만들고자 할 경우 가장 적절한 방법은?",
        answerChoice: [
             "브라우저 크기에 맞는 이미지를 만들어 배경으로 삽입한다.",
             "패턴을 만들고 <body> 태그 안에 background로 지정한다.",
             "포토샵에서 CMYK 팔레트를 이용하여 jpg 이미지로 저장하여 사용한다.",
             "CSS의 스타일을 이용하여 background의 옵션을 no-repeat 으로 지정한다."
        ],
        answerResult: "패턴을 만들고 <body> 태그 안에 background로 지정한다.",
        answerEx: "1번 브라우저 크기에 맞는 이미지는 반복되지 않습니다., 3번 웹상 화면에 CMYK 팔레트를 사용한 이미지를 쓰지는 않습니다., 4번 no-repeat은 이미지가 반복되지 않도록 하는 옵션입니다.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 56,
        answerAsk: "다음 웹 디자인 과정을 순서대로 올바르게 나열한 것은?<br>a:그림, 동영상, 소리파일 제작<br>b:목표 설정<br>c:웹 사이트에 업로드<br>d:웹 에디터로 작성<br>e:스토리 보드 제작",
        answerChoice: [
             "b-a-d-e-c",
             "b-a-d-c-e",
             "b-e-a-d-c",
             "b-d-a-e-c"
        ],
        answerResult: "b-e-a-d-c",
        answerEx: "문제",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 57,
        answerAsk: "다음 소프트웨어 중 2D 평면 디자인을 할 때 사용하는 소프트웨어로만 나열된 것은?<br>ㄱ오토캐드(AutoCAD)<br>ㄴ일러스트레이터<br>ㄷ하이퍼텍스<br>ㄹ자바스크립트(Javascript)",
        answerChoice: [
             "(ㄱ), (ㄴ)",
             "(ㄷ), (ㄹ)",
             "(ㄱ), (ㄷ)",
             "(ㄴ), (ㄹ)"
        ],
        answerResult: "(ㄱ), (ㄴ)",
        answerEx: "2차원 평면 디자인 소프트웨어 : AutoCAD, Illustrator, Photoshop 등..",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 58,
        answerAsk: "화면을 표현하기 위한 최소 단위이며, 화소라고 불리는 것은?",
        answerChoice: [
             "비트맵(Bitmap)",
             "벡터(Vector)",
             "해상도(Resolution)",
             "픽셀(Pixel)"
        ],
        answerResult: "해상도(Resolution)",
        answerEx: "문제에 나옴",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 59,
        answerAsk: "다음 중 애니메이션에 대한 설명으로 틀린 것은?",
        answerChoice: [
             "움직임이 없는 그림이나 사진 등에 생명이 있는 움직임을 부여하는 기술이다.",
             "라틴어의 아니마투스(Animatus)에서 유래되었다.",
             "연속된 그림을 통하여 계속 이어지게 보이는 2차원만의 영역을 의미한다.",
             "애니메이션에서 사용되는 프레임은 낱개의 정지된 이미지를 말한다."
        ],
        answerResult: "연속된 그림을 통하여 계속 이어지게 보이는 2차원만의 영역을 의미한다.",
        answerEx: "3. 컴퓨터 그래픽의 발달으로 3D애니메이션이 등장하면서부터 애니메이션은 2차원만의 영역이 아니게 됨.",
    },
    {
        answerType: "웹디자인기능사 기출문제 2016년 1회",
        answerNum: 60,
        answerAsk: "서로 근접해 있는 색들의 영향으로 인하여 닮은 색으로 변해 보이는 현상은 ?",
        answerChoice: [
             "잔상효과",
             "동화현상",
             "동시대비",
             "연변대비"
        ],
        answerResult: "동화현상",
        answerEx: "연변대비 : 경계대비라고도 하며 색과 색이 접하는 부분에 강한 대비가 일어나는 현상, 동화현상 : 베졸트 효과로 특정색이 인접되는 색의 영향을 받아 인접색에 가까운 색이 되어 보이는 현상, 잔상효과 : (망막의 피로현상) 계시대비,연속대비와 관련있고 자국에의한 상이 망막에 남아있는 현상",
    }
];

//선택자
const quizQuestion = document.querySelector(".quiz__question"); //문제
const quizSelects = document.querySelector(".quiz__selects"); //객관식보기
const quizType = document.querySelector(".quiz__type"); // 유형
const quizResult = document.querySelector(".quiz__answer .result"); // 해설
const quizConfirm = document.querySelector(".quiz__answer .confirm");
const quizView = document.querySelector(".quiz__view");
let quizCount = 0;
let quizScore = 0;
let mon = [];
// 문제 출력
const updateQuiz = (index) => {
    if(quizInfo.length > index){          
        const questionTag = `
        <span class="number">${quizInfo[index].answerNum}.</span>
        <div class="ask">${quizInfo[index].answerAsk}<div>
        `;
        const choiceTag = `
            <label for="select1">
                <input type="radio" id="select1" class="select" name="select" value="1">
                <span class="choice">${quizInfo[index].answerChoice[0]}</span>
            </label>
            <label for="select2">
                <input type="radio" id="select2" class="select" name="select" value="2">
                <span class="choice">${quizInfo[index].answerChoice[1]}</span>
            </label>
            <label for="select3">
                <input type="radio" id="select3" class="select" name="select" value="3">
                <span class="choice">${quizInfo[index].answerChoice[2]}</span>
            </label>
            <label for="select4">
                <input type="radio" id="select4" class="select" name="select" value="4">
                <span class="choice">${quizInfo[index].answerChoice[3]}</span>
            </label>
    `;
        quizType.innerHTML = quizInfo[index].answerType; //퀴즈 유형
        quizQuestion.innerHTML = questionTag; //번호, 질문
        quizSelects.innerHTML = choiceTag; //문제
        quizResult.innerHTML = quizInfo[index].answerEx; //해설      
        const quizChoice = quizSelects.querySelectorAll(".choice");
        
        // console.log(quizResult);
        quizSelects.classList.remove("asd")
        for(let i=0; i < quizChoice.length; i++){
            quizChoice[i].setAttribute("onclick", "choiceSelected(this)");
        }
        //문제 , 해설 숨기기
        quizResult.style.display = "none";
        quizConfirm.style.display = "none";          
    } else {
        quizSelects.innerHTML = `<span class="choice__result">전체문제수 : ${quizInfo.length} <br> 내가 맞힌 수 : ${quizScore}<br> 
                        점수 : ${Math.round(quizScore * (100/60))} <br>
                        합격여부 : ${Math.round(quizScore * (100/60)) > 60 ? "합격" : "불합격"}<br> 
                        틀린문제 : ${mon}</span>`;
        quizQuestion.style.display = "none";
        quizResult.style.display = "none";
        quizConfirm.style.display = "none";
    }
};
const choiceSelected = (answer) => {
    let userAnswer = answer.textContent;
    let currentAnswer = quizInfo[quizCount].answerResult;
    if(userAnswer == currentAnswer) {
        // console.log("정답");
        quizView.classList.add("like");
        quizScore++;
    } else {
        // console.log("오답");
        quizView.classList.add("dislike");
        quizResult.style.display = "block";
        mon.push(quizInfo[quizCount].answerNum);
    }
    // console.log(quizScore);
    quizSelects.classList.add("asd")
    quizConfirm.style.display = "block";
};
updateQuiz(quizCount);

const answerQuiz = () => {
    quizCount++ ;
    console.log("2."+quizScore);
    updateQuiz(quizCount);
    quizView.classList.remove("like", "dislike");
    if(quizInfo.length -1 == quizCount){
        quizConfirm.textContent = `점수 확인하기`
    }
}
// 문제 출력
quizConfirm.addEventListener("click", answerQuiz)

<div class="quiz__wrap">
    <div class="quiz">
        <sapn class="quiz__type"></sapn>
        <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>
            <div class="result"></div> 
            <button class="confirm">다음문제 보기</button>
        </div>
    </div>
</div>

.quiz__wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 100px;
    flex-wrap: wrap;
}

.quiz {
    max-width: 500px;
    width: 100%;
    background-color: #fff;
    border: 8px ridge #cacaca;
    margin: 10px;
}

.quiz__type {
    background-color: #b7c3d8;
    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: "Cafe24Dangdanghae";
    line-height: 1.3;
}

.quiz__question .number {
    color: #dc496f;
}

.quiz__question .ask {
    display: inline;
    color: var(--black);
}

.quiz__answer {
    border-top: 6px ridge #cacaca;
    padding: 10px;
    background-color: #f5f5f5;
}
.quiz__answer .input {
    border: 6px ridge #cacaca;
    width: 100%;
    font-size: 22px;
    padding: 13px 20px;
    margin-bottom: 10px;
    background-color: #fff;
    font-family: "Cafe24Dangdanghae";
    box-sizing: border-box;
}

.quiz__answer .confirm {
    border: 6px ridge #cacaca;
    width: 100%;
    font-size: 22px;
    padding: 13px 20px;
    background-color: #b7c3d8;
    font-family: "Cafe24Dangdanghae";
    cursor: pointer;
}
.confirm {
    width: 100px;
    text-align: center;
}

.quiz__confirm {
    width: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    font-family: "Cafe24Danggdanghae";
}
.quiz__confirm .check {
    font-size: 22px;
    line-height: 1.3;
    padding: 13px 60px;
    border: 6px ridge #cacaca;
    margin: 40px 0;
    transition: background 0.3s;
}
.quiz__confirm .check:hover {
    background-color: #f7a92be4;
}
.quiz__confirm .ex {
    width: 400px;
    overflow-wrap: break-word;
    display: none;
    font-size: 20px;
    line-height: 1.3;
    padding: 13px 60px;
    border: 6px ridge #cacaca;
    font-family: "Cafe24Danggdanghae";
    margin: 40px 0;
    background-color: #f7a92be4;
}

.quiz__answer .result {
    width: 100%;
    font-size: 22px;
    padding: 13px 20px;
    line-height: 1.3;
    border: 6px ridge #cacaca;
    text-align: center;
    box-sizing: border-box;
    font-family: "Cafe24Dangdanghae";
}

.quiz__selects {
    max-width: 5px 0;;
    
}
.quiz__selects label{
    display: flex;
}

.quiz__selects label input {
    position: absolute;
    left: -9999px;
}
.quiz__selects label span, .choice__result{
    font-size: 20px;
    line-height: 1.3;
    font-family: "Cafe24Dangdanghae";
    padding: 10px 30px 10px 20px;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 5px;
}
.choice__result {
    overflow-wrap: break-word;
    width: 100%;
    display: inline-block;
}


.quiz__selects label span::before {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    flex-shrink: 0;
    box-shadow: inset 0px 0px 0px 3px #62261E;
    transition:  all 0.25s;
    margin-right: 15px;
}
.quiz__selects label input:checked + span{
    background-color: #62261e58;
}
.quiz__selects label input:checked + span::before {
    content: '';
    box-shadow: inset 0px 0px 0px 15px #62261E;
}

.quiz__view {
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}
.quiz__view .true {
    width: 120px;
    height: 120px;
    background-color: #a74d38;
    border-radius: 50%;
    text-align: center;
    line-height: 120px;
    position: absolute;
    left: 70%;
    top: 100px;
    color: #fff;
    opacity: 0;
    font-family: "Cafe24Dangdanghae";
}
.quiz__view .false {
    width: 120px;
    height: 120px;
    background-color: #4f5983;
    border-radius: 50%;
    text-align: center;
    line-height: 120px;
    position: absolute;
    right: 70%;
    top: 100px;
    color: #fff;
    opacity: 0;
    font-family: "Cafe24Dangdanghae";
}
.quiz__view.like .true {
    opacity: 1;
    animation: wobble 0.6s; /* 좌우로 흔들리는 애니메이션 */
}
.quiz__view.dislike .false {
    opacity: 1;
    animation: wobble 0.6s;
}
@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(-2deg);}
    60%  {transform: translatex(10%) rotate(1deg);}
    75%  {transform: translatex(-5%) rotate(-1deg);}
    100% {transform: translatex(0) rotate(0deg);}
}