퀴즈 이펙트5

소스 보기

퀴즈 이펙트 소스를 보고 계십니다.

Javascript

HTML

CSS

// 문제정보
const quizInfo = [
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "1",
        answerAsk: "굿 디자인(good design)을 위한 디자인의 조건에 포함되지 않는 것은?",
        answerChoice: {
            1: "합목적성",
            2: "독창성",
            3: "심미성",
            4: "모방성",
        },
        answerResult: "4",
        answerEx : "디자인의 조건은 합목적성, 경제성, 심미성, 독창성, 질서성이 있습니다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "2",
        answerAsk: "다음이 설명하는 것은? - 주어진 길이를 가장 이상적으로 나누는 비를 말하며 근사값이 약 1.619인 무리수",
        answerChoice: {
            1: "비례",
            2: "황금비율",
            3: "삼각분할",
            4: "프로포션",
        },
        answerResult: "2",
        answerEx : "황금비율(길이를 둘로 나누었을때 같은 비율)"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "3",
        answerAsk: "색입체는 색의 3속성에 따라 합리적으로 배치한 3차원 색상환으로 (㉠)은/는 둘레의 원으로, (㉡)는 중심선으로부터 방사선으로, (㉢)은/는 중심축으로 배치한 것이다.",
        answerChoice: {
            1: "㉠ 색상, ㉡ 채도, ㉢ 명도",
            2: "㉠ 색상, ㉡ 명도, ㉢ 채도",
            3: "㉠ 채도, ㉡ 명도, ㉢ 색상",
            4: "㉠ 명도, ㉡ 채도, ㉢ 색상",
        },
        answerResult: "1",
        answerEx : "색상은 둘레의 원으로, 채도는 중심선으로부터 방사선으로, 명도는 중심축으로 배치한 것이다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "4",
        answerAsk: '입체파(Cubism)의 가장 대표적인 화가는?',
        answerChoice: {
            1: "피카소",
            2: "쿠르베",
            3: "찰스 자보",
            4: "도미에",
        },
        answerResult: "1",
        answerEx : "피카소는 대표적인 입체파 화가이다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "5",
        answerAsk: "컬러 인쇄를 위해 C, M, Y, K 4색의 네거필름으로 만드는 과정을 무엇이라 하는가?",
        answerChoice: {
            1: "색분해",
            2: "색상좌표",
            3: "색도도",
            4: "색 수정",
        },
        answerResult: "1",
        answerEx : "색상좌표 (=rgb), 색도도(색도 좌표를 그림으로 표시한 것),"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "6",
        answerAsk: "데 스틸(De Stijl)에 관한 설명으로 옳지 않은 것은?",
        answerChoice: {
            1: "네덜란드를 중심으로 한 신조형 운동으로 요소주의라고도 불리운다.",
            2: "도스부르크, 몬드리안, 리트벨트 등이 주요인물이다.",
            3: "아르누보의 조형사상에 큰 영향을 주었다.",
            4: "현대의 조형 활동은 인공세계를 상징하고 표현하는데 중점을 두어야 한다고 생각하였다.",
        },
        answerResult: "3",
        answerEx : "아르부노 : 1890년 프랑스와 벨기에를 중심으로 일어난 범유럽식 신 장식 미술운동으로 식물을 모티브로한 추상 형식과 화려한 색채가 특징임."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "7",
        answerAsk: "디자인의 요소 중 선에 대한 특성으로 연결이 잘못 된 것은?",
        answerChoice: {
            1: "고선 - 매력, 우아",
            2: "사선 - 동적, 안정",
            3: "수평선 - 평화, 정지",
            4: "수직선- 희망, 긴장",
        },
        answerResult: "2",
        answerEx : "사선 - 운동, 변화, 불안정"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "8",
        answerAsk: "적용 매체에 따른 디자인의 분류로 옳지 않은 것은?",
        answerChoice: {
            1: "프로덕트 디자인",
            2: "시각디자인",
            3: "기계설계디자인",
            4: "환경디자인",
        },
        answerResult: "2",
        answerEx : "적용 매체에 따라 시각 디자인, 프로덕트(공업) 디자인, 환경 디자인으로 구분됨"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "9",
        answerAsk: "심미성에 대한 설명으로 맞는 것은?",
        answerChoice: {
            1: "아름다움을 느끼는 미적 의식이며 주관적일 수 있다.",
            2: "모든 사람에게 동일한 형태로 나타난다.",
            3: "합리적이며 객관적인 미적 활동이다.",
            4: "국가, 민족, 관습, 시대와 관계없이 동일하게 나타난다.",
        },
        answerResult: "1",
        answerEx : "심미성 : 아름다움을 살펴 찾을 수 있는 성질"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "10",
        answerAsk: "색상의 3원색을 모두 혼합하면 나타나는 색상은?",
        answerChoice: {
            1: "검정",
            2: "노랑",
            3: "흰색",
            4: "자주",
        },
        answerResult: "3",
        answerEx : "3원색 : 빨,노,청/ 이색들을 합치면 흰색이 됩니다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "11",
        answerAsk: "시각적 또는 촉각적으로 느껴지는 물체 표면에 대한 느낌을 의미하는가?",
        answerChoice: {
            1: "공간",
            2: "점이",
            3: "질감",
            4: "시간",
        },
        answerResult: "3",
        answerEx : "시각적 또는 촉각적으로 느껴지는 물체 표면에 대한 느낌은 '점이'이다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "12",
        answerAsk: "디자인의 원리에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "통일은 조화로운 형, 색, 질감이 공통된 특징을 갖고 있다.",
            2: "대칭은 균형의 전형적인 구성형식이며 좌우대칭, 방사대칭이 있다.",
            3: "반복은 동일한 요소나 대상 등을 두 개 이상 나열시켜 율동감을 표현하는 것으로 시각적으로 힘의 강약효과가 있다.",
            4: "조화는 일정한 방향을 유지하나 크기와 형태가 다른 경우를 의미한다.",
        },
        answerResult: "4",
        answerEx : "조화 : 요소들이 각자 분리되지 않고 각 요소가 통일되게 해주는 요소"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "13",
        answerAsk: "디자인의 표현 요소가 아닌 것은?",
        answerChoice: {
            1: "점, 선, 면",
            2: "방향, 공간",
            3: "형태, 크기",
            4: "흔적, 영역",
        },
        answerResult: "4",
        answerEx : "조형의 기본요소는 점, 선, 면,입체, 형태, 색채, 질감, 빛, 음영, 공간 등을 들 수 있다.이 요소들은 서로 밀접한 관계를 가지면서 디자인 실체를 형성하는 역활을 하게 된다. "
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "14",
        answerAsk: "과거부터 전해 내려와 습관적으로 사용하는 색 하나하나의 색명을 무엇이라 하는가?",
        answerChoice: {
            1: "일반색명",
            2: "계통색명",
            3: "관용색명",
            4: "특정색명",
        },
        answerResult: "3",
        answerEx : "과거부터 전해 내려와 습관적으로 사용하는 색 하나하나의 색명은  '관용색명'이다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "15",
        answerAsk: "디자인의 기본 요소 중 형과 형태에 관한 설명으로 틀린 것은?",
        answerChoice: {
            1: "기본 형태에는 점, 선, 면, 입체가 있다.",
            2: "형태는 일정한 크기, 색채, 질감을 가진다.",
            3: "형에는 현실적 형과 이념적 형이 있다.",
            4: "이념적 형은 그 자체만으로 조형이 될 수 있다.",
        },
        answerResult: "4",
        answerEx : "이념적 형태 : 인간이 생각하는 순수 추상 형태 점, 선, 면, 입체 등의 추상적인 형태"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "16",
        answerAsk: "서로 반대되는 색을 혼합하여 원래의 색보다 뚜렷해지고 채도가 높아 보이는 현상을 이용한 대비는?",
        answerChoice: {
            1: "보색 대비",
            2: "한난 대비",
            3: "동시 대비",
            4: "색상 대비",
        },
        answerResult: "1",
        answerEx : "2. 한난대비 :따뜻한 색은 더 따뜻하게 차가운 색은 더 차갑게 보이게 하는 현상 <br> 3. 동시대비 : 동시대비는 화면에 두 가지 이상의 색을 동시에 비교 해 볼 때 색들이 실제의 색과 다르게 보이는 현상<br> 4. 색상대비 : 일정한 색이 인접한 색의 영향을 받아서 색상이 달라져 보이는 현상"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "17",
        answerAsk: "웹에 사용할 이미지에 대한 설명으로 맞는 것은?",
        answerChoice: {
            1: "이미지는 최대한 고해상도의 이미지를 사용한다.",
            2: "이미지의 기본단위는 ㎝ 이다.",
            3: "미지는 CMYK 모드를 사용한다.",
            4: "주로 JPG, GIF 포맷의 이미지를 사용한다.",
        },
        answerResult: "4",
        answerEx : "이미지는 jpg, gif 이미지를 사용하는게 주다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "18",
        answerAsk: "영과 헬름홀츠가 처음으로 발표한 학설이고 다른 색광을 혼합해서 다시 원색을 만들 수 있으며 색광의 3원색이 RGB혼합, 혼합할수록 밝아지는 혼합, 플러스 혼합이라고도 하는 이것은?",
        answerChoice: {
            1: "감산 혼합",
            2: "가산 혼합",
            3: "병치 혼합",
            4: "중간 혼합",
        },
        answerResult: "2",
        answerEx : "1. 감산혼합: 색의 3원색을 섞어 색을 만드는 방식<br> 2. 가산 혼합 : 빛의 삼원색으로 색을 만드는 방식<br>3.병치혼합 : 두 가지 이상의 작은 색 점은 촘촘히 배치하였을 때 멀리에서 보면 혼색되어 보이는 색 혼합 방식<br> 4. 중간혼합 : 색을 배치하거나 물리적으로 힘을 주어 색이 섞인 듯 보이게 하는 혼합 방식 "
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "19",
        answerAsk: "배색의 조건에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "사물의 용도나 기능에 부합되는 배식을 해야 한다.",
            2: "색이 주는 심리적 효과를 고려해야 한다.",
            3: "사용자의 특성 보다는 색채 계획자의 특성에 맞추어 배색 한다.",
            4: "환경적 요인을 충분히 고려하여 배색 한다.",
        },
        answerResult: "3",
        answerEx : "사용자의 특성에 맞춰 배색합니다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "20",
        answerAsk: "무성한 초록 나뭇잎들 사이에 핀 빨간 꽃과 관련 있는 조형의 원리는?",
        answerChoice: {
            1: "반복",
            2: "율동",
            3: "점이",
            4: "강조",
        },
        answerResult: "4",
        answerEx : "1. 반복 : 화면 내에 특정한 요소를 지속적으로 반복시킴 <br> 2. 율동 : 동일한 요소나 대상이 일정한 간격을 두고 반복적으로 배열되어 점점 팽창하거나 수축되어 나타나는 것 <br> 3. 점이 : 가운데를 중심으로 선이 밖으로 팽창하여 나선형으로 돌아가며 나타나는 효과"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "21",
        answerAsk: "웹페이지에 삽입할 수 있는 이미지 형식이 아닌 것은?",
        answerChoice: {
            1: "PNG",
            2: "JPG",
            3: "PCX",
            4: "GIF",
        },
        answerResult: "3",
        answerEx : "PCX는 색상 픽셀을 사용하여 이미지를 표시하는 래서트이미지파일 유형입니다. 초창기 이미지 포맷으로 현재는 잘 안쓰입니다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "22",
        answerAsk: "웹에서 하이퍼텍스트 문서 전송을 위한 통신 규약은?",
        answerChoice: {
            1: "HTTP",
            2: "TELNET",
            3: "USENET",
            4: "FTP",
        },
        answerResult: "1",
        answerEx : "HTTP는 HyperText Transfer Protocol의 약자로 웹상에서 파일을 주고받기 위해 필요한 하이퍼텍스트 전송 규약"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "23",
        answerAsk: "TCP/IP 프로토콜 중 IP 주소를 물리적인 주소로 변환해 주는 조수변환 프로토콜은?",
        answerChoice: {
            1: "ARP(Address Resolution Protocol)",
            2: "RARP(Reverse Address Resolution Protocol)",
            3: "ICMP (Internet control message protocol)",
            4: "IGMP(Internet group management protocol)",
        },
        answerResult: "1",
        answerEx : "2. IP호스트가 자신의 물리 네트워크 주소는 알지만 ip주소를 모르는 경우 요청하기 위해 사용합니다. <br> 3. ICMP는 오류를 처리하고 IP 메시지를 제어합니다<br> 4. 서브넷 간에 멀티 캐스트 패킷의 목적지를 관리하기 위한 프로토콜입니다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "24",
        answerAsk: "인터넷 익스플로러 7.0에서 사용자에 대한 등급을 제한하여 폭력, 음란 사이트로부터 보호를 목적으로 하기 위해 [도구]→[인터넷 옵션]에서 선택해야 하는 메뉴는?",
        answerChoice: {
            1: "일반",
            2: "보안",
            3: "고급",
            4: "내용",
        },
        answerResult: "4",
        answerEx : "일반 : 처음 실행할 때 처음으로 접속되는 시작 페이지를 설정할 수 있습니다. <br> 보안 : 위험 가능성이 있거나 악성 온라인 콘텐츠로부터 보호하기 위한 옵션을 설정합니다. 정답은 내용입니다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "25",
        answerAsk: "IPv4에서 192.168.128.64 주소는 어느 클래스에 속하는가?",
        answerChoice: {
            1: "클래스 A",
            2: "클래스 B",
            3: "클래스 C",
            4: "클래스 D",
        },
        answerResult: "3",
        answerEx : "	<문제 해설><br>A 클래스 :     1.0.0.1 ~ 127.255.255.254<br>B 클래스 : 128.0.0.1 ~ 191.255.255.254<br>C 클래스 : 192.0.0.1 ~ 223.255.255.254<br>D 클래스 : 224.0.0.0 ~ 239.255.255.255<br>E 클래스 : 240.0.0.0 ~ 254.255.255.254"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "26",
        answerAsk: "다음 중 인터넷 서비스의 종류와 관련 서버가 옳게 연결된 것은?",
        answerChoice: {
            1: "전자우편(E-mail) 서비스 - Proxy 서버",
            2: "파일전송(FTP) 서비스 - DNS 서버",
            3: "월드와이드웹(WWW) 서비스 - Web 서버",
            4: "텔넷(Telnet) 서비스 - SMTP 서버",
        },
        answerResult: "3",
        answerEx : "월드와이드웹은 인터넷을 통해 접근 가능한 공용 웹페이지의 상호연결 시스템이다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "27",
        answerAsk: "하나의 건물 내 또는 캠퍼스내의 소규모 네트워크 통신망을 의미하는 것은?",
        answerChoice: {
            1: "VAN",
            2: "WAN",
            3: "LAN",
            4: "MAN",
        },
        answerResult: "3",
        answerEx : "VAN : 부가가치통신망(부가가치통신망 상버자가 가치창출을 위해 구축한 네트워크)<br> WAN : 광역통신망(국가, 대륙 등 넓은 지역을 연결하는 네트워크)<br>MAN : 도시권 통신망(큰 도시 또는 캠퍼스에 퍼져있는 컴퓨터 네트워크)"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "28",
        answerAsk: "인터넷을 통해 주고 받는 내용을 캐시에 저장해 놓았다가 동일한 자료의 송수신이 발생하는 경우 이를 되풀이 하지 않게 함으로써 속도를 향상시키며 이 서버의 기능을 통해 보안 문제를 해결할 수도 있는 이것은?",
        answerChoice: {
            1: "DNS 서버",
            2: "Gateway 서버",
            3: "HTTP 서버",
            4: "Proxy 서버",
        },
        answerResult: "4",
        answerEx : "클라이언트 대신에 인터넷상의 다른 서버에 접속하는 서버를 말합니다. 클라이언트가 외부에 접근 요구를 했을 경우, 클라이언트를 대신해서 인터넷상의 다른 www서버나 FTP서버 등에 접근하는 서버를 말합니다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "29",
        answerAsk: "검색엔진을 이용한 정보검색의 설명으로 틀린 것은?",
        answerChoice: {
            1: "한 단어의 검색 보다는 OR 연산자를 이용한 구체적인 검색으로 검색내용을 최대화하는 것이 효율적이다.",
            2: "고유명사는 그 단어 자체를 국한하여 검색하기 때문에 좋은 키워드가 될 수 있다.",
            3: "검색 결과에 대한 신뢰도는 절대적인 것은 아니다.",
            4: "웹에서 찾기 어려운 자료는 메일링 리스트나 뉴스그룹(UseNet) 등을 검색하는 것도 좋은 방법이다.",
        },
        answerResult: "1",
        answerEx : "or 연산자는 두개의 키워드중에 한가지만이라도 포함되어잇으면 다표시하기때문에 구체적인 검색으로는 틀린내용이다 오히려 and 를이용한검색이 더구체적이다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "30",
        answerAsk: "다음 중 데이터 전송 속도를 나타내는 단위로 틀린 것은?",
        answerChoice: {
            1: "bps",
            2: "dpi",
            3: "baud",
            4: "cps",
        },
        answerResult: "2",
        answerEx : "DPI[Dot Per Inch] 해상도 단위,화면 1인치당 몇 개의 도트(점)이 들어가는지를 말한다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "31",
        answerAsk: "도메인 네임은 컴퓨터가 속한 기관이나 국가에 따라서 계층적으로 구성되어 있다. 이러한 인터넷 주소 형식에서 마지막 부분은 항상 최상위 도메인을 나타낸다. 다음 중 최상위 도메인이 아닌 것은?",
        answerChoice: {
            1: "ac",
            2: "com",
            3: "gov",
            4: "kr",
        },
        answerResult: "1",
        answerEx : "ac-교육기관<br> com - 영리 목적의 기업과 기관 <br> gov-미국 연방정부기관 <br>kr-한국"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "32",
        answerAsk: "기존의 단어중심 검색방법과는 달리 문장 단위로 검색함으로써 좀 더 정확도를 높이는 검색방법은?",
        answerChoice: {
            1: "키워드 검색",
            2: "자연어 검색",
            3: "이미지 검색",
            4: "색인 검색",
        },
        answerResult: "2",
        answerEx : "자연어 검색은 일상적인 문장으로 입력해도 검색을 해주는 기능이며 네이버에서 지원함"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "33",
        answerAsk: "자바스크립트의 내장함수 중 문자열로 입력된 수식을 계산하여 주는 함수는?",
        answerChoice: {
            1: "String",
            2: "parselnt",
            3: "confirm",
            4: "eval",
        },
        answerResult: "4",
        answerEx : "eval함수는 일부 프로그래밍 언어에서 제공하는 함수의 일종이다. 문자열을 입력 받아 그 문자열을 expression으로 처리한 후 결과값을 반환하는 함수이다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "34",
        answerAsk: "분신, 화신이라는 의미로 채팅, 온라인 게임 등 네트워크 환경에서 자신을 대신하여 커뮤니케이션에 참여하는 가상의 그림 또는 아이콘을 뜻하는 인터넷 용어는?",
        answerChoice: {
            1: "아바타",
            2: "쿠키",
            3: "포털",
            4: "허브",
        },
        answerResult: "1",
        answerEx : "정답은 아바타이다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "35",
        answerAsk: "다음 중 웹 브라우저의 기능이 아닌 것은?",
        answerChoice: {
            1: "웹 페이지 열기 및 저장",
            2: "자주 방문하는 URL의 기억 및 관리",
            3: "소스파일(HTML) 보기",
            4: "실시간 동영상 캡처 및 전송",
        },
        answerResult: "4",
        answerEx : "동영상 캡쳐 및 전송은 웹브라우저에서 지원하는 기능이 아니다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "36",
        answerAsk: "HTML의 특징으로 틀린 것은?",
        answerChoice: {
            1: "HTML은 Markup 언어이다.",
            2: "HTML 문서는 ASCII 코드로 구성된 일반적인 텍스트 파일이다.",
            3: "HTML 문서는 사용자가 정의한 태그(tab)를 이용해 작성될 수 있다.",
            4: "HTML은 컴퓨터 시스템이나 운영체제에 독립적이다.",
        },
        answerResult: "3",
        answerEx : "사용자가 정의한 태그는 없다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "37",
        answerAsk: "OSI 7계층 구조를 하위 계층부터 상위 계층까지 순서대로 나열한 것은?",
        answerChoice: {
            1: "물리계층 → 데이터링크계층 → 세션계층 → 네트워크계층 → 전송계층 → 응용계층 → 표현계층",
            2: "물리계층 → 데이터링크계층 → 네트워크계층 → 전송계층 → 세션계층 → 응용계층 → 표현계층",
            3: "물리계층 → 데이터링크계층 → 네트워크계층 → 전송계층 → 세션계층 → 표현계층 → 응용계층",
            4: "전송계층 → 물리계층 → 데이터링크계층 → 네트워크계층 → 세션계층 → 표현계층 → 응용계층",
        },
        answerResult: "3",
        answerEx : "3번이 정답"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "38",
        answerAsk: "Java script의 설명으로 틀린 것은?",
        answerChoice: {
            1: "소스코드가 HTML 문서 내에 포한된다.",
            2: "변수 타입 선언 없이 사용이 가능하다.",
            3: "반드시 플랫폼에 종속적으로 사용된다.",
            4: "객체지향적인 스크립트 언어이다.",
        },
        answerResult: "3",
        answerEx : "플랫폼에 종속적으로 사용되지는 않는다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "39",
        answerAsk: "다음 자바 스크립트의 연산자 중 우선순위가 가장 높은 것은?",
        answerChoice: {
            1: "[]",
            2: "++",
            3: "%",
            4: "!",
        },
        answerResult: "1",
        answerEx : "[]는 우선순위가 가장 높다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "40",
        answerAsk: "검색엔진에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "검색엔진은 자체에 등록된 사이트만을 대상으로 정보를 검색한다.",
            2: "검색엔진 종류에는 주제별 검색엔진, 일반 키워드형 검색엔진 및 메타 검색엔진 등이 있다.",
            3: "일반 키워드형 검색엔진은 주제어 또는 검색어를 입력하여 원하는 정보를 찾는다.",
            4: "주제별 검색엔진은 계층적인 메뉴를 따라가며 검색할 수 있다.",
        },
        answerResult: "1",
        answerEx : "메타 검색 엔진은 키워드 검색 쿼리를 전송하면 서버가 이를 받아 미리 지정한 포털 사이트들에 쿼리를 전송하여 각 포털 사이트의 검색결과를 받아 사용자에게 한번에 보여주는 엔진이자, 검색 도구이다. "
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "41",
        answerAsk: "전통적인 셀 애니메이션의 특수한 기법으로 실제 장면을 촬영한 실사 필름 위에 특정 인물이나 사물을 투명 종이(셀)에 직접 그림을 그리고 채색하는 컴퓨터 애니메이션 기법은?",
        answerChoice: {
            1: "로토스코핑(Rotoscoping)",
            2: "컬러 사이클링(Color cycling)",
            3: "모핑(Morphing)",
            4: "모션 트위닝(Motion Tweening)",
        },
        answerResult: "1",
        answerEx : "1.로토스코핑-실사에 있는 특정 인물,사물을 한프레임씩 베껴서 원본과 합성하여 제작<br>2.컬러사이클링-비디오 기법중 색을 바꾸면서 움직임으로 제작<br>3.모핑-하나의 이미지를 다른이미지로 연속적으로 변형하여 제작<br>4.모션트위닝-플래시 기법중 인스턴스의 처음과 끝에 위치하여 크기,색상,회전등을 하는 중간단계를 자동으로 연결하여 제작"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "42",
        answerAsk: "웹 사이트 제작에서 경쟁사의 웹 사이트를 분석하는 이유로 틀린 것은?",
        answerChoice: {
            1: "해당 분야의 인터넷 시장을 파악 한다.",
            2: "경쟁 사이트들을 분석하여 자신의 사이트 경쟁력을 제고 한다.",
            3: "인터넷 시장의 흐름을 이해한다.",
            4: "웹 사이트 제작에 필요한 콘텐츠를 얻는다.",
        },
        answerResult: "4",
        answerEx : "경쟁사의 웹사이트를 분석해서 콘텐츠를 얻을 순 없다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "43",
        answerAsk: "일반적으로 웹디자이너가 홈페이지에 적용할 색을 설계할 때 고려해야 할 사항으로 거리가 먼 것은?",
        answerChoice: {
            1: "상식적인 수준을 따르는 것이 좋다.",
            2: "보색 사용은 자제한다.",
            3: "배경색과 배경무늬는 심플한 것이 좋다.",
            4: "일관성 보다 다양한 색상을 고려하여 적용한다.",
        },
        answerResult: "4",
        answerEx : "다양한 색상을 고려하기보단 일관된 색상을 고려한다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "44",
        answerAsk: "벡터(Vector) 방식에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "선과 도형으로 그린 이미지를 저장하는 방식이다.",
            2: "단순한 도형의 표현에 적합하다.",
            3: "이미지를 확대하거나 축소해도 손상이 없다.",
            4: "벡터기반 프로그램으로는 photoshop이 있다.",
        },
        answerResult: "4",
        answerEx : "벡터기반 프로그램은 일러스트가 있다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "45",
        answerAsk: "페이지 수가 많고, 담고 있는 정보가 복잡한 웹페이지 일수록 그 구성과 형태를 얼마나 잘 체계화하고, 적절한 장소에 위치시키느냐에 따라 쉬운 정보검색을 할 수 있다. 이를 가능하게 하는 디자인 작업은?",
        answerChoice: {
            1: "스토리보드",
            2: "시나리오",
            3: "내비게이션 디자인",
            4: "스토리텔링",
        },
        answerResult: "3",
        answerEx : "1. 영화 시퀀스를 개별적인 프레임이나 패널로 구분해 시각적으로 정리해 놓은 것을 말합니다<br> 2. 소설이나 시·희곡과 같은 문학적 장르로 보는 분류적 의미와 영화의 촬영대본<br> 4. 본질적인 정보 전달 방식"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "46",
        answerAsk: "렌더링 계산시간이 많이 걸리고 오브젝트의 각점에 전달되는 빛의 양이 계산되어 부드러운 곡선표현에 적합하며, 정규 벡터 보간법이라고도 불리는 이 음영 처리 기법은?",
        answerChoice: {
            1: "플랫 쉐이딩(Flat Shading)",
            2: "퐁 쉐이딩(Phone Shading)",
            3: "메탈 쉐이딩(Metal Shading)",
            4: "고러드 쉐이딩(Gouraud Shading)",
        },
        answerResult: "2",
        answerEx : "플랫 쉐이딩: 음영색만으로 면 전체를 칠하는 방법으로 가장 단순함<br.메탈 쉐이딩: 금속 질감을 위한 표면의 표현<br>고러드 쉐이딩: 인접된 면 색상이 단계적으로 부드럽게 표현되며 플랫 쉐이딩보다 사실적임"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "47",
        answerAsk: "플래시에서 맨 앞과 맨 끝 키 프레임에만 변화를 주면 중간 과정을 만들어 주는 것을 무엇이라고 하는가?",
        answerChoice: {
            1: "Motion",
            2: "Tweening",
            3: "Transform",
            4: "Swapping",
        },
        answerResult: "2",
        answerEx : "정답은 2번이다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "48",
        answerAsk: "웹디자인 프로세스에 관한 내용으로 틀린 것은?",
        answerChoice: {
            1: "디자인 스타일링이란 컨셉(concept)에 맞추어 아이디어를 수집, 발전, 결정하는 것을 말한다.",
            2: "디자인 발의란 어떤 사이트를 어떻게 만들 것인가에 대한 의견제시 과정이다.",
            3: "디자인 개발단계에서는 인력을 적재적소에 분배한다.",
            4: "디자인 조사 및 분석 단계에서는 컬러시스템, 그리드시스템, 레이아웃 등을 계획한다.",
        },
        answerResult: "4",
        answerEx : "4번의 내용은 레이아웃 구성에서 한다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "49",
        answerAsk: "사용자가 모니터 위에 표시된 메뉴를 손가락으로 누르면 입력이 되어 컴퓨터에 익숙하지 않은 초보자들도 간단하고 편리하게 사용할 수 있는 입력장치는?",
        answerChoice: {
            1: "스캐너",
            2: "디지타이저",
            3: "터치스크린",
            4: "마우스",
        },
        answerResult: "3",
        answerEx : "터치스크린은 손가락으로 누르면 입력이 되는 시스템이다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "50",
        answerAsk: "점묘법과 같이 제한된 수의 색상들을 사용해서 다양한 색상을 시각적으로 섞어서 만드는 것인 이것은?(ex. 노란색과 빨간색을 섞어 기술적으로 잘 배치하면 주황색으로 보이게 할 수 있음)",
        answerChoice: {
            1: "Halftone",
            2: "Gradation",
            3: "Pattern",
            4: "Dithering",
        },
        answerResult: "4",
        answerEx : "1. 그림·사진 등에서 화면의 밝기가 중간 정도인 색조.<br> 2. 단계적으로 변해 가는 것 <br> 3.일정한 형태나 유형 "
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "51",
        answerAsk: "웹사이트에 움직이는 배너광고를 삽입하고자 할 경우 사용 가능한 툴(tool)로 틀린 것은?",
        answerChoice: {
            1: "플래시(Flash)",
            2: "이미지 레디(Image Ready)",
            3: "일러스트레이터(Illustrator)",
            4: "스위시(Swish)",
        },
        answerResult: "3",
        answerEx : "3. 일러스트레이터는 캐릭터등을 만들때 사용한다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "52",
        answerAsk: "다음이 설명하는 것은 컴퓨터 그래픽스의 역사 중 몇 세대인가?<br>-TV와 영화에 컴퓨터 그래픽스가 이용되면서 사실적 생동감 있는 표현을 중요하게 생각했다. <br>-제조업분야에 CAD와 CAM을 도입했다. <br>-만델브로가 프랙탈 이론을 발표했다. 마이크로소프트가 설립되었다",
        answerChoice: {
            1: "제2세대",
            2: "제3세대",
            3: "제4세대",
            4: "제5세대",
        },
        answerResult: "2",
        answerEx : "1세대: 에니악(ENIAC) 발명<br>2세대: 컴퓨터 그래픽스 기반 구축<br>3세대: 논리회로소자가 집적회로(IC)로 대체된 시기. 컴퓨터의 성능과 기술혁신이 빠르게 진행, 프렉탈 발표.<br>4세대: 개인용 컴퓨터 사용화, 컴퓨터 그래픽스 전성기<br>5새대: 인공지능 기술과 3D 그래픽스의 발전, 뉴미디어 발전 시기"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "53",
        answerAsk: "다음 중 웹 그래픽 제작 툴과 가장 거리가 먼 것은?",
        answerChoice: {
            1: "포토샵(Photoshop)",
            2: "일러스트레이터(Illustrator)",
            3: "오토캐드(Autocad)",
            4: "페인트샵(Paintshop)",
        },
        answerResult: "3",
        answerEx : "웹 그래픽 제작에는 오토캐드는 사용하지 않는다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "54",
        answerAsk: "리얼네트워크사가 개발한 리얼오디오에서 처음으로 선보이고, 웹상에서 영상이나 음향 등의 파일을 다운로드 없이 실시간으로 재생할 수 있는 이것은?",
        answerChoice: {
            1: "Gif 애니메이션",
            2: "퀵타임(Quick-time)",
            3: "스트리밍(Streaming",
            4: "Flash 애니메이션",
        },
        answerResult: "3",
        answerEx : "1. (=움짤)<br> 2. Apple에서 1991년에 제작한 30년 역사를 자랑하는 멀티미디어 라이브러리 및 재생 프로그램.<br> 3. 어도비플래시로 만든 애니메이션"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "55",
        answerAsk: "플래시(Flash)를 이용한 작업으로 거리가 먼 것은?",
        answerChoice: {
            1: "단순하고 정적인 홈페이지를 탈피하여 역동적인 홈페이지를 구축할 수 있다.",
            2: "사업적 용도로 가치 있는 배너를 제작할 수 있다.",
            3: "CGI와 연동하면 여러 가지 기능을 가진 카운터, 방명록, 게시판 등을 만들 수 있다.",
            4: "3D 애니메이션을 제작하여 영화산업에서도 많이 응용되고 있다.",
        },
        answerResult: "4",
        answerEx : "영화산업등에서 응용되진 않고 있다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "56",
        answerAsk: "웹에서 사용되는 타이포그래피의 특징에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "타이포그래피는 문자의 모양과 배열을 의미하는 것으로 웹과 접목되면 다양한 표현이 가능해진다.",
            2: "웹에서는 서체 사용에 제한이 없다.",
            3: "웹의 타이포그래피를 이용한 인터랙티브한 구성이 가능해 진다.",
            4: "웹의 타이포그래피는 동적이다.",
        },
        answerResult: "2",
        answerEx : "웹에서는 서체 사용에 제한이 있다"
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "57",
        answerAsk: "웹디자인 프로세스 중 Pre-Production 단계에 해당되지 않는 것은?",
        answerChoice: {
            1: "디자인 계획 수립",
            2: "콘텐츠 제작",
            3: "콘텐츠 구상",
            4: "디자인 구체화",
        },
        answerResult: "2",
        answerEx : "2. 콘텐츠를 제작하는 단계이다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "58",
        answerAsk: "애니메이션에 대한 설명으로 가장 옳은 것은?",
        answerChoice: {
            1: "그림자나 색체의 변화와 같은 3차원적인 질감을 더하여 현실감을 추가하는 과정이다.",
            2: "움직임이 없는 무생물이나 상상의 물체에 인위적인 조작을 가해 움직임을 주는 기술이다.",
            3: "실제 존재하였거나 상상했던 오브젝트를 3차원적 좌표계를 사용하여 표현하는 과정이다.",
            4: "두 가지의 다른 화면을 합성하기 위한 그래픽 기술이다.",
        },
        answerResult: "2",
        answerEx : "애니메이션 : 동작이나 모양이 조금씩 다른 많은 그림이나 인형을 한 장면씩 촬영하여 영사하였을 때에 화상이 연속하여 움직이는 것처럼 보이게 하는 것. "
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "59",
        answerAsk: "그래픽 파일 포맷인 GIF와 JPG에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "GIF 파일은 빠른 전송 때문에 웹용 이미지로 많이 사용한다.",
            2: "JPG 파일 형식은 GIF 형식보다 다양한 색상을 나타낼 수 있다.",
            3: "JPG 파일 형식은 프로그레시브 방식을 지원한다.",
            4: "GIF 파일 형식은 24bit 트루 컬러(True Color)색상으로 표현할 수 있다.",
        },
        answerResult: "4",
        answerEx : "최대 256 색까지 저장할 수 있는 비손실 압축 형식이다. GIF에 쓰인 LZW 알고리즘에 대한 특허를 유니시스 사가 가지고 있다는 것이 알려지고, 또한 256 색의 제한에 한계를 느끼면서 PNG라는 새로운 표준이 개발되었다."
    },
    {   
        answerType : "웹디자인기능사 2013년 02회",
        answerNum: "60",
        answerAsk: "GUI에 대한 설명으로 틀린 것은?",
        answerChoice: {
            1: "GUI는 Graphic User Interface의 약자이다.",
            2: "그래픽 사용자 중심의 환경으로 아이콘, 내비게이션 툴바 등으로 컴퓨터 사용을 손쉽게 해준다.",
            3: "제 5세대인 1990년도 이후부터 본격적으로 출발하였다.",
            4: "현재 Windows 계열의 OS 만이 사용하고 있다.",
        },
        answerResult: "4",
        answerEx : "4.  모두사용하고있다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "4",
        answerAsk: "색의 활용 효과에 대한 설명으로 틀린 것은?",
        answerChoice: [
            "밝은 바탕에 어두운 색 글자보다 어두운 바탕에 밝은 색글자가 더 굻고 커보인다.",
            "같은 크기의 검정색 상자와 흰 상자를 비교하면 흰색 상자가 더 가볍게 느껴 진다.",
            "천장을 더높게 보이게 하려면 벽면과 동일계열의 고명도 색을 천장에 칠한다.",
            "상의를 하의보다 더 어두운 색으로 하면 키가 더 커 보인다."
        ],
        answerResult: "상의를 하의보다 더 어두운 색으로 하면 키가 더 커 보인다.",
        answerEx: "상의를 하의보다 더 어두운 색으로 하면 키가 더 커 보일수없습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "5",
        answerAsk: "바우하우스의 설립자이며, 근대 건축과 디자인 운동의 대표적 지도자는?",
        answerChoice: [
            "모리스(MORRIS, WILLIAM)",
            "그로피우스(GROPLUS, WALTER)",
            "로위(ROWEY, RAYMOND)",
            "팹스너(PRVSNER, NIKOLAUS)"
        ],
        answerResult: "그로피우스(GROPLUS, WALTER)",
        answerEx: "바우하우스의 설립자이며, 근대 건축과 디자인 운동의 대표적 지도자는 그로피우스 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "6",
        answerAsk: "어떤 착시 현상을 나타낸 것인가?<br><-----><br>>-----<",
        answerChoice: [
            "거리의 착시",
            "방향의 착시",
            "길이의 착시",
            "대비의 착시"
        ],
        answerResult: "길이의 착시",
        answerEx: "선의 길이가 같은데 달라보이므로 길이의 착시입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "7",
        answerAsk: "디자인 기본 요소 중 균형을 잡기 위한 요소가 아닌 것은?",
        answerChoice: [
            "명암",
            "반복",
            "크기",
            "질감"
        ],
        answerResult: "반복",
        answerEx: "반복은 율동의 한 요소이다.율동은 반복과 교차, 점이(점증), 방사, 변칙 특징이 있다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "10",
        answerAsk: "체계적인 국가 정책을 기반으로 공학적이며, 기능적인 디자인이 특징인 국가는?",
        answerChoice: [
            "중국",
            "프랑스",
            "스칸디나비아",
            "독일"
        ],
        answerResult: "독일",
        answerEx: "체계적인 국가 정책을 기반으로 공학적이며, 기능적인 디자인이 특징인 국가는 독일입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "12",
        answerAsk: "눈의 망막부위의 같은 곳에 동시적 또는 계속적으로 두 종류 이상의 색 자극이 주어져 특정한 색체감각을 일으키는 것은?",
        answerChoice: [
            "감법혼합",
            "가법혼합",
            "보색혼합",
            "중간혼합"
        ],
        answerResult: "가법혼합",
        answerEx: "눈의 망막부위의 같은 곳에 동시적 또는 계속적으로 두 종류 이상의 색 자극이 주어져 특정한 색체감각을 일으키는 것은 가법혼합입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "14",
        answerAsk: "다음 중 나머지 세 가지와 성격이 다른 디자인 분야는?",
        answerChoice: [
            "인테리어 디자인",
            "광고 디자인",
            "편집 디자인",
            "시각 디자인"
        ],
        answerResult: "인테리어 디자인",
        answerEx: "광고 디자인, 편집 디자인은 시각디자인에 속함.인테리어 디자인은 공업디자인에 속함."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "19",
        answerAsk: "디자인 형태의 개념에서 조화(Harmony)를 이루는 법칙과 거리가 먼 것은?",
        answerChoice: [
            "균형",
            "대비",
            "통일",
            "색상"
        ],
        answerResult: "색상",
        answerEx: "자인의 원리 - 균형, 비례, 율동, 동세, 통일, 변화, 강조, 대비, 조화"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "20",
        answerAsk: "다음 중 관용색명에 해당하는 것은?",
        answerChoice: [
            "보라색(Purple)",
            "빨강색(Red)",
            "녹색(Green)",
            "개나리색(Chrome Yellow)"
        ],
        answerResult: "개나리색(Chrome Yellow)",
        answerEx: "관용색명이란 일상생활에서 쉽게 접할수 있는 관용적인 호칭방법으로 표현한 색이름을 말한다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "21",
        answerAsk: "웹 브라우저에 해당하지 않는 것은?",
        answerChoice: [
            "인터넷 익스플로러",
            "네스케이프",
            "구글",
            "링스"
        ],
        answerResult: "구글",
        answerEx: "구글은 회사 이름이며 구글에서 개발한 웹 브라우저는 크롬입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "22",
        answerAsk: "SMTP,FTP,Telnet,HTTP와 관련 있는 TCP/IP 프로토콜 계층으로 옳은 것은?",
        answerChoice: [
            "물리 계층",
            "네트워크 계층",
            "전송 계층",
            "응용 계층"
        ],
        answerResult: "응용 계층",
        answerEx: "응용계층: 네트워크 관련 응용프로그램 수행(ex.HTTP,SMTP,FTP,TELNET 등)"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "23",
        answerAsk: "웹 페이지를 만들기 위해 사용되는 프로그램 중 클라이언트측에서 수행되는 것은?",
        answerChoice: [
            "ASP",
            "CGI",
            "VB Script",
            "PHP"
        ],
        answerResult: "VB Script",
        answerEx: "웹 페이지를 만들기 위해 사용되는 프로그램 중 클라이언트측에서 수행되는 것은 VB Script입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "24",
        answerAsk: "Http://alpha.hrdkorea.or.kr에 대한 설명으로 틀린 것은?",
        answerChoice: [
            "Kr은 대한민국을 나타낸다.",
            "alpha는 호스트 이름이다.",
            "or는 정부기관을 나타낸다.",
            "http는 전송 프로토콜이다."
        ],
        answerResult: "or는 정부기관을 나타낸다.",
        answerEx: "or: 비영리기관입니다"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "33",
        answerAsk: "자바 스크립트에서 현재 활성화된 창을 닫는 명령어가 아닌 것은?",
        answerChoice: [
            "self.close()",
            "this.close()",
            "windows.close()",
            "screen.close()"
        ],
        answerResult: "screen.close()",
        answerEx: "screen.close()는 자바 스크립트에서 현재 활성화된 창을 닫는 명령어가 아닙니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "38",
        answerAsk: "자바 스크립트(Java Script)에 대한 설명으로 틀린 것은?",
        answerChoice: [
            "자바 스크립트란 HTML에 삽입되어 HTML을 확장하는 기능을 가지고 있어 HTML을 강력하고 편리하게 디자인 할 수 있다.",
            "자바 스크립트는 객체 지향 언어로 객체(class)를 생성 하고 상속하는 기능을 한다.",
            "자바 스크립트는 서버가 아닌 클라이언트에서 인터프리터 된다.",
            "자바 스크립트는 컴퓨터 기종에 관계없이 사용할 수 있어 플랫폼에 독립적이라고 한다."
        ],
        answerResult: "자바 스크립트는 객체 지향 언어로 객체(class)를 생성 하고 상속하는 기능을 한다.",
        answerEx: "자바 스크립트는 객체 지향 언어로 객체(class)를 생성 하고 상속하는 기능을 한다는 말은 틀린말입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "45",
        answerAsk: "캠코더에서 얻은 동영상 클립을 편집하여 결과물을 얻기에 적합한 소프트웨어가 아닌 것은?",
        answerChoice: [
            "Premiere",
            "Movie Maker",
            "Vagas",
            "Media Player"
        ],
        answerResult: "Media Player",
        answerEx: "Media Player는 오디오 및 동영상 재생기이며 동영상 편집기가 아닙니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "47",
        answerAsk: "웹 디자인 과정에서 아이디어 발상과 밀접한 관계가 있는 용어는?",
        answerChoice: [
            "BRAIN STORMING",
            "STORY BOARD",
            "SITE MAP",
            "HTML"
        ],
        answerResult: "BRAIN STORMING",
        answerEx: "웹 디자인 과정에서 아이디어 발상과 밀접한 관계가 있는 용어는 BRAIN STORMING 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "48",
        answerAsk: "컴퓨터 그래픽스가 활용되고 있는 분야로 거리가 가장 먼 것은?",
        answerChoice: [
            "컴퓨터 게임",
            "CD 타이틀 디자인",
            "공예 디자인",
            "미디어 아트"
        ],
        answerResult: "공예 디자인",
        answerEx: "공예 디자인은 컴퓨터 그래픽스가 활용되는 분야랑 거리가 멉니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "50",
        answerAsk: "웹 페이지를 제작할 때 사용되는 웹 에디터로 옳은 것은?",
        answerChoice: [
            "일러스트레이터",
            "페인터",
            "코렐드로우",
            "드림위버"
        ],
        answerResult: "드림위버",
        answerEx: "웹 페이지 제작 웹에디터 종류에는 : Dreamweaver, Namo Web Editor, Front Page 등등.. 있습니다"
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "51",
        answerAsk: "애플사에서 개발한 미디어 재생기로 동영상 파일을 지원하는 것은?",
        answerChoice: [
            "Windows Media Player",
            "Real Player",
            "Shock Wave",
            "Quick Time"
        ],
        answerResult: "Quick Time",
        answerEx: "애플사에서 개발한 미디어 재생기는 Quick Time 입니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "53",
        answerAsk: "웹(Web) 상에서 애니메이션 사용을 저해하는 요소가 아닌 것은?",
        answerChoice: [
            "데이터 스트리밍",
            "대역폭의 한계",
            "브라우저가 지원하지 못하는 낮은 사양의 컴퓨터",
            "인터넷의 비동기성"
        ],
        answerResult: "데이터 스트리밍",
        answerEx: "스트리밍의 가능으로 별도의 플러그인 설치없이 웹상에서 애니메이션을 재생할수 있습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "57",
        answerAsk: "컴퓨터 그래픽스의 역사 중 트랜지스터 시대(1960년대)에 대한 설명으로 옳은 것은?",
        answerChoice: [
            "컴퓨터 그래픽스 발전의 기초를 마련한 시기로 3D 분야에서는 은선 제거 기법에서 발전을 시작하여 면의 음역을 표현할 수 있는 쉐이딩 기법이 등장하였다.",
            "빌 게이츠와 폴 알렌은 함께 마이크로소프트사를 설립하였다.",
            "컴퓨터 대형화 추세와 더불어 개인용 컴퓨터에서는 주기억장치로 고밀도 직접회로를 사용하여 본격적인 사무자동화 시대를 맞이하였다.",
            "컴퓨터 그래픽스 영상의 발전으로 조지 루카스는 그의 영화 Star Wars(스타워즈)에서 처음으로 90초에 해당하는 부분을 컴퓨터 그래픽스를 이용하여 영상 효과를 창출하였다."
        ],
        answerResult: "컴퓨터 그래픽스 발전의 기초를 마련한 시기로 3D 분야에서는 은선 제거 기법에서 발전을 시작하여 면의 음역을 표현할 수 있는 쉐이딩 기법이 등장하였다.",
        answerEx: "트랜지스터 시대에 은선 제거 기법에서 발전을 시작하여 면의 음역을 표현할 수 있는 쉐이딩 기법이 등장하였습니다."
    },
    {
        answerType: "웹디자인기능사 2010년 02회",
        answerNum: "58",
        answerAsk: "타이포그래피의 구성 요소에 해당하지 않는 것은?",
        answerChoice: [
            "Serif",
            "Line-spacing",
            "Letter-spacing",
            "Texturing"
        ],
        answerResult: "Texturing",
        answerEx: "Texturingd은 질감입니다."
    },
];

let count = 0;

const quizWrap = document.querySelector(".quiz__wrap");

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;
        //체크한것의 벨류값을 가져와서 비교해야 하므로 ().value 그리고 빈객체(=미선택)도 일단 가져오기위해 or사용
        const quizView = document.querySelectorAll(".quiz__view");          //강아지

        if(userAnswer == question.answerResult){
            console.log("정답")
            quizView[number].classList.add("like");
            count ++;
            
        } else{
            console.log("오답")
            quizView[number].classList.add("dislike");
            const divBox = document.createElement("div");
            quizSelectsWrap.appendChild(divBox).innerHTML = `<p class=result>
                ${question.answerEx}</p>`;
        }
            if(count >= 36){
                    document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + "<br>합격";
                } else {
                    document.querySelector(".quiz__confirm .ex").innerHTML = count + "/" + quizInfo.length + "<br>불합격";
                }
    });
    // 정답 갯수
    // 전체 문제수
    console.log(quizInfo.length)
    // 맞춘 갯수
    console.log(count)

};


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

<main id="main">
    <div class="quiz__wrap">
    </div>
</main>

@import url('https://webfontworld.github.io/neodgm/NeoDunggeunmo.css');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

a {
    text-decoration: none;
}
/* 스크롤 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #000000;	

}
::-webkit-scrollbar-thumb:hover {
    background-color: #000050;	
}

body {
    background-color: #f6f6f6;
    background-image:
        linear-gradient(90deg, #cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(#cdcccc 0px, #cdcccc 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(#e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, transparent 100px),
        linear-gradient(transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
        linear-gradient(90deg, #e0e0e0 0px, #e0e0e0 1px, transparent 1px, transparent 99px, #e0e0e0 99px, #e0e0e0 100px),
        linear-gradient(90deg, transparent 0px, transparent 5px, #f6f6f6 5px, #f6f6f6 95px, transparent 95px, transparent 100px),
        linear-gradient(transparent 0px, transparent 1px, #f6f6f6 1px, #f6f6f6 99px, transparent 99px, transparent 100px),
        linear-gradient(#cdcccc, #cdcccc);
    background-size: 100px 100%, 100% 100px, 100% 10px, 10px 100%, 100% 100px, 100px 100%, 100px 100%, 100px 100px, 100px 100px;
}

#header {
    background: #262626;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    position: relative;
    z-index: 10;
}

#header::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    box-sizing: border-box;
    z-index: -1;
}

#header h1 {
    padding: 3px 3px 6px 10px;
    font-family: "DungGeunMo";
    font-size: 30px;
    color: #F7AA2B;
}
#header h1 a{
    color: #F7AA2B;
}

#header h1 em {
    font-size: 16px;
    font-style: normal;
    color: #F7AA2B;
}

@media (max-width: 600px) {
    #header h1 em {
        display: none;
    }
}

#header nav {
    padding-right: 10px;
}

#header nav li {
    display: inline;
}

#header nav li.active a {
    color: #000;
    background: #fff;
}

#header nav li a {
    color: #fff;
    padding: 0 10px;
    border: 1px dashed #fff;
    font-family: "DungGeunMo";
}

#footer {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 150px;
    position: fixed;
    left: 0;
    bottom: 0;
    text-align: center;
    z-index: 10000;
    background: #262626;
}
#footer::before {
    content: "";
    border: 4px ridge #a3a3a3;
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    box-sizing: border-box;
    z-index: -1;
}

#footer a {
    color: #fff;
    font-family: "DungGeunMo";
    margin: 0 auto;
}

#footer a:hover {
    text-decoration: underline;
}
/* quiz__wrap */
.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: "MabinogiClassic";
    font-weight: normal;
    line-height: 1.4;
}

.quiz__question .number {
    color: #F7AA2B;
}

.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: #d6d6d6;
    font-family: "MabinogiClassic";
    cursor: pointer;
}

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

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

.quiz__view {
    background-color: #f5f5f5;
    font-family: "MabinogiClassic";
    position: relative;
    overflow: hidden;
}

.quiz__view .true {
    width: 120px;
    height: 120px;
    line-height: 120px;
    background-color: #CB7A1D;
    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.4;
    font-family: "MabinogiClassic";
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.quiz__selects label span::before{
    content: '';
    width: 30px;
    height: 30px;
    margin-right: 15px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    box-shadow: inset 0px 0px 0px 4px #fad69d;
    flex-shrink: 0;
    transition: all 0.75s;
}
.quiz__selects label input:checked + span {
    background-color: #fad69d98;
    width: 100%;
    border-radius: 10px;
    cursor: pointer;
}
.quiz__selects label input:checked + span::before {
    box-shadow: inset 0px 0px 0px 10px #f8b74e;
} 
.quiz__confirm {
    width: 100%;
    text-align: center;
}

.quiz__confirm .check {
    font-size: 22px;
    border: 6px ridge #cacaca;
    padding: 13px 60px;
    box-sizing: border-box;
    text-align: center;
    font-family: "MabinogiClassic";
    line-height: 1.4;
    cursor: pointer;
    margin: 40px 0 0 0;
    transition: background 0.3s;
}

.quiz__confirm .check:hover {
    background-color: #ffb53ed8;
}
.quiz__confirm .ex {
    font-size: 22px;
    border: 6px ridge #cacaca;
    padding: 13px 60px;
    box-sizing: border-box;
    text-align: center;
    font-family: "MabinogiClassic";
    margin: 0 auto;
    width: 271.13px;
    background-color: #f0f0f0;
}


@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);
    }
}

/* dog */
.dog .tail,
.dog .chin,
.dog .tongue::before,
.dog .tongue::after,
.dog .mouth,
.dog .nose,
.dog .teardrop,
.dog .eyes,
.dog .face::before,
.dog .face::after,
.dog .ears::before,
.dog .ears::after {
    transition: 0.2s ease-in;
}

.dog {
    padding-top: 50px;
}

.dog .head,
.dog .body {
    position: relative;
    width: 115px;
}

.dog .head {
    height: 115px;
    border-radius: 50% 50% 0 0;
    margin: 0 auto;
}

.dog .ears {
    position: relative;
    top: -14%;
    width: 100%;
}

.dog .ears::before,
.dog .ears::after {
    content: "";
    position: absolute;
    top: 0;
    width: 35px;
    height: 70px;
    background: #CB7A1D;
    border-top: 11px solid #F7AA2B;
    border-left: 7px solid #F7AA2B;
    border-right: 7px solid #F7AA2B;
}

.dog .ears::before {
    left: 0;
    border-radius: 50% 45% 0 0;
}

.dog .ears::after {
    right: 0;
    border-radius: 45% 50% 0 0;
}

.dog .face {
    position: absolute;
    background: #F7AA2B;
    width: 100%;
    height: 100%;
    border-radius: 50% 50% 0 0;
}

.dog .face::before,
.dog .face::after {
    content: "";
    display: block;
    margin: auto;
    background: #FEFEFE;
}

.dog .face::before {
    width: 15px;
    height: 35px;
    margin-top: 24px;
    border-radius: 20px 20px 0 0;
}

.dog .face::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 60px;
    height: 65px;
    border-radius: 45% 45% 0 0;
}

.dog .eyes {
    position: relative;
    top: 29%;
    text-align: center;
}

.dog .eyes::before,
.dog .eyes::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background: #451D1C;
    margin: 0 14.5%;
}

.dog .teardrop {
    position: absolute;
    top: 125%;
    left: 19%;
    width: 6px;
    height: 6px;
    border-radius: 0 50% 50% 50%;
    transform: rotate(45deg);
    background: #FEFEFE;
    visibility: hidden;
}

.dog .nose {
    position: relative;
    top: 35%;
    width: 16px;
    height: 8px;
    border-radius: 35px 35px 65px 65px;
    background: #451D1C;
    margin: auto;
}

.dog .mouth {
    position: relative;
    top: 34.5%;
    width: 4px;
    height: 6px;
    margin: 0 auto;
    text-align: center;
    background: #451D1C;
}

.dog .mouth::before,
.dog .mouth::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 4px solid #451D1C;
    border-left-color: transparent;
    border-top-color: transparent;
    z-index: 2;
}

.dog .mouth::before {
    transform: translateX(-89%) rotate(45deg);
}

.dog .mouth::after {
    transform: translateX(-2px) rotate(45deg);
}

.dog .tongue {
    position: relative;
    z-index: 1;
}

.dog .tongue::before,
.dog .tongue::after {
    content: "";
    position: absolute;
}

.dog .tongue::before {
    top: 10px;
    left: -7px;
    width: 18px;
    height: 0;
    border-radius: 50%;
    background: #451D1C;
    z-index: -1;
}

.dog .tongue::after {
    top: 14px;
    left: -4px;
    width: 12px;
    height: 0;
    border-radius: 20px;
    background: #F5534F;
    z-index: 5;
}

.dog .chin {
    position: relative;
    top: 47.5%;
    margin: 0 auto;
    width: 12px;
    height: 12px;
    border-top: 10px solid #E8E7EC;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-radius: 2px;
    z-index: 0;
}

.dog .body {
    position: relative;
    height: 139px;
    margin: auto;
    z-index: 0;
}

.dog .body::before,
.dog .body::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    margin: auto;
    background: #F7AA2B;
}

.dog .body::after {
    top: -2px;
    bottom: -1px;
    width: 60px;
    background: #FEFEFE;
}

.dog .tail {
    position: absolute;
    left: -60%;
    bottom: 1px;
    background: #F7AA2B;
    width: 93px;
    height: 15px;
    transform: rotate(45deg);
    transform-origin: 100% 50%;
    border-radius: 25px 0 0 25px;
    z-index: -2;
    animation: movetail 0.1s linear infinite alternate forwards;
}

.dog .legs {
    position: absolute;
    bottom: 0;
    left: -10%;
    width: 120%;
    height: 15%;
    background: #F7AA2B;
    border-radius: 10px 10px 0 0;
}

.dog .legs::before,
.dog .legs::after {
    content: "";
    position: absolute;
    bottom: 1px;
    background: #CB7A1D;
    z-index: -1;
}

.dog .legs::before {
    left: -7.5%;
    width: 115%;
    height: 55%;
    border-radius: 5px 5px 0 0;
}

.dog .legs::after {
    left: -3.5%;
    width: 107%;
    height: 250%;
    border-radius: 20px 20px 35px 35px;
}

.like .dog .face::before {
    margin-top: 10px;
}

.like .dog .face::after {
    height: 85px;
}

.like .dog .eyes {
    top: 13%;
}

.like .dog .eyes::before,
.like .dog .eyes::after {
    width: 18px;
    height: 5px;
    margin: 0px 12.5%;
    transform: rotate(-37.5deg);
    border-radius: 20px;
}

.like .dog .eyes::after {
    transform: rotate(37.5deg);
}

.like .dog .nose {
    top: 18%;
}

.like .dog .mouth {
    top: 16.5%;
}

.like .dog .tongue::before {
    height: 12px;
}

.like .dog .tongue::after {
    height: 24px;
    animation: movetongue 0.1s linear 0.35s infinite alternate forwards;
}

.like .dog .chin {
    top: 34%;
}

.like .dog .tail {
    animation: movetail 0.1s linear infinite alternate forwards;
}

.dislike .dog .ears::before {
    transform: rotate(-50deg) translate(-7px, 2px);
}

.dislike .dog .ears::after {
    transform: rotate(50deg) translate(7px, 2px);
}

.dislike .dog .face::before {
    margin-top: 28px;
}

.dislike .dog .face::after {
    height: 55px;
}

.dislike .dog .eyes {
    top: 38%;
}

.dislike .dog .eyes::before,
.dislike .dog .eyes::after {
    width: 18px;
    height: 5px;
    margin: 0px 14.5%;
    transform: rotate(-37.5deg);
    border-radius: 20px;
}

.dislike .dog .eyes::after {
    transform: rotate(37.5deg);
}

.dislike .dog .teardrop {
    animation: cry 0.1s ease-in 0.25s forwards;
}

.dislike .dog .nose {
    top: 44%;
}

.dislike .dog .mouth {
    top: 42%;
}

.dislike .dog .chin {
    top: 52%;
}

.dislike .dog .tail {
    transform: rotate(0);
    animation: none;
}


@keyframes movetongue {
    100% {
        height: 27px;
    }
}

@keyframes movetail {
    0% {
        transform: rotate(37deg);
    }

    100% {
        transform: rotate(52deg);
    }
}

@keyframes cry {
    100% {
        visibility: visible;
    }
}