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