재구성 출제 고지: 이 모의고사는 국가평생교육진흥원 독학학위제 웹 프로그래밍 과목의 공식 출제기준(평가영역)을 근거로 새로 구성한 재구성 문항입니다. 실제 기출 문항을 그대로 옮긴 것이 아니며, 회차별 실제 문항 수·시험 시간은 매 공고마다 다를 수 있으므로 응시 전 반드시 공고 확인이 필요합니다. XML·Ajax·웹 표준·접근성은 개념 간 비교와 사례 판별이 핵심 출제 지점이므로, 두 개념의 차이가 무엇인지 스스로 한 문장으로 말할 수 있는지 확인하며 풀어 보세요.
문항 구성
| 영역 | 문항 수 | 문항 번호 |
|---|---|---|
| 인터넷과 웹의 기본 구조 | 2 | 1–2 |
| HTML | 3 | 3–5 |
| CSS | 3 | 6–8 |
| JavaScript | 4 | 9–12 |
| XML과 Ajax | 5 | 13–17 |
| 웹 표준과 접근성 | 5 | 18–22 |
문제 1
HTTP와 HTTPS는 이름이 비슷하지만 통신 내용의 보호 여부에서 근본적인 차이가 있다.
문제 2
브라우저는 서버에서 받은 HTML과 CSS를 그대로 그리는 것이 아니라, 몇 단계의 내부 처리를 거쳐 화면을 구성한다.
문제 3
문서의 언어와 문자 인코딩은 head 안의 속성과 메타 태그로 지정한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>예시 문서</title>
</head>
<body></body>
</html>문제 4
새 탭에서 외부 링크를 열 때는 보안을 위한 추가 속성을 함께 지정하는 것이 권장된다.
<a href="https://example.com" target="_blank" rel="noopener">외부 링크</a>문제 5
관련된 폼 요소들을 시각적·의미적으로 묶고 그룹 전체에 제목을 붙일 때 fieldset과 legend를 함께 사용한다.
<fieldset>
<legend>배송 정보</legend>
<label for="addr">주소</label>
<input type="text" id="addr" name="addr">
</fieldset>문제 6
화면 너비에 따라 다른 스타일을 적용하려면 미디어 쿼리(media query)를 사용한다.
.container { display: block; }
@media (max-width: 768px) {
.container { display: none; }
}문제 7
콜론 하나로 쓰는 선택자와 콜론 두 개로 쓰는 선택자는 이름은 비슷해도 역할이 다르다.
문제 8
flex 컨테이너의 자식 배치는 justify-content 속성으로 조절한다.
<div style="display: flex; justify-content: space-between; width: 300px;">
<div style="width: 50px;">A</div>
<div style="width: 50px;">B</div>
<div style="width: 50px;">C</div>
</div>문제 9
다음 코드를 살펴보자.
const obj = { name: "민수", age: 20 };
const jsonText = JSON.stringify(obj);
console.log(typeof jsonText);
const parsed = JSON.parse(jsonText);
console.log(parsed.age);JSON.stringify는 자바스크립트 값을 JSON 형식의 문자열로 바꾸고, JSON.parse는 그 반대로 JSON 문자열을 다시 자바스크립트 값으로 되돌린다.
문제 10
다음 코드를 살펴보자.
const user = { id: 1, name: "하늘", email: "sky@example.com" };
const { name, email } = user;
console.log(name);
console.log(email);구조 분해 할당(destructuring assignment)은 객체의 속성 이름과 똑같은 이름의 변수를 만들어 그 값을 한 번에 꺼내 담는 문법이다.
문제 11
다음 코드를 살펴보자.
function parseNumber(text) {
try {
const value = JSON.parse(text);
return value;
} catch (error) {
return "변환 실패";
}
}
console.log(parseNumber("123"));
console.log(parseNumber("이건 숫자가 아님"));try 블록 안에서 오류가 발생하면 그 즉시 실행이 멈추고 catch 블록으로 넘어가 오류를 처리한다. JSON.parse는 올바른 JSON 형식이 아닌 문자열을 받으면 오류를 발생시킨다.
문제 12
다음 코드를 살펴보자.
const values = [0, "", null, undefined, NaN, "0", []];
let count = 0;
values.forEach(function (v) {
if (v) {
count++;
}
});
console.log(count);조건문에서 값 자체를 그대로 검사하면, 그 값이 참으로 취급되는지(truthy) 거짓으로 취급되는지(falsy)에 따라 결과가 갈린다. 0, 빈 문자열, null, undefined, NaN은 falsy로 취급되는 대표적인 값이지만, 문자 0이 들어 있는 문자열 “0”과 빈 배열은 falsy가 아니라 truthy로 취급된다는 점이 자주 틀리는 지점이다.
문제 13
다음은 네임스페이스(namespace)를 선언한 XML 문서다.
<book xmlns:lib="http://example.com/library">
<lib:title>독학사 웹프로그래밍</lib:title>
</book>같은 태그 이름이 서로 다른 출처의 문서에서 각기 다른 의미로 쓰일 수 있으므로, XML은 xmlns 속성으로 네임스페이스를 선언해 접두어를 통해 태그의 출처를 구분한다.
문제 14
XML 문서의 구조를 미리 정해 두고 그 구조를 지켰는지 검사하는 방법으로 DTD나 XML 스키마가 쓰인다.
문제 15
전통적인 폼 제출 방식과 Ajax 방식은 서버와 데이터를 주고받는 방식과 화면 갱신 방식에서 차이가 있다.
문제 16
브라우저가 서버와 비동기로 통신하는 방법에는 오래전부터 쓰인 XMLHttpRequest 객체와, 비교적 최근에 도입된 fetch 함수가 있다.
문제 17
폼에 입력된 값을 서버로 보낼 때는 자바스크립트 객체를 JSON 문자열로 바꾸어 전송하는 경우가 많다.
const formData = { title: "글 제목", content: "내용입니다" };
fetch("/api/posts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(formData),
});문제 18
제목 태그(h1부터 h6까지)는 글자 크기를 위한 것이 아니라 문서의 논리적인 구조를 나타내기 위한 태그다.
<h1>독학사 웹 프로그래밍</h1>
<h3>1단원 소개</h3>문제 19
시각 장애나 저시력, 색약 등을 가진 사용자도 텍스트를 읽을 수 있으려면 글자 색과 배경색 사이에 충분한 명도 대비가 필요하다.
문제 20
레이블과 입력란을 연결하는 방법에는 for·id로 따로 연결하는 방식과, label이 input을 감싸는 방식이 있다.
<label>
이메일
<input type="email" name="email">
</label>문제 21
자동화된 접근성 검사 도구는 유용하지만 만능은 아니며, 판단할 수 있는 범위에 한계가 있다.
문제 22
모바일 기기에서 페이지가 알맞은 크기로 보이게 하려면 viewport 메타 태그를 지정하는 것이 표준적인 방법이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">