퀴즈 이펙트

소스보기

Javascript

HTML

CSS

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

<div class="quiz__wrap">
</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);}
}