클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
최종 완성된 모습
이번에는 html에 쓰던 코드를 자바스크립트로 작성하는 것을 배웠습니다.
그리고 퀴즈를 활용하는 것도 같이 배웠습니다.
JAVASCRIPT코드
<script>
// 문제 정보
// (면제) 정보처리기능사 10년 7월 11일 4회 [기능사 면제]
// (해야해) 웹디자인기능사 필기 기출문제 및 CBT 2011년 02월 13일(1회) 정리(60번까지)
const quizInfo = [
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110101",
// 이미지 나오게 할 떄 : infoQuestion: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?<br><img style='width:300px' src=''>",
infoQuestion: "건강 이미지의 웹사이트를 구성하려고 한다. 가장 적합한 컬러는?",
infoChoice: {
1: "빨강색",
2: "노랑색",
3: "검정색",
4: "녹색"
},
infoAnswer: "4",
infoDesc : "DMA : 다이렉트 메모리 엑세스의 약자로 CPU를 통하지 않고 입출력장치와 기억장치간에 데이터를 주고 받는 방식"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110102",
infoQuestion: "입체파(Cubism)의 대표적인 화가는?",
infoChoice: {
1: "피카소",
2: "쿠르베",
3: "찰스 자보",
4: "도미에"
},
infoAnswer: "1",
infoDesc : "순차처리는 magnetic tape 자기테이프 입니다"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110103",
infoQuestion: "디자인 원리 중 율동의 요소에 해당하지 않는 것은?",
infoChoice: {
1: "반복",
2: "비례",
3: "강조",
4: "변칙"
},
infoAnswer: "2",
infoDesc : "16진수를 8 4 2 1 방식을 이용하여 2진수로 변환한뒤 64 32 16 8 4 2 1 방식으로 10진수로 읽어주면 됩니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110104",
infoQuestion: "디자인의 조건 중 합목적성에 대한 예시로 가장 올바른 것은?",
infoChoice: {
1: "화려한 집이 살기에 편리하다.",
2: "주로 장식이 많은 의자가 앉기에 편리하다.",
3: "의자를 디자인할 때는 앉을 사람의 몸의 치수, 체중을 고려해야 한다.",
4: "아름다운 구두가 신기에 편하다."
},
infoAnswer: "3",
infoDesc : "MAR : 번지(주소)기억 MBR : 버퍼(임시기억) <br> IR : 명령어레지스터(명령어를 읽어서 저장) <br> PC : 프로그램카운터(다음수행 명령번지 기억) <br> 명령어해독기 : IR 내용 해독 ACC : 누산기(연산결과 일시(임시)저장) <br> 데이터레지스터 : 데이터 임시저장 <br> 상태 레지스터 : CPU상태 저장(PSW) <br> 보수기 : 보수로 바꾸는 장치"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110105",
infoQuestion: "관용색명의 특징으로 볼 수 없는 것은?",
infoChoice: {
1: "시대나 유행에 따라서 다소 변하기도 하므로 정확한 색의 전 달이 어렵다.",
2: "무수히 많은 색 이름과 그 어원을 가지고 있어서 한꺼번에 습득하기가 어렵다",
3: "어느 특정한 색을 여러 가지 언어로 표현하고 있기 때문에 복잡하고 혼동하기 쉽다.",
4: "몇 가지의 기본적인 색 이름에 수식어, 색상의 형용사를 덧붙여서 부른다."
},
infoAnswer: "4",
infoDesc : "캐중주 : 캐시메모리는 중앙처리장치와(CPU) 주기억장치 사이"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110106",
infoQuestion: "색체 지각의 3요소가 아닌 것은?",
infoChoice: {
1: "색채",
2: "빛(광원)",
3: "물체",
4: "시각(눈)"
},
infoAnswer: "1",
infoDesc : "캐시메모리는 하드웨어로만 구성되며 전원이 꺼질경우 내용이 사라지는 SRAM입니다. CPU와 주기억장치 사이에서 속도 차이를 보완하기 위해서 사용됩니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110107",
infoQuestion: "사회변화에 따른 디자인의 변화에 대한 설명으로 옳은 것은?",
infoChoice: {
1: "농경 사회 : 의식주, 생존개념, 생활 수공예",
2: "산업 사회 : 공업의 발달, 빛의 개념, 디자인 성장(광원)",
3: "후기 산업사회 : 기술의 첨단화, 즐기는 개념",
4: "정보화 사회 : 대량생산, 성장개념, 디자인 태동"
},
infoAnswer: "1",
infoDesc : "직접주소지정(Direct Addressing) : 지정된 주소가 피연산자의 위치한곳(주소)을 직접 지정하는 방식"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110108",
infoQuestion: "서로 반대되는 색끼리 배색되었을 때 각자의 색은 원래의 색보다 뚜렷해지고 채도가 높아 보이는 현상은?",
infoChoice: {
1: "명도 대비",
2: "보색 대비",
3: "면적 대비",
4: "동시 대비"
},
infoAnswer: "2",
infoDesc : "묵(0) - 즉(0) - 직(1) - 간(2) <br> 위 괄호속의 내용은 메모리 참조 횟수를 뜻합니다. <br> 문제에서 2회 메모리 참조를 하므로 간접방식입니다. <br>"
},
// // ?<br><img style='width:300px' src=''>",
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110109",
infoQuestion: "다음 그림 (가)는 수평의 요소, 그림 (나)는 수직의 요소가 느껴진다. 이러한 느낌은 심리지각 중 어떤 것에 해당되는가? <br><img style='width:450px' src='./img/9번.png'>",
infoChoice: {
1: "접근성",
2: "유사성",
3: "폐쇄성",
4: "단순화"
},
infoAnswer: "1",
infoDesc : "A OR BC' 위 두 신호가 AND 됩니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110110",
infoQuestion: "일반적인 웹(Web) 안전색상은 몇 가지인가?",
infoChoice: {
1: "216",
2: "256",
3: "2160",
4: "2560"
},
infoAnswer: "1",
infoDesc : "주기억장치의 지정은 번지로 지정합니다. 모든 기억장치는 고유 번지를 가집니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110111",
infoQuestion: "기계적 질감에 해당되지 않는 것은?",
infoChoice: {
1: "사진의 망점",
2: "인쇄상의 스크린 톤",
3: "나뭇잎",
4: "텔레비전 주사선"
},
infoAnswer: "3",
infoDesc : "인코더 : 10진수(특정진수)를 2진수로 변환, 암호화 기능 <br> 디코더 : 2진 신호를 10진(특정진수)으로 변환, 해독기능"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110112",
infoQuestion: "다음 ( )안에 들어갈 알맞은 용어는?<br><img style='width:440px' src='./img/12번.png'>",
infoChoice: {
1: "A:점, B:형",
2: "A:선, B:형태",
3: "A:형, B:면",
4: "A:형, B:형태"
},
infoAnswer: "4",
infoDesc : "MAR : 번지(주소)기억 <br> MBR : 버퍼(임시기억) <br> IR : 명령어레지스터(명령어를 읽어서 저장) <br> PC : 프로그램카운터(다음수행 명령번지 기억) <br> 명령어해독기 : IR 내용 해독 <br> ACC : 누산기(연산결과 일시(임시)저장) <br> 데이터레지스터 : 데이터 임시저장 <br> 상태 레지스터 : CPU상태 저장(PSW) <br> 보수기 : 보수로 바꾸는 장치" },
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110113",
infoQuestion: "저드(D.B.judd)의 “색채 조화론” 에 해당하지 않는 것은?",
infoChoice: {
1: "질서의 원리",
2: "모호성의 원리",
3: "친근성의 원리",
4: "유사성의 원리"
},
infoAnswer: "2",
infoDesc : "16진수를 8 4 2 1 방식으로 2진수로 변환한뒤(4자리씩 확장)이를 4 2 1 방식으로 8진수로 변환(3자리씩 끊어 읽기)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110114",
infoQuestion: "디자인 원리 중 서로 다른 부분의 조합에 의해 생기는 것으로 시각적 힘의 강약에 의한 형의 감정효과를 주는 것은?",
infoChoice: {
1: "대비",
2: "변칙",
3: "통일",
4: "반복"
},
infoAnswer: "1",
infoDesc : "버퍼 : 서로다른 장치간에 속도 차이를 해결하기 위한 기억 장치"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110115",
infoQuestion: "다음이 설명하고 있는 원근법은?<br><img style='width:450px' src='./img/15번.png'>",
infoChoice: {
1: "직선원근법",
2: "대기원근법",
3: "과장원근법",
4: "다각원근법"
},
infoAnswer: "2",
infoDesc : "버스 : 컴퓨터에서 모든 데이터가 이동하는 통로(제어버스 : 제어신호가 이동, 데이터 버스 : 데이터가 이동)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110116",
infoQuestion: "패턴 디자인은 디자인 원리 중 무엇을 이용한 것인가?",
infoChoice: {
1: "반복",
2: "동세",
3: "강조",
4: "이동"
},
infoAnswer: "1",
infoDesc : "위 그림에서 A, B 모두 연결되어야 전구에 불이 들어 오므로 둘다 참이어야 합니다. AND 회로를 나타내는 것입니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110117",
infoQuestion: "다음은 민들레꽃의 홀씨에 대한 그림이다. 이 그림에 해당하는 디자인 원리는?<br><img style='width:460px' src='./img/17번.png'>",
infoChoice: {
1: "율동",
2: "착시",
3: "조화",
4: "균형"
},
infoAnswer: "1",
infoDesc : "우선 14를 표현한뒤 2의 보수로 바꾸어 주면 됩니다. <br> 14 : 00001110 위 14를 2의 보수로 바꾸면 됩니다. <br> 2의 보수 바꾸는법 : 오른쪽 끝에서 처음 1을 만날때까지는 똑같이 적고 나머지는 반대로 적기"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110118",
infoQuestion: "기계화와 대량생산에 의한 생활용품의 품질저하에 반대하여 윌리엄 모리스를 중심으로 영국에서 일어난 수공예 부흥 운동은?",
infoChoice: {
1: "구성주의(CONSTRUCTIVISM)",
2: "미래주의(FUTURISM)",
3: "데 스틸(DE STILL)",
4: "미술공예운동(ART AND CRAFTS MOVEMENT)"
},
infoAnswer: "4",
infoDesc : "A'+B'를 드모르간 정리를 이용해서 바꿔 보시면 됩니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110119",
infoQuestion: "환경 디자인에 속하지 않는 것은?",
infoChoice: {
1: "인테리어 디자인",
2: "무대 디자인",
3: "가구 디자인",
4: "조경 디자인"
},
infoAnswer: "3",
infoDesc : "명령어의 구성 <br> 명령어 코드부 + 주소부 (한글) <br> OP-code + Oprand (영문)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110120",
infoQuestion: "CIP(Corporate Identity Program)의 베이직 시스템에 속하는 것은?",
infoChoice: {
1: "심벌마크, 로고타입, 전용서체",
2: "로고타입, 전용색상, 서식류",
3: "서식류, 제품포장, 캐릭터",
4: "유니폼, 간판(표지), 시그니처"
},
infoAnswer: "1",
infoDesc : "명령어는 단순할수록 더 빠른 속도를 가집니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110121",
infoQuestion: "자바 스크립트에서 내장 객체에 대한 설명으로 틀린 것은?",
infoChoice: {
1: "내장 객체는 문자열 처리, 수학 처리 등을 할 수 있는 객체들로 이루어져 있다.",
2: "Screen 내장 객체는 브라우저의 화면 정보 관련 속성을 제공한다.",
3: "Math 내장 객체는 수학 관련 속성과 메서드를 제공한다.",
4: "Number 내장 객체는 함수를 정의하고, 작업을 간단하게 처리할 수 있는 기능을 제공한다."
},
infoAnswer: "4",
infoDesc : "<문제 해설> DML(데이터 조작 언어) SELECT - FROM - WHERE : 검색 <br> INSERT - INTO - VALUES : 삽입 <br> UPDATE - SET WHERE : 갱신(업데이트) <br> DELETE - FROM - WHERE(삭제) <br> (테이블내의 레코드 조작 언어)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110122",
infoQuestion: "전자우편(e-mail)을 전송할 때 사용되는 프로토콜은?",
infoChoice: {
1: "FTP",
2: "SMTP",
3: "Telnet",
4: "Usenet"
},
infoAnswer: "2",
infoDesc : "데이터 베이스 언어 <br> DDL : 데이터 베이스 정의어 <br> DML : 데이터 베이스 조작어 <br> DCL : 데이터 베이스 제어어"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110123",
infoQuestion: "스타일시트와 <BODY>태그 속성과의 연결이 잘못된 것은?",
infoChoice: {
1: "A:link{color:#ff0000;} -<body link='#ff0000'>",
2: "A:active{color:#ff0000;} -<body alink='#ff0000'>",
3: "A:hover{color:#ff0000;} -<body hink='#ff0000'>",
4: "UsA:visited{color:#ff0000;} -<body vink='#ff0000'>enet"
},
infoAnswer: "3",
infoDesc : "DDL(데이터 베이스 정의 언어) <br> CREATE : DB 테이블, 뷰 생성 <br> ALTER : 테이블 변경 <br> DROP : 데이터베이스, 테이블, 제거(삭제)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110124",
infoQuestion: "TCP/IP에 대한 설명으로 잘못된 것은?",
infoChoice: {
1: "인터넷의 기본적인 통신 규약이다.",
2: "Linux나 UNIX 운영체제가 탑재된 워크스테이션이나 미니컴퓨터를 주축으로 운영되고 있다",
3: "TCP가 IP보다 상위층에 존재한다.",
4: "인트라넷이나 엑스트라넷과 같은 사설망에서도 사용된다."
},
infoAnswer: "2",
infoDesc : "스프레드시트의 기본단위 : 셀 <br> 프리젠테이션의 화면단위 : 슬라이드"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110125",
infoQuestion: "다음 인터넷 역사 중 가장 나중에 일어난 것은?",
infoChoice: {
1: "웹 브라우저인 넷스케이프가 등장하였다.",
2: "Gopher, WAIS 서비스를 시작하였다.",
3: "TCP/IP 프로토콜 표준으로 채택되었다.",
4: "USENET 서비스가 시작되었다."
},
infoAnswer: "1",
infoDesc : "DML(데이터 조작 언어) <br> SELECT - FROM - WHERE : 검색 <br> INSERT - INTO - VALUES : 삽입 <br> UPDATE - SET WHERE : 갱신(업데이트) <br> DELETE - FROM - WHERE(삭제) <br> DROP은 DML이 아니라 DDL입니다"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110126",
infoQuestion: "anonymous FTP 서비스에 대한 설명으로 틀린 것은?",
infoChoice: {
1: "FTP서버의 계정이 없어도 아무나 접근하여 파일전송을 지원받을 수 있는 서비스이다.",
2: "사용하는 계정명은 anonymous 이다.",
3: "파일의 송 · 수신이 가능하다.",
4: "공개 파일들은 일반적으로 'pub' 라는 디렉터리 내에 저장한다."
},
infoAnswer: "3",
infoDesc : "외부 스키마 : 서브스키마 <br> 개념 스키마 : 논리적 스키마 <br> 내부 스키마 : 물리적 스키마"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110127",
infoQuestion: "HTML의 테이블과 관련이 없는 태그는?",
infoChoice: {
1: "<TR>",
2: "<TH>",
3: "<DT>",
4: "<CAPTION>"
},
infoAnswer: "3",
infoDesc : "데이터 베이스 일반 <br> 레코드 = 행 = 튜플(Tuple) <br> 필드 = 열 = 속성(Attribute) <br> 도메인(Domain) : 하나의 속성이 취할수 있는 속성 값들의 집합(범위) <br> 차수(Degree) : 속성의 갯수 <br> 기수(Cardinality) : 튜플의 갯수"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110128",
infoQuestion: "하나의 건물 내 또는 캠퍼스내의 소규모 네트워크 통신망을 의미하는 것은?",
infoChoice: {
1: "VAN",
2: "WAN",
3: "LAN",
4: "MAN"
},
infoAnswer: "3",
infoDesc : "필터 : 조건에 맞는 자료만 검색하여 보는 방법 <br> 매크로 : 키보드 조작 및 마우스 조작을 기억하였다가 자동으로 반복 수행하는 방식"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110129",
infoQuestion: "자바스크립트에 대한 설명으로 옳지 않은 것은?",
infoChoice: {
1: "서버에서 컴파일한 결과를 HTML 문서에 삽입하며, HTML파일과 별도로 존재한다.",
2: "사용자가 컴퓨터와 대화하듯 메시지를 주고받을 수 있는 홈페이지 제작이 가능하다.",
3: "HTML로는 표현이 불가능한 프로그램적인 활용이나 동적인 표현이 가능하다.",
4: "웹 브라우저에서 사용할 수 있는 스크립트 언어로 HTML 문서 내에 함께 기술될 수 있다."
},
infoAnswer: "1",
infoDesc : "프리젠테이션의 화면 단위 : 슬라이드 <br> 스프레드시트의 기본 단위 : 셀"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110130",
infoQuestion: "OSI 7계층에 해당되지 않는 것은?",
infoChoice: {
1: "데이터 링크 계층",
2: "네트워크 계층",
3: "논리 계층",
4: "표현 계층"
},
infoAnswer: "3",
infoDesc : "SELECT : 검색 명령어 <br> * : 모든 데이터를 가지고 옴 <br> FROM 사원 : 사원 테이블로부터 가지고 오시오"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110131",
infoQuestion: "일반적으로 검색 엔진에 inter* 라고 입력했을 때, 검색될 수 없는 정보는?",
infoChoice: {
1: "internet",
2: "international",
3: "intercept",
4: "intranet"
},
infoAnswer: "4",
infoDesc : "FDISK : 파티션 분할 명령어(파티션 디스크의 약자) <br> CHKDSK : 체크 디스크의 약자로 디스크 오류 수정"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110132",
infoQuestion: "로그인시 아이디 저장과 같이 웹 서버가 사용자에 관한 정보를 사용자 컴퓨터에 저장하도록 허용하는 것은?",
infoChoice: {
1: "Session",
2: "Cookie",
3: "MIME",
4: "URL"
},
infoAnswer: "2",
infoDesc : "DOS 명령어 : UNIX 명령어 <br> dir : ls(파일 목록 보기) <br> attrib : chmod(속성, 권한 변경) <br> type : cat(파일 내용 화면 표시) <br> copy : cp (파일 복사) <br> ren : mv (이름변경, 파일이동) <br> del : rm(파일 삭제)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110133",
infoQuestion: "웹 페이지를 디자인할 때 고려해야 할 사항이 아닌 것은?",
infoChoice: {
1: "사용자 개개인의 선호도나 사용수준에 맞춰 누구라도 쉽게 사용할 수 있도록 디자인한다.",
2: "사용자의 경험이나 학력, 언어능력 또는 집중력 정도에 차이를 두어 사용자 개개인 별로 난이도에 맞게 디자인한다.",
3: "사용자가 우연한 또는 의도하지 않은 선택의 결과로 어려움에 빠지는 경우를 최소화하도록 디자인한다.",
4: "사용자에게 필요한 정보를 효과적으로 전달하도록 디자인한다."
},
infoAnswer: "2",
infoDesc : "DOS 명령어 : UNIX 명령어 <br> dir : ls(파일 목록 보기) <br> attrib : chmod(속성, 권한 변경) <br> type : cat(파일 내용 화면 표시) <br> copy : cp (파일 복사) <br> ren : mv (이름변경, 파일이동) <br> del : rm(파일 삭제)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110134",
infoQuestion: "다음이 설명하고 있는 것은?<br><img style='width:450px' src='./img/34번.png'>",
infoChoice: {
1: "SGML",
2: "VML",
3: "DHTML",
4: "WML"
},
infoAnswer: "3",
infoDesc : "가. 10% <br> 나. 디스크 공간 차지한다. <br> 다. 휴지통에서 삭제 명령을 해야 비우기가 된다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110135",
infoQuestion: "자바스크립트 언어의 기본적인 특성으로 틀린 것은?",
infoChoice: {
1: "대 · 소문자를 구분한다.",
2: "변수 이름에 공백 문자를 사용할 수 있다.",
3: "하나의 명령문이 끝나면, 세미콜론(;)을 기술한다.",
4: "변수 이름은 반드시 영문자 또는 밑줄(_)로 시작해야 한다."
},
infoAnswer: "2",
infoDesc : "가. 설정은 시작 메뉴를 클릭하면 보인다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110136",
infoQuestion: "다음이 설명하고 있는 인터넷 서비스는?<br><img style='width:450px' src='./img/36번.png'>",
infoChoice: {
1: "Telnet",
2: "FTP",
3: "Usenet",
4: "IRC"
},
infoAnswer: "4",
infoDesc : "디스크로 부터 시스템 소프트웨어를 처음 읽어 들이는 것을 설명하고 있다. => 부트"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110137",
infoQuestion: "다음이 설명하고 있는 인터넷 서비스는?<br><img style='width:450px' src='./img/37번.png'>",
infoChoice: {
1: "TCP",
2: "IP",
3: "SMTP",
4: "SLIP/PPP"
},
infoAnswer: "4",
infoDesc : "DOS 부팅 순서 <br> IO.SYS(반드시 필요) <br> MSDOS.SYS(반드시 필요) <br> CONFIG.SYS(설정관련, 드라이브등) <br> COMMAND.COM(반드시 필요) <br> AUTOEXEC.BAT(자동실행, 시작프로그램)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110138",
infoQuestion: "웹브라우저의 기능 중 등록된 URL목록을 변경하거나 추가하는 기능은?",
infoChoice: {
1: "편집 기능",
2: "책갈피 기능",
3: "파일 기능",
4: "페이지 보기 기능"
},
infoAnswer: "2",
infoDesc : "between : 사이 <br> user : 사용자 <br> hardware : 하드웨어 <br> 하드웨어와 사용자 사이에 있다는 것을 통하여 운영체제임을 알수 있습니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110139",
infoQuestion: "다음 중 웹 브라우저의 종류가 아닌 것은?",
infoChoice: {
1: "넷스케이프",
2: "익스플로러",
3: "모자이크",
4: "드림위버"
},
infoAnswer: "4",
infoDesc : "스풀링 : CPU관여 없이 하드디스크와 저속의 프린트기 사이에서 데이터를 주고 받으면서 출력하는 방법으로 프린트 출력중 CPU가 다른일을 할수 있다"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110140",
infoQuestion: "문서 간 이동이나 한 문서 내에서의 이동을 위해 사용되는 링크를 의미하며, 특정한 단어나 그림을 선택하면 이들과 연결된 다른 문서나 혹은 다른 미디어로 이동하는 역할을 하는 것은?",
infoChoice: {
1: "HTTP Text Transfer Protocol",
2: "Hyper Text Markup Language",
3: "Hyperlink",
4: "Browser"
},
infoAnswer: "3",
infoDesc : "응답시간의 지연은 컴퓨터의 속도가 느려진다는 뜻입니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110141",
infoQuestion: "웹 사이트를 제작하기 위해 타사의 웹 사이트를 분석하는 이유로 가장 부적합한 것은?",
infoChoice: {
1: "해당 분야의 인터넷 시장을 파악한다.",
2: "경쟁 사이트들을 분석하여 자신의 사이트 경쟁력을 제고 한다.",
3: "인터넷 시장의 흐름을 이해한다.",
4: "웹 사이트에 사용할 이미지를 얻는다."
},
infoAnswer: "4",
infoDesc : "쉘(Shell) : 도스의 명령어 해석기인 Command.com과 같은 명령어 해석기의 일종이다. <br> % : C쉘, <br> $ : 콘쉘, 번쉘"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110142",
infoQuestion: "하나의 이미지에 여러 개의 링크를 지정할 수 있게 만드는 것은?",
infoChoice: {
1: "자바 스크립트(Java Script)",
2: "프레임(Frame)",
3: "이미지 맵(Image map)",
4: "사이트 맵(Site map)"
},
infoAnswer: "3",
infoDesc : "부팅 : 컴퓨터에 전원을 공급하여 컴퓨터를 사용할수 있는 상태로 만드는 작업"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110143",
infoQuestion: "프랑스 수학자 멘델브로프(B.B Mandelbrot)가 발표한 Fractal 이론을 바탕으로 산의 표면, 복잡한 해안선, 구름 등 자연계의 복잡한 사물을 사실적으로 시뮬레이션한 시기는?",
infoChoice: {
1: "1950년대",
2: "1960년대",
3: "1970년대",
4: "1980년대"
},
infoAnswer: "4",
infoDesc : "바로가기 아이콘은 여러개가 존재하여도 상관 없습니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110144",
infoQuestion: "기업의 로고나 문자가 있는 일러스트레이션 같이 선명한 단색 이미지를 포함하고, 동일 색상이 수평으로 나열되어 있을 경우에 높은 압축률을 보이는 파일포맷은?",
infoChoice: {
1: "PNG-8",
2: "JPEG",
3: "GIF",
4: "PSD"
},
infoAnswer: "3",
infoDesc : "마우스 오른쪽 버튼을 사용하여 속성을 볼수 있습니다"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110145",
infoQuestion: "컴퓨터 모니터상에 디지털 이미지가 표현될 때, 그래픽 이미지 표시의 기본 단위는?",
infoChoice: {
1: "칼럼(Column)",
2: "섹터(Sector)",
3: "워드(Word)",
4: "픽셀(Pixel)"
},
infoAnswer: "4",
infoDesc : "Alt + PrtScr : 활성창만 복사 <br> PrtScr : 전체 화면 복사"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110146",
infoQuestion: "NTSC 방식의 애니메이션에서 1초당 필요한 최소 프레임 개수로 옳은 것은?",
infoChoice: {
1: "10",
2: "20",
3: "30",
4: "40"
},
infoAnswer: "3",
infoDesc : "파일의 구조가 선형이 아닌 비선형(트리) 구조로 되어 있습니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110147",
infoQuestion: "PNG(Portable Network Graphics) 파일포맷에 대한 설명으로 옳은 것은?",
infoChoice: {
1: "256가지의 색상만을 사용한 압축된 포맷형식이다.",
2: "일반적으로 JPG 파일보다 파일용량이 적다.",
3: "GIF처럼 이미지 일부를 투명하게 하며 고해상도를 지원한다.",
4: "MS사의 익스플로러에서만 지원 가능하다."
},
infoAnswer: "3",
infoDesc : "Fragmentation : 디스크에 데이터가 연속적으로 기록된것이 아닌 분산되어 기록되어 있는 상태"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110148",
infoQuestion: "웹디자인 프로세스에 대한 설명으로 잘못된 것은?",
infoChoice: {
1: "디자인 스타일링이란 컨셉(concept)에 맞추어 아이디어를 수집, 발전, 결정하는 것을 말한다.",
2: "디자인 발의란 어떤 사이트를 어떻게 만들 것인가에 대한 의견제시 과정이다.",
3: "디자인 개발단계에서는 인력을 적재적소에 분배한다.",
4: "디자인 조사 및 분석 단계에서는 컬러시스템, 그리드시스템, 레이아웃 등을 계획한다."
},
infoAnswer: "4",
infoDesc : "DELETE : 삭제 <br> UNDELETE : 삭제 취소(복원, 되살리기)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110149",
infoQuestion: "디더링(Dithering)에 대한 설명으로 옳은 것은?",
infoChoice: {
1: "제한된 컬러를 사용하여 본래의 높은 비트로 된 컬러의 효과를 최대한으로 내는 처리기법",
2: "사용자 팔레트를 사용하여 화면에 나타나는 모든 컬러의 종류를 바꾸는 기법",
3: "2가지 서로 다른 영상이나 3차원 모델 사이를 자연스럽게 결합시키는 처리 기법",
4: "기존의 비디오나 필름, 혹은 애니메이션 필름 위에 그림을 그리는 처리 기법"
},
infoAnswer: "1",
infoDesc : "원하는 크기만큼 끌어서 당기면 됩니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110150",
infoQuestion: "컴퓨터그래픽스 시스템에 사용되는 입력 장치로 적합하지 않은 것은?",
infoChoice: {
1: "마우스",
2: "플로터",
3: "스캐너",
4: "터치스크린"
},
infoAnswer: "2",
infoDesc : "attrib : +(속성부여), -(속성해제) <br> R : 읽기 전용 속성 <br> A : 저장 속성(일반속성) <br> S : 시스템 파일 속성 <br> H : 숨김속성(중요함!!!)"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110151",
infoQuestion: "다음 ( )안에 공통으로 들어갈 알맞은 용어는?<br><img style='width:450px' src='./img/51번.png'>",
infoChoice: {
1: "텍스트(text)",
2: "템플릿(Template)",
3: "컬러(Color) ",
4: "인터페이스(Interface)"
},
infoAnswer: "2",
infoDesc : "신호분할 다원 접속은 없습니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110152",
infoQuestion: "전체 페이지에 적용되는 시각적 계층구조와 효율적인 내비게이션을 위해 버튼 및 아이콘 시스템에 대한 설계를 하는 것은 ?",
infoChoice: {
1: "인터페이스 디자인",
2: "정보디자인",
3: "콘텐츠 기획",
4: "구조설계"
},
infoAnswer: "1",
infoDesc : "50[Baud]란 1초에 50회 신호 변환이 일어 난다는 뜻이므로 1회 신호변환 시간은 0.02초 입니다. 1/50 = 0.02"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110153",
infoQuestion: "비트맵과 벡터방식의 이미지를 동시에 저장할 수 있는 파일 포맷이 아닌 것은 ?",
infoChoice: {
1: "PSD",
2: "PDF",
3: "EPS",
4: "TIFF"
},
infoAnswer: "4",
infoDesc : "정보통신 시스템의 4대요소는 단말장치, 전송회로, 통신제어장치, 컴퓨터이고 5대요소는 단말장치, 전송회로, 통신제어장치, 컴퓨터, 통신S/W입니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110154",
infoQuestion: "컴퓨터 그래픽스의 개념에 대한 설명으로 틀린 것은 ?",
infoChoice: {
1: "넓은 의미로 컴퓨터를 이용한 모든 이미지와 영상을 말한다.",
2: "컴퓨터에서 도구나 아이디어를 얻는 기술을 말한다.",
3: "아이디어의 표현 도구로써 최대한 활용된다.",
4: "사용자가 그래픽 프로그램을 이용하여 작업을 한다."
},
infoAnswer: "2",
infoDesc : "비동기식 전송 특징 : 스타트비트, 스톱비트, 2000bps 이하, FSK방식, 한문자 단위, 저속 전송"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110155",
infoQuestion: "직사각형 화면의 화소 또는 픽셀들을 0과 1로 표현한 것은?",
infoChoice: {
1: "벡터",
2: "주사선",
3: "비트맵",
4: "객체"
},
infoAnswer: "3",
infoDesc : "OFDM은 고속의 송신 신호를 다수의 직교 하는 협대역 반송파로 다중화시키는 변조 방식을 말한다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110156",
infoQuestion: "웹디자인 기획 시 고려해야할 사항과 가장 거리가 먼 것은?",
infoChoice: {
1: "사이트의 목적과 필요성을 충분히 인식하였는가?",
2: "유사, 경쟁 사이트의 디자인 분석은 완료했는가?",
3: "일련의 과정들에 대한 문서들의 보관 및 데이터 백업은 완료하였는가?",
4: "통일성 확보를 위한 컬러, 톤, 폰트, 레이아웃의 원칙들은 수립되었는가?"
},
infoAnswer: "3",
infoDesc : "아날로그 -> 디지털 변조 <br> PCM 변조 과정 : 표본화-양자화-부호화-복호화-여과"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110157",
infoQuestion: "정보의 양이 많고 정보의 우선순위에 따라 사이트를 제작할 때 유용한 웹 사이트 탐색구조는?",
infoChoice: {
1: "링구조",
2: "망형구조",
3: "계층구조",
4: "선형구조"
},
infoAnswer: "3",
infoDesc : "bps : 비트 퍼 세컨더의 약자로 1초당 전송되는 비트수를 말합니다. <br> baud : 보 라고 읽으면 1초당 신호 변환 속도를 말합니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110158",
infoQuestion: "다음은 무엇에 관한 설명인가 ?<br><img style='width:450px' src='./img/58번.png'>",
infoChoice: {
1: "앨리어싱(Aliasing)",
2: "안티-앨리어싱(Anti-Aliasing)",
3: "패더(Feather)",
4: "스타일(Style)"
},
infoAnswer: "2",
infoDesc : "멀티포인트변조 방식은 없습니다."
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110159",
infoQuestion: "두 개의 서로 다른 이미지나 3차원 모델 사이의 변화하는 과정을 서서히 나타내는 것은?",
infoChoice: {
1: "모핑",
2: "로토스코핑",
3: "미립자 시스템",
4: "중첩 액션"
},
infoAnswer: "1",
infoDesc : "도플러 효과 : 이동통신의 전파특성 중 이동체가 송신측으로 빠르게 다가오거나 멀어짐에 따라 수신 신호의 주파수 천이가 발생하는 현상"
},
{
infoType: "웹디자인 기능사",
infoTime: "2011년 1회",
infoNumber: "20110160",
infoQuestion: "다음 설명은 무엇에 대한 활용인가?<br><img style='width:450px' src='./img/60번.png'>",
infoChoice: {
1: "내비게이션 디자인(Navigation Design)",
2: "웹 타이포그래피 디자인(Web Typographic Design)",
3: "웹 컬러 디자인(Web Color Design)",
4: "웹 인터페이스 디자인(Web Interface Design)"
},
infoAnswer: "2",
infoDesc : "사용자들이 회선을 사용하는 시간을 나누어, 순서대로 돌아가며 짧은 시간씩 회선을 사용하는 방식."
}
];
// 선택자
const quizWrap = document.querySelector(".quiz__wrap");
let quizScore = 0;
// 문제 출력
const UpdateQuiz = () => {
const exam = [];
quizInfo.forEach((question, number) => {
// 탬플럿 리터럴 방식
exam.push(
`
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title">${question.infoType} ${question.infoTime}</h2>
</div>
<div class="quiz__main">
<div class="quiz__question">
<em>${number + 1}</em>. ${question.infoQuestion}
</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다!</div>
<div class="false">틀렸습니다..</div>
<div class="card-container">
<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>
</div>
<div class="quiz__choice">
<label for="choice1${number}">
<input type="radio" id="choice1${number}" name="choice${number}" value="1">
<span>${question.infoChoice[1]}</span>
</label>
<label for="choice2${number}">
<input type="radio" id="choice2${number}" name="choice${number}" value="2">
<span>${question.infoChoice[2]}</span>
</label>
<label for="choice3${number}">
<input type="radio" id="choice3${number}" name="choice${number}" value="3">
<span>${question.infoChoice[3]}</span>
</label>
<label for="choice4${number}">
<input type="radio" id="choice4${number}" name="choice${number}" value="4">
<span>${question.infoChoice[4]}</span>
</label>
</div>
<div class="quiz__desc">정답은 <em>${question.infoAnswer}</em> 입니다.<br> ${question.infoDesc}</div>
</div>
</div>
`
);
});
exam.push(
`
<div class="quiz__info">
${quizScore}점
</div>
<div class="quiz__check">
정답 확인
</div>
`
);
quizWrap.innerHTML = exam.join("");
// 설명 숨기기
document.querySelectorAll(".quiz__desc").forEach((question) => {
question.style.display = "none";
});
}
UpdateQuiz();
// 정답 확인
// 로딩되기 전
const answerQuiz = () => {
const quizChoices = document.querySelectorAll(".quiz__choice");
// 사용자가 체크한 정답 === 문제 정답 맞는지 확인
quizInfo.forEach((question, number) => {
const userSelector = `input[name=choice${number}]:checked`;
const quizSelectorWrap = quizChoices[number];
// 왼쪽은 값이 있고 / 오른쪽은 값이 없을때
const userAnswer = (quizSelectorWrap.querySelector(userSelector) || {}).value;
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");
if(userAnswer == question.infoAnswer){
// alert("정답");
dogWrap[number].classList.add("like");
dogWrap[number].classList.remove("dislike");
quizScore++;
}
else{
// alert("오답");
dogWrap[number].classList.add("dislike");
dogWrap[number].classList.remove("like");
}
});
// 설명 보이기
document.querySelectorAll(".quiz__desc").forEach((question) => {
question.style.display = "block";
});
// 점수 보이기
document.querySelector(".quiz__info").innerHTML = Math.ceil((quizScore / quizInfo.length) * 100) + "점";
};
// 정답 클릭
document.querySelector(".quiz__check").addEventListener("click", answerQuiz);
</script>코드 설명
1. const quizInfo에는 "시험 종류", "회차", "문제 번호", "문제", "문제 내용", "문제 답", "문제 설명"이 들어갑니다.
2. const quizWrap은 .quiz__wrap의 클래스를 찾습니다.
3.
const exam = [];
quizInfo.forEach((question, number) => {
// 탬플럿 리터럴 방식
exam.push(
`
<div class="quiz">
<div class="quiz__header">
<h2 class="quiz__title">${question.infoType} ${question.infoTime}</h2>
</div>
<div class="quiz__main">
<div class="quiz__question">
<em>${number + 1}</em>. ${question.infoQuestion}
</div>
<div class="quiz__view">
<div class="dog__wrap">
<div class="true">정답입니다!</div>
<div class="false">틀렸습니다..</div>
<div class="card-container">
<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>
</div>
<div class="quiz__choice">
<label for="choice1${number}">
<input type="radio" id="choice1${number}" name="choice${number}" value="1">
<span>${question.infoChoice[1]}</span>
</label>
<label for="choice2${number}">
<input type="radio" id="choice2${number}" name="choice${number}" value="2">
<span>${question.infoChoice[2]}</span>
</label>
<label for="choice3${number}">
<input type="radio" id="choice3${number}" name="choice${number}" value="3">
<span>${question.infoChoice[3]}</span>
</label>
<label for="choice4${number}">
<input type="radio" id="choice4${number}" name="choice${number}" value="4">
<span>${question.infoChoice[4]}</span>
</label>
</div>
<div class="quiz__desc">정답은 <em>${question.infoAnswer}</em> 입니다.<br> ${question.infoDesc}</div>
</div>
</div>
`
);
});
exam.push(
`
<div class="quiz__info">
${quizScore}점
</div>
<div class="quiz__check">
정답 확인
</div>
`
);
quizWrap.innerHTML = exam.join("");
// 설명 숨기기
document.querySelectorAll(".quiz__desc").forEach((question) => {
question.style.display = "none";
});const exam= []; -> exam을 배열로 선언합니다.
그리고
exam을 push로 사용해서 백틱 연산자를 이용해서 HTML코드로 작성했습니다.
exam안에 배열로 html코드를 넣어서 만들다보니 ",(콤마)"가 찍혀서 나와서 제거하기 위해서
quizWrap.innerHTML = exam.join("");을 사용했습니다.
4.
// 정답 확인
// 로딩되기 전
const answerQuiz = () => {
const quizChoices = document.querySelectorAll(".quiz__choice");
// 사용자가 체크한 정답 === 문제 정답 맞는지 확인
quizInfo.forEach((question, number) => {
const userSelector = `input[name=choice${number}]:checked`;
const quizSelectorWrap = quizChoices[number];
// 왼쪽은 값이 있고 / 오른쪽은 값이 없을때
const userAnswer = (quizSelectorWrap.querySelector(userSelector) || {}).value;
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");
if(userAnswer == question.infoAnswer){
// alert("정답");
dogWrap[number].classList.add("like");
dogWrap[number].classList.remove("dislike");
quizScore++;
}
else{
// alert("오답");
dogWrap[number].classList.add("dislike");
dogWrap[number].classList.remove("like");
}
});
// 설명 보이기
document.querySelectorAll(".quiz__desc").forEach((question) => {
question.style.display = "block";
});
// 점수 보이기
document.querySelector(".quiz__info").innerHTML = Math.ceil((quizScore / quizInfo.length) * 100) + "점";
};const quizChoices = document.querySelectorAll(".quiz__choice");.quiz__choice에 선언된 클래스를 찾습니다.(이 안에는 radio버튼이 4개 들어있습니다.(문제 내용))
const userSelector = `input[name=choice${number}]:checked`;input 태그가 checked가 되었으면 상수 userSelector에 저장합니다.
const quizSelectorWrap = quizChoices[number];input 태그를 담고 있는 .quiz__choice클래스를 찾아서 상수 quizSelectorWrap에 저장합니다.
(.quiz__choice는 radio버튼 4개를 담고 있습니다.)
const userAnswer = (quizSelectorWrap.querySelector(userSelector) || {}).value;userSelector은 input태그가 checked가 되어있으면 true값을 반환하고
checked가 되어 있지 않으면 빈문자열을 출력합니다.
그리고 userAnswer에 저장합니다.
const dogWrap = quizWrap.querySelectorAll(".dog__wrap");.dog__wrap클래스는 "정답입니다.!", "틀렸습니다.."와 "강아지 div태그"가 있습니다.
여기서 class를 추가하거나 삭제하여 style을 변경합니다.
if(userAnswer == question.infoAnswer){
// alert("정답");
dogWrap[number].classList.add("like");
dogWrap[number].classList.remove("dislike");
quizScore++;
}
else{
// alert("오답");
dogWrap[number].classList.add("dislike");
dogWrap[number].classList.remove("like");
}userAnswer에는 input태그가 "체크가 됐는지" or 안됐는지 판단 후 "상수에 저장된 문제의 답"을 가져와서 비교한 후
true, false면 .dog__wrap클래스에 있는 "정답입니다.!", "틀렸습니다.."와 "강아지 div태그"에 클래스를 부여하거나 삭제합니다.
5.
// 정답 클릭
document.querySelector(".quiz__check").addEventListener("click", answerQuiz);.quiz__check의 클래스를 찾고. 이 클래스를 클릭했다면
익명함수인 answerQuiz를 실행 시킵니다.
