//문제 정보
const quizInfo = [
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "1",
answerAsk: "“Redesign”에 대한 설명으로 옳은 것은?",
answerChoice: {
1: "제품의 원상태를 재생한는 작업이다.",
2: "기존상품의 개선안을 찾아서 새로운 디자인을 개발하는 작업이다.",
3: "새로운 제품을 위한 신제품을 개발하는 작업이다.",
4: "실제 제품생산에 들어가기 전에 샘플을 디자인하는 작업이다."
},
answerResult: "2",
answerEx: "Redesign”는 기존상품의 개선안을 찾아서 새로운 디자인을 개발하는 작업이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "2",
answerAsk: "착시에 대한 설명으로 옳은 것은?",
answerChoice: {
1: "눈에 의한 생리적 작용에 따라 형태나 색채 등이 실제와 다르게 지각되는 것을 말한다.",
2: "각 부분 사이에 강한 힘과 약한 힘이 규칙적으로 연속될 때 생기는 것을 말한다.",
3: "시각상 힘의 안정을 주면 보는 사람에게 안정감을 주고 명쾌한 감정을 느끼게 하는 것을 말한다.",
4: "부분과 전체 사이에 디자인 요소들이 잘 어울려서 균형을 유지하는 상태를 느끼게 하는 것을 말한다."
},
answerResult: "1",
answerEx: "착시는 눈에 의한 생리적 작용에 따라 형태나 색채 등이 실제와 다르게 지각됩니다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "3",
answerAsk: "제과점 홈페이지를 제작할 때 식욕을 돋우는 색채 계획과 가장 거리가 먼 것은?",
answerChoice: {
1: "녹색",
2: "주황",
3: "노랑",
4: "빨강"
},
answerResult: "1",
answerEx: "녹색은 식욕을 돋우는 색체 계획가 거리가 멀다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "4",
answerAsk: "주전자, 냉장고, 자동차를 디자인하는 디자인 영역은?",
answerChoice: {
1: "패션디자인",
2: "시각디자인",
3: "노랑환경디자인",
4: "제품디자인"
},
answerResult: "4",
answerEx: "모두 제품에 속하므로 제품 디자인이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "5",
answerAsk: "레터링(Lettering)에 대한 설명으로 틀린 것은?",
answerChoice: {
1: "글자체, 글자 크기, 글자 사이, 여백 등을 조절하여 읽기에 편하도록 구성하는 표현기술이다.",
2: "넓은 뜻으로 글자 디자인, 글자 표현 등의 글자 자체를 의미한다.",
3: "어떤 디자인을 위한 특정한 목적을 가지는 글자를 묘사하는 것을 말한다",
4: "글자라는 소재를 사용하여 어떤 의도를 표현하고 전달하려는 것이다."
},
answerResult: "1",
answerEx: "레터링(Lettering)은 글자체, 글자 크기, 글자 사이, 여백 등을 조절하여 읽기에 편하도록 구성하는 표현기술이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "6",
answerAsk: "선(Line)에 대한 설명으로 잘못된 것은?",
answerChoice: {
1: "유기적인 선은 정확하고 긴장되며 기계적인 느낌을 준다.",
2: "수직선은 세로로 된 선으로 숭고한 느낌을 준다.",
3: "수평선은 가로로 된 선으로 편안한 느낌을 준다.",
4: "사선은 비스듬한 선으로 동적인 움직임과 불안한 느낌을준다."
},
answerResult: "1",
answerEx: "선(Line)유기적인 선은 정확하고 긴장되며 기계적인 느낌을 주지 않는다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "7",
answerAsk: "점이 총 5개가 있는데, 이 점은 가면 갈수록 크기가 커진다. 이 현상에 대한 설명으로 옳은 답은?",
answerChoice: {
1: "반사 운용",
2: "회전 운용",
3: "팽창이동 패턴",
4: "조화 패턴"
},
answerResult: "3",
answerEx: "점이 점점 팽창하며 커지기 때문에 팽창이동 패턴이라 한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "8",
answerAsk: "디자인의 조건 중 합목적성에 해당하는 것은?",
answerChoice: {
1: "아름다운 미적인 요소를 추구하는 요소",
2: "사물이 일정한 목적에 적합한 방식으로 존재하는 성질",
3: "최소의 경비로 최대의 효과를 얻는 원칙",
4: "독특한 것을 처음으로 고안해 내려는 성향"
},
answerResult: "2",
answerEx: "합목적성이란 사물이 일정한 목적에 적합한 방식으로 존재하는 성질을 뜻한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "9",
answerAsk: "2차원적 프로덕트 디자인에 속하지 않는 것은?",
answerChoice: {
1: "텍스타일디자인",
2: "편집디자인",
3: "벽지디자인",
4: "인테리어 직물디자인"
},
answerResult: "2",
answerEx: "편집디자인은 2차원적 프로덕트 디자인에 속하지 않는다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "10",
answerAsk: "무채색에 대한 설명으로 틀린 것은?",
answerChoice: {
1: "밝고 어두운 정도의 차이로 구별된다",
2: "색상이 존재하지 않는다.",
3: "빨강은 무채색이다.",
4: "채도가 존재하지 않는다."
},
answerResult: "3",
answerEx: "빨강은 무채색이 아니다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "11",
answerAsk: "요소들 사이의 평상형태를 뜻하고, 각 요소들이 디자인 공간속에서 통일감과 안정감을 가지게 하며 크게 대칭과 비대칭, 방사대칭으로 구분할 수 있는 디자인의 원리는?",
answerChoice: {
1: "반복",
2: "균형",
3: "조화",
4: "대비"
},
answerResult: "2",
answerEx: "균형은 요소들 사이의 평상형태를 뜻하고, 각 요소들이 디자인 공간속에서 통일감과 안정감을 가지게 하며 크게 대칭과 비대칭, 방사대칭으로 구분할 수 있는 디자인의 원리를 뜻한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "12",
answerAsk: "입체디자인의 상관 요소에 해당하지 않는 것은?",
answerChoice: {
1: "위치(position)",
2: "형태(shape)",
3: "방향(direction)",
4: "공간(space)"
},
answerResult: "2",
answerEx: "형태는 입체디자인의 상관 요소에 해당하지 않는다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "13",
answerAsk: "인접한 경계면이 다른 부분보다 더 강한 색상, 명도, 채도 대비를 나타내며, 맞닿아 있는 면은 물론이고 떨어져 있는 면들에서도 상호 영향을 미치는 대비효과를 나타내는 색의 대비로 옳은 것은?",
answerChoice: {
1: "채도대비",
2: "명도대비",
3: "연변대비",
4: "반복대비"
},
answerResult: "3",
answerEx: "연변 대비는 인접한 경계면이 다른 부분보다 더 강한 색상, 명도, 채도 대비를 나타내며, 맞닿아 있는 면은 물론이고 떨어져 있는 면들에서도 상호 영향을 미치는 대비효과를 나타내는 색의 대비를 의미한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "14",
answerAsk: "색 자각의 3요소로 옳게 구성된 것은?",
answerChoice: {
1: "광원, 물체, 시각",
2: "광원, 색채, 시각",
3: "광원, 색감, 시각",
4: "광원, 촉각, 시각"
},
answerResult: "1",
answerEx: "색 자각의 3요소는 광원, 물체, 시각이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "15",
answerAsk: "사인(Sign)이나 심볼 마크(Symbol mark)가 속한 디자인 영역을 인간과 인간 사이를 연결해 주는 하나의 매개체가 되는 디자인 분야는?",
answerChoice: {
1: "시각 디자인",
2: "제품 디자인",
3: "환경 디자인",
4: "영상 디자인"
},
answerResult: "1",
answerEx: "시각 디자인은 사인(Sign)이나 심볼 마크(Symbol mark)가 속한 디자인 영역을 인간과 인간 사이를 연결해 주는 하나의 매개체가 되는 디자인 분야이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "16",
answerAsk: "하나의 색상에 각기 다른 여러 명도의 조화를 단계적으로 동시에 배색하여 얻어지는 조화는?",
answerChoice: {
1: "색상 대비에 따른 조화",
2: "보색 대비에 따른 조화",
3: "명도에 따른 조화",
4: "주조색에 따른 조화"
},
answerResult: "3",
answerEx: "명도는 하나의 색상에 각기 다른 여러 명도의 조화를 단계적으로 동시에 배색하여 얻어지는 조화를 의미한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "17",
answerAsk: "디자인 원리 중 유사, 대비, 균일, 강약 등이 포함되어 나타내는 디자인 원리는?",
answerChoice: {
1: "균형",
2: "리듬",
3: "조화",
4: "통일"
},
answerResult: "3",
answerEx: "조화는 유사, 대비, 균일, 강약 등이 포함되어 나타내는 디자인 원리이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "18",
answerAsk: "촉각적 질감에 대한 설명으로 틀린 것은?",
answerChoice: {
1: "촉각적 질감에는 장식적 질감, 자연적 질감, 기계적 질감이 있다.",
2: "촉각적 질감은 눈으로 볼 수 있을 뿐 아니라 손으로 만져서 느낄 수 있는 질감이다.",
3: "촉각적 질감은 2차원 디자인의 표면과 함께 3차원의 양각(relief)으로 확대하는 것이다.",
4: "촉각적 질감의 연출 방법에는 자연재료사용, 재료변형, 재료복합 등이 있다."
},
answerResult: "1",
answerEx: "촉각적 질감은 직접 만지며 느끼는 재질감이기 때문에 1번 설명은 틀렸다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "19",
answerAsk: "먼셀 표색계에 관한 설명과 거리가 먼 것은?",
answerChoice: {
1: "색은 색상, 명도, 채도의 3속성으로 구분한다.",
2: "색은 색상, 명도, 채도의 3속성으로 구분한다.",
3: "색상의 최초 기준색은 빨강(R)이다.",
4: "무채색 축 안쪽으로 채도가 높은 색을 배열한다."
},
answerResult: "4",
answerEx: "무채색 축 안쪽으로 채도가 낮은 색을 배열한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "20",
answerAsk: "자연에서 찾아 볼 수 있는 디자인의 원리에 대한 사례로 옳지 않은 것은?",
answerChoice: {
1: "고대 그리스 밀로의 비너스, 파르테논 신전 등은 비례의좋은 예이다.",
2: "나뭇잎, 숲속의 나무, 해변의 모래알, 바다의 파도 등은 대칭의 좋은 예이다.",
3: "잔잔한 수면 위에 돌을 떨어뜨려 생기는 동심원은 방사구성의 좋은 예이다.",
4: "무성한 나뭇잎들 사이에서 핀 꽃, 밤하늘에 뜬 달 등은 강조의 좋은 예이다."
},
answerResult: "2",
answerEx: "나뭇잎, 숲속의 나무, 해변의 모래알, 바다의 파도 등은 대칭의 좋은 예가 아니다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "21",
answerAsk: "인터넷상의 보안 문제로부터 특정 네트워크를 격리시키는데 사용되는 시스템으로서, 네트워크의 출입 경로를 단절시켜 보안 관리 범위를 좁히고 제어를 효과적으로 할 수 있는 시스템은?",
answerChoice: {
1: "Firewall",
2: "SNMP",
3: "POP Server",
4: "SMTP"
},
answerResult: "1",
answerEx: "Firewall은 인터넷상의 보안 문제로부터 특정 네트워크를 격리시키는데 사용되는 시스템으로서, 네트워크의 출입 경로를 단절시켜 보안 관리 범위를 좁히고 제어를 효과적으로 할 수 있는 시스템이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "22",
answerAsk: "VRML(Virtual Reality Modeling Language)에 관한 특징으로 틀린 것은?",
answerChoice: {
1: "웹에서 사용되는 언어이므로 플랫폼에 독립적이다.",
2: "3차원 공간을 표현하는 텍스트 파일로 데이터 전송 시간이 길다.",
3: "웹 관련 표준 언어를 수용할 수 있어 HTML 문서와 연계해서 사용할 수 있다.",
4: "사이버 쇼핑몰을 만들거나 3차원 채팅 사이트, 가상 학교 등의 제작이 가능하다."
},
answerResult: "2",
answerEx: "3차원 공간을 표현하는 텍스트 파일로 데이터 전송 시간이 길다는 VRML 특징으로 옳지 않다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "23",
answerAsk: "웹브라우저의 기능으로 옳지 않은 것은?",
answerChoice: {
1: "웹사이트 접속",
2: "정보 검색",
3: "그림 편집",
4: "인터넷 서비스 제공"
},
answerResult: "3",
answerEx: "그림 편집은 웹브라우저의 기능으로 옳지 않다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "24",
answerAsk: "네트워크 위상 중 링형에 대한 특징으로 옳은 것은?",
answerChoice: {
1: "일부 노드의 전송지연이 전체 네트워크에 영향을 주지 않는다.",
2: "원거리 노드로의 데이터 전송은 인접 노드가 중계하여데이터를 전달한다.",
3: "데이터 또는 메시지는 지정한 노드에게만 전달한다.",
4: "새로운 노드의 삽입이 용이하다."
},
answerResult: "2",
answerEx: "원거리 노드로의 데이터 전송은 인접 노드가 중계하여데이터를 전달하는 것은 네트워크 위상 중 링형에 대한 특징에 속한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "25",
answerAsk: "다음 중 프로그램의 성격이 다른 하나는?",
answerChoice: {
1: "인터넷 익스플로러",
2: "모질라",
3: "아파치",
4: "넷스케이프 네비게이터"
},
answerResult: "3",
answerEx: "아파치 HTTP 서버는 아파치 소프트웨어 재단에서 관리하는 오픈 소스, 크로스 플랫폼 HTTP 웹 서버 소프트웨어다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "26",
answerAsk: "인터넷을 통해 주고 받는 내용을 캐시에 저장해 놓았다가 동일한 자료의 송수신이 발생하는 경우 이를 되풀이하지 않게 함으로써 속도를 향상시킬 수 있는 서버로 옳은 것은?",
answerChoice: {
1: "HTTP 서버",
2: "Proxy 서버",
3: "DNS 서버",
4: "Gateway 서버"
},
answerResult: "2",
answerEx: "Proxy 서버는 인터넷을 통해 주고 받는 내용을 캐시에 저장해 놓았다가 동일한 자료의 송수신이 발생하는 경우 이를 되풀이하지 않게 함으로써 속도를 향상시킬 수 있는 서버이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "27",
answerAsk: "E-Mail 송신 시에 사용되는 프로토콜은?",
answerChoice: {
1: "SMTP",
2: "SNMP",
3: "UDP",
4: "MIME"
},
answerResult: "1",
answerEx: "SMTP는 E-Mail 송신 시에 사용되는 프로토콜이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "28",
answerAsk: "자바 스크립트에 관한 설명으로 틀린 것은?",
answerChoice: {
1: "웹서버에 주는 부담이 적다.",
2: "소스코드를 감출 수 없다.",
3: "컴파일 방식의 언어이다.",
4: "운영체제의 제약을 받지 않는다."
},
answerResult: "3",
answerEx: "컴파일 방식의 언어가 아니다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "29",
answerAsk: "TCP/IP 프로토콜의 4계층에 해당하지 않는 것은?",
answerChoice: {
1: "응용계층",
2: "전송계층",
3: "네트워크계층",
4: "물리계층"
},
answerResult: "4",
answerEx: "물리계층은 CP/IP 프로토콜의 4계층에 해당하지 않는다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "30",
answerAsk: "검색 사이트 중 기존의 메타 태그에만 의존하지 않고 페이지 랭크 기법을 이용하여 웹페이지의 순위를 정하는 검색사이트는?",
answerChoice: {
1: "구글",
2: "야후",
3: "알타비스타",
4: "라이코스"
},
answerResult: "1",
answerEx: "구글은 검색 사이트 중 기존의 메타 태그에만 의존하지 않고 페이지 랭크 기법을 이용하여 웹페이지의 순위를 정하는 검색사이트이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "31",
answerAsk: "웹 인덱스 검색 방식(키워드 검색 방식)에 대한 설명으로 옳은 것은?",
answerChoice: {
1: "사람이 직접 문서를 수집하고 관리한다",
2: "검색 결과로 얻는 웹 문서의 수가 비교적 적다",
3: "나열된 분류 항목 중 하나의 항목을 선택하여 검색하는 방법이다.",
4: "로봇(robot) 프로그램이 주기적으로 인터넷상의 정보를 검색한다."
},
answerResult: "4",
answerEx: "로봇(robot) 프로그램이 주기적으로 인터넷상의 정보를 검색하는 방법은 웹 인덱스 검색 방식(키워드 검색 방식)이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "32",
answerAsk: "HTML의 <table> 태그 중 테이블의 테두리 두께를 지정하는 속성은?",
answerChoice: {
1: "border",
2: "celpadding",
3: "width",
4: "spacing"
},
answerResult: "1",
answerEx: "border는 모든 테두리의 두께를 지정할 수 있다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "33",
answerAsk: "인터넷에서 음성 및 동영상, 애니메이션 등의 콘텐츠를 실시간으로 다운로드하여 실행 가능하도록 하는 기술은?",
answerChoice: {
1: "Streaming 기술",
2: "Water Mark 기술",
3: "DRM 기술",
4: "Compression 기술"
},
answerResult: "1",
answerEx: "Streaming 기술은 인터넷에서 음성 및 동영상, 애니메이션 등의 콘텐츠를 실시간으로 다운로드하여 실행 가능하도록 해준다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "34",
answerAsk: "웹의 하이퍼미디어 문서를 작성, 표현하기 위해 사용되는 표준 언어이며, 일반적인 Document와 Tag로 구성되어 있는 프로그램 언어는 무엇인가?",
answerChoice: {
1: "HTML",
2: "C언어",
3: "Pacal",
4: "FORTRAN"
},
answerResult: "1",
answerEx: "HTML"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "35",
answerAsk: "웹 페이지에서의 저작에 대한 설명으로 가장 옳은 것은?",
answerChoice: {
1: "각각의 모노미디어를 통합하는 과정이다.",
2: "그래픽 이미지에 필터 효과를 주는 과정이다.",
3: "사운드를 편집하는 과정이다.",
4: "영상 자료에 다양한 효과를 주는 과정이다."
},
answerResult: "1",
answerEx: "웹 페이지에서의 저작에 대한 설명으로 가장 옳은 것은 각각의 모노미디어를 통합하는 과정이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "36",
answerAsk: "자바 스크립트 내에서 사용되는 String 객체에 대한 설명으로 틀린 것은?",
answerChoice: {
1: "replace() - 임의의 문자열에서 지정한 문자를 다른 문자로 변경한다",
2: "match() - 임의의 문자열에서 지정한 문자가 나타나는 첫 번째 위치 값을 반환한다.",
3: "split() - 임의의 문자열을 지정한 문자열이 나타나는 위치들을 나누어 두 개 이상의 문자열 배열로 만들어 반환한다.",
4: "toUpperCase() - 문자열에 존재하는 대문자를 모두 소문자로 변환하여 반환한다."
},
answerResult: "4",
answerEx: "toUpperCase() 메서드는 문자열을 대문자로 변환해 반환한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "37",
answerAsk: "HTML 4.0 이전의 웹 표준 언어에서는 제공하지 못하였지만 HTML 4.0부터 새롭게 제공하는 기능은?",
answerChoice: {
1: "이미지 삽입 지원",
2: "CSS를 이용한 레이아웃 조절",
3: "애플릿 사용 지원",
4: "첨자 표현 지원"
},
answerResult: "2",
answerEx: "CSS를 이용한 레이아웃 조절은 HTML 4.0 이전의 웹 표준 언어에서는 제공하지 못하였지만 HTML 4.0부터 새롭게 제공하는 기능이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "38",
answerAsk: "HTML을 자동으로 생성해 주는 웹에디터 프로그램으로 거리가 먼 것은?",
answerChoice: {
1: "나모(Namo)",
2: "드림위버(DreamWeaver)",
3: "프리미어(Premiere)",
4: "프론트페이지(FrontPage)"
},
answerResult: "3",
answerEx: "HTML을 자동으로 생성해 주는 웹에디터 프로그램으로 거리가 먼 것은 프리미어(Premiere)이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "39",
answerAsk: "네트워크 구성요소 중 시스템을 네트워크에 물리적으로 연결하는 확장카드나 기타 장치는?",
answerChoice: {
1: "클라이언트 S/W",
2: "네트워크어댑터",
3: "프로토콜",
4: "서비스 S./W"
},
answerResult: "2",
answerEx: "네트워크 구성요소 중 시스템을 네트워크에 물리적으로 연결하는 확장카드나 기타 장치는 네트워크어댑터이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "40",
answerAsk: "'Mosaic'이 등장한 이후의 인터넷 서비스의 변화에 해당하는 것은?",
answerChoice: {
1: "ARPANet 시작",
2: "Archie 시작",
3: "전자상거래 시작",
4: "Gopher"
},
answerResult: "3",
answerEx: "Mosaic'이 등장한 이후의 인터넷 서비스의 변화에 해당하는 것은 전자상거래 시작이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "41",
answerAsk: "웹용으로 이미지를 디자인할 때 고려해야 할 사항으로 거리가 먼 것은?",
answerChoice: {
1: "파일 크기",
2: "이미지의 색상",
3: "파일 포맷 형식",
4: "인쇄 설정"
},
answerResult: "4",
answerEx: "인쇄 설정은 웹용으로 이미지를 디자인할 때 고려해야 할 사항으로 거리가 멀다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "42",
answerAsk: "페이퍼 애니메이션이 배경 이미지를 활용하지 못한다는 단점을 보완하기 위해 1914년 “얼 허드”에 의해 고안된 애니메이션은?",
answerChoice: {
1: "셀 애니메이션",
2: "클래이 애니메이션",
3: "컷 아웃 애니메이션",
4: "스크래치 애니메이션"
},
answerResult: "1",
answerEx: "페이퍼 애니메이션이 배경 이미지를 활용하지 못한다는 단점을 보완하기 위해 1914년 “얼 허드”에 의해 고안된 애니메이션은 셀 애니메이션이다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "43",
answerAsk: "웹 사용성(Web Usability에 대한 원칙으로 부적절한 것은?",
answerChoice: {
1: "내용과 기능을 단순화",
2: "일관성 있는 디자인 유지",
3: "개발자 편의를 위한 사이트 구성",
4: "정보의 우선순위 고려"
},
answerResult: "3",
answerEx: "개발자 편의를 위한 사이트 구성은 웹 사용성(Web Usability에 대한 원칙으로 부적절하다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "44",
answerAsk: "해상도에 대한 설명으로 잘못된 것은?",
answerChoice: {
1: "그래픽 작업은 반드시 목적에 맞는 해상도로 작업해야한다.",
2: "출력용으로 제작할 때는 최소 200dpi 이상의 해상도로 작업하는 것을 권장한다",
3: "화면의 해상도는 72dpi 이상이면 확대되어 보이고, 이하면 축소되어 보인다.",
4: "웹용 이미지를 사용하려면 해상도를 72dpi 보다 크게 설정하는 것이 좋다."
},
answerResult: "4",
answerEx: "웹용 이미지를 해상도를 72dpi 보다 크게 설정하지 않아도 된다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "45",
answerAsk: "컴퓨터 그래픽스 시스템의 입력장치로 옳지 않은 것은?",
answerChoice: {
1: "디지타이저(Digitizer)",
2: "조이스틱(Joy Stick)",
3: "스캐너(Scanner)",
4: "프린터(Printer)"
},
answerResult: "4",
answerEx: "프린터(Printer)"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "46",
answerAsk: "ⓐ 그림, 동영상, 소리파일 제작, ⓑ 주제 결정, ⓒ 웹사이트에 업로드, ⓓ 웹에디터로 작성, ⓔ 스토리보드 제작 를 웹 디자인 과정으로 올바르게 나열한 것은?",
answerChoice: {
1: "ⓑ-ⓐ-ⓓ-ⓔ-ⓒ",
2: "ⓑ-ⓓ-ⓐ-ⓔ-ⓒ",
3: "ⓑ-ⓔ-ⓐ-ⓓ-ⓒ",
4: "ⓑ-ⓐ-ⓓ-ⓒ-ⓔ"
},
answerResult: "3",
answerEx: "ⓑ-ⓔ-ⓐ-ⓓ-ⓒ"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "47",
answerAsk: "웹페이지 요소에 대하 설명으로 옳지 않은 것은?",
answerChoice: {
1: "내비게이션 : 페이지를 연계하여 이동하고 연결하는 하이퍼미디어 시스템의 링크구조",
2: "로고 : 사용성 측면에서 내비게이션과 사용자 구조에 대한 이해를 돕기 위해 사용하는 이미지",
3: "배너 : 텍스트, 이미지, 동영상 등의 조합으로 광고나 홍보용으로 사용",
4: "컬러 : 웹사이트의 성격, 주 타켓층, 표현하고자 하는 콘텐츠에 따라 달라진다."
},
answerResult: "2",
answerEx: "로고 : 사용성 측면에서 내비게이션과 사용자 구조에 대한 이해를 돕기 위해 사용하는 이미지"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "48",
answerAsk: "물체를 구성하는 모든 면에 대한 정점과 연결선의 좌표로 입체를 표현하는 방법, 면의 구분이 가능하고 은폐선과 은폐면의제거를 하여 물체의 사실감을 높이거나 자유곡면을 표현하는데 적합, 모든 면에 데이터를 입력하기 때문에 용량이 커지는 3D 형상 모델링은?",
answerChoice: {
1: "와이어 프레임 모델링(Wire Frame Modeling)",
2: "표면 모델링(Surface Modeling)",
3: "솔리드 모델링(Solid Modeling)",
4: "매개변수 모델링(Parametric Modeling)"
},
answerResult: "2",
answerEx: "표면 모델링(Surface Modeling)"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "49",
answerAsk: "웹사이트의 전체구조, 화면구성, 콘텐츠 정보 등을 작성해 보고, 화면 단위로 삽입될 구성요소 및 구체적 내용을 정리해 놓는것은?",
answerChoice: {
1: "레이아웃",
2: "내비게이션",
3: "스토리보드",
4: "동영상"
},
answerResult: "3",
answerEx: "스토리보드"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "50",
answerAsk: "애니메이션 도구인 플래시(Flash)가 가지고 있는 특징이 아닌 것은?",
answerChoice: {
1: "파일 크기가 비교적 작으면서 좋은 품질의 무비를 만들어 준다.",
2: "비트맵 형식이기 때문에 고품질의 이미지 제작이 가능하다.",
3: "사운드 및 다양한 파일 포맷을 지원한다.",
4: "웹브라우저에서 자체적으로 플래시 무비가 실행된다."
},
answerResult: "2",
answerEx: "비트맵 형식이기 때문에 고품질의 이미지 제작이 가능하다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "51",
answerAsk: "3차원 대상물 표면에 2차원의 이미지를 입히는 과정을 무엇 이라고 하는가?",
answerChoice: {
1: "쉐이딩(Shading)",
2: "안티 앨리아싱(Anti Aliasing)",
3: "텍스처 매핑(Texture Mapping)",
4: "필터링(Filtering)"
},
answerResult: "3",
answerEx: "텍스처 매핑(Texture Mapping)"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "52",
answerAsk: "그래픽 툴(Tool)인 포토샵의 전용 이미지 파일 포맷은?",
answerChoice: {
1: "PXR",
2: "TIFF",
3: "PCT",
4: "PSD"
},
answerResult: "4",
answerEx: "PSD"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "53",
answerAsk: "일반적으로 포토샵에서 할 수 있는 작업이 아닌 것은?",
answerChoice: {
1: "사진 수정 작업",
2: "이미지 효과",
3: "컬러 수정/처리",
4: "심벌, 마크 작업"
},
answerResult: "4",
answerEx: "심벌, 마크 작업"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "54",
answerAsk: "플래시(Flash)를 이용한 웹 그래픽 저작의 특징이 아닌 것은?",
answerChoice: {
1: "애니메이션의 처음과 끝을 제작하면 중간단계를 자동으로 생성할 수 있다.",
2: "실사와 동일한 애니메이션을 얻을 수 있다.",
3: "애니메이션과 사운드가 통합된 결과물을 얻을 수 있다.",
4: "사용자의 동작에 반응하는 효과를 낼 수 있다."
},
answerResult: "2",
answerEx: "실사와 동일한 애니메이션을 얻을 수 있다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "55",
answerAsk: "타이포그래피에 대한 설명으로 틀린 것은?",
answerChoice: {
1: "글자를 재료로 하는 디자인을 말한다.",
2: "글자의 의미 전달만을 목적으로 하고 있다.",
3: "커뮤니케이션 시각디자인의 요체로서 다양한 디자인 행위를 모두 포괄하는 개념으로 확대되었다.",
4: "무빙 타입인 움직이는 타이포그래피로 의미가 확대되었다."
},
answerResult: "2",
answerEx: "글자의 의미 전달만을 목적으로 하고 있다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "56",
answerAsk: "컴퓨터그래픽스의 역사 중 1960년대에 등장한 출력장치는?",
answerChoice: {
1: "래스터 스캔형 CRT",
2: "리플레시형 CRT",
3: "X-Y 플로터",
4: "스토레이지형 CRT"
},
answerResult: "2",
answerEx: "리플레시형 CRT"
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "57",
answerAsk: "다음 중 이미지의 표현방식인 벡터방식과 비트맵방식에 대한 설명으로 틀린 것은?",
answerChoice: {
1: "벡터방식은 점과 점을 연결하여 그린 선과 곡선으로 구성되어 있는 방식이다.",
2: "벡터방식은 도형을 확대, 축소, 회전, 이동 등의 경우에도 그림의 질을 그대로 유지할 수 있다.",
3: "비트맵방식은 작은 점인 픽셀의 집합으로 바둑판 격자와 같은 모양으로 배열되어 있는 방식을 말한다.",
4: "비트맵방식은 벡터방식보다 적은 디스크 공간을 소모한다."
},
answerResult: "4",
answerEx: "비트맵방식은 벡터방식보다 적은 디스크 공간을 소모한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "58",
answerAsk: "웹디자인 프로세스 중 프로젝트 기획 단계에 속하지 않는 것은?",
answerChoice: {
1: "웹디자인 구축할 웹 기획자, 웹 디자이너, 웹 프로그래머 등의 제작팀을 구성한다.",
2: "웹사이트의 내용과 관련된 자료를 수집하고 분석하여 아이디어를 도출한다.",
3: "서비스 목적과 사용자 계층을 고려하여 디자인 컨셉(concept)과 콘텐츠의 내용을 정의한다.",
4: "사용자를 분석하고 개발 전략 및 홍보 전략을 세운다."
},
answerResult: "4",
answerEx: "사용자를 분석하고 개발 전략 및 홍보 전략을 세운다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "59",
answerAsk: "비트맵 이미지에서 히스토그램(Histogram)에 대한 설명으로 적절한 것은?",
answerChoice: {
1: "이미지의 컬러정보를 X, Y 조표에 표시한 것을 말한다.",
2: "이미지의 명암 값 프로필(profile)을 보여주기 우해 사용된다.",
3: "색을 다른 색으로 변환하기 위해 사용된다.",
4: "색상 값이 비슷한 영역을 한꺼번에 선택하는 것을 의미한다."
},
answerResult: "1",
answerEx: "이미지의 컬러정보를 X, Y 조표에 표시한 것을 말한다."
},
{
answerType: "웹디자인기능사 2012년 01회",
answerNum: "60",
answerAsk: "화면에 그려져 있는 여러 메뉴 및 아이콘을선택하여 바로 실행할 수 있도록 하는 인터페이스 방식으로 사용자의 편리성을 추구하는 인터페이스 방식은?",
answerChoice: {
1: "CRT",
2: "GUI",
3: "PDA",
4: "GPU"
},
answerResult: "2",
answerEx: "GUI"
},
];
const quizWrap = document.querySelector(".quiz__wrap");
let quizScore = 0;
// const updateQuiz = () => {
// const exam = [];
// quizInfo.forEach((question, number) => {
// // console.log(question, number); // question (object 하나당 여섯 문제가 나온다.) | number(번호가 나온다.) | exam (빈 배열이 나온다.)
// // exam.push(1, "<div>1</div>"); // exam (배열) 안에 1을 추가해준다. | exam (배열) 안에 <div>1</div> 를 추가해준다.
// // console.log(exam);
// exam.push("<div>1</div>");
// });
// quizWrap.innerHTML = exam;
// };
// updateQuiz();
//문제 출력
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"); // 객관식 보기4
const quizEx = document.querySelector(".quiz__confirm .ex");
// 사용자가 체크한 보기 == 문제 정답
quizInfo.forEach((question, number) => {
const userSelector = `input[name=select${number}]:checked`; // 사용자가 체크한 문제
const quizSelectsWrap = quizSelects[number]; // 0 이면 첫 번째 문제, 1 이면 두 번째 문제인 것을 quizSelectsWrap으로 정해준 것
const userAnswer = (quizSelectsWrap.querySelector(userSelector) || {}).value;
// quiz__selects[number] 체크 된 것을 찾는다. | {} 빈 문자열을 넣은 이유는 정답 체크를 하지 않았을 때도 출력을 하기 위해서이다.
const quizView = document.querySelectorAll(".quiz__view");
// console.log(userAnswer);
// if(userAnswer == undefined) // undefined 나올 시 실행 할 것
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");
quizSelectsWrap.appendChild(divBox).innerHTML = `<p class= "result">${question.answerEx}</p>`;
};
});
//전체 문제 수 구하기
quizEx.innerText = `전체 갯수 : ${quizInfo.length} 맞은 갯수 : ${quizScore}`;
//내가 맞힌 수 구하기
// console.log("맞은 갯수 :" + quizScore);
};
//정답 클릭
document.querySelector(".quiz__confirm .check").addEventListener("click", answerQuiz); // 정답을 클릭했을 때 answerQuiz 를 실행 시키는 이벤트