재구성 출제 고지: 이 모의고사는 국가평생교육진흥원 독학학위제 웹 프로그래밍 과목의 공식 출제기준(평가영역)을 근거로 새로 구성한 재구성 문항입니다. 실제 기출 문항을 그대로 옮긴 것이 아니며, 회차별 실제 문항 수·시험 시간은 매 공고마다 다를 수 있으므로 응시 전 반드시 공고 확인이 필요합니다. 전체 22문항을 시간 제한 없이 먼저 풀어본 뒤, 문제 아래 해설로 정답 근거와 오답 이유를 하나씩 확인하세요.
문항 구성
| 영역 | 문항 수 | 문항 번호 |
|---|---|---|
| 인터넷과 웹의 기본 구조 | 3 | 1–3 |
| HTML | 4 | 4–7 |
| CSS | 4 | 8–11 |
| JavaScript | 5 | 12–16 |
| XML과 Ajax | 3 | 17–19 |
| 웹 표준과 접근성 | 3 | 20–22 |
문제 1
다음과 같은 URL이 있다.
https://www.example.com:8080/products/list?category=shoes&page=2이 URL을 구성하는 각 부분(스킴, 호스트, 포트, 경로, 쿼리스트링)을 정확히 구분할 수 있어야 한다. 콜론(:) 뒤에 오는 숫자는 포트 번호이고, 물음표(?) 뒤에 오는 문자열은 서버에 추가로 전달할 조건을 담은 쿼리스트링이다. https의 기본 포트는 443이지만, URL에 포트가 명시되어 있으면 그 값을 우선 사용한다.
문제 2
HTTP는 클라이언트가 서버에 무언가를 요청(request)하고 서버가 그 결과를 응답(response)으로 돌려주는 프로토콜이다. 요청에는 목적에 따라 여러 메서드가 있는데, 그중 GET과 POST의 차이는 시험에서 자주 다루는 지점이다.
문제 3
브라우저 주소창에 도메인 이름을 입력하고 엔터를 누르면, 그 이름을 실제 서버의 IP 주소로 바꾸는 과정과 서버에 연결해 문서를 받아오는 과정이 순서대로 일어난다.
문제 4
HTML5는 문서의 각 영역이 어떤 역할을 하는지 드러내는 시맨틱(semantic, 의미론적) 태그를 제공한다. header, nav, section, article, aside, footer가 대표적이다.
문제 5
폼(form)은 사용자 입력을 받아 서버로 전달하는 HTML의 핵심 기능이다. input 요소의 type 속성 값에 따라 입력 방식과 브라우저의 기본 검증 동작이 달라진다.
문제 6
다음은 직원 명단의 일부를 나타낸 표다.
<table>
<thead>
<tr><th>이름</th><th>부서</th><th>직급</th></tr>
</thead>
<tbody>
<tr><td rowspan="2">홍길동</td><td>영업팀</td><td>사원</td></tr>
<tr><td>기획팀</td><td>대리</td></tr>
</tbody>
</table>rowspan 속성은 세로 방향으로 셀을 병합할 때, colspan 속성은 가로 방향으로 셀을 병합할 때 쓴다. 속성 값은 병합해서 차지할 행(또는 열)의 개수를 뜻한다.
문제 7
HTML 문서는 doctype 선언으로 시작하고, head와 body로 구성된 계층 구조를 가진다.
문제 8
다음 CSS 규칙이 하나의 스타일시트에 함께 있고, 대상 문단은 id 값이 main인 요소 안, class 값이 box인 요소 안에 있으며 자신도 class 값 active를 가지고 있다고 하자.
#main .box p {
color: blue;
}
.box p.active {
color: red;
}CSS 우선순위(specificity, 명시도)는 아이디 선택자·클래스 선택자·태그 선택자 개수를 비교해서 정해진다. 아이디 선택자 하나는 클래스 선택자를 아무리 많이 조합해도 이기는 가장 강한 단위다.
문제 9
다음과 같은 CSS가 적용된 div 요소가 있다.
div {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: content-box;
}box-sizing 속성의 기본값인 content-box에서는 width에 지정한 값이 content(내용) 영역만을 가리키고, padding과 border는 그 바깥에 추가로 더해진다.
문제 10
position 속성은 요소를 문서 흐름의 어디에 어떻게 배치할지를 결정한다.
문제 11
display 속성은 요소가 화면에서 차지하는 형태(줄바꿈 여부, 너비·높이 적용 여부)를 결정한다.
문제 12
다음 코드를 살펴보자.
for (var i = 0; i < 3; i++) {
setTimeout(function () {
console.log(i);
}, 0);
}var로 선언한 변수는 함수 스코프(또는 전역 스코프)를 가지며 블록 스코프를 만들지 않는다. setTimeout에 넘긴 콜백 함수는 대기 시간이 0이어도 반복문이 전부 끝난 뒤에야 실행된다. 반복문이 끝난 시점의 i 값을 한 줄씩 따라가 보면 다음과 같다.
| 시점 | i의 값 | 비고 |
|---|---|---|
| 반복문 진입 전 | 0 | var i가 함수(전역) 스코프에 하나만 존재 |
| 1회차 종료 후 | 1 | 콜백 3개가 모두 같은 i를 참조 |
| 2회차 종료 후 | 2 | - |
| 3회차 조건 검사 실패 | 3 | 반복문 종료, i는 3으로 고정 |
| 콜백 3개 실행 시점 | 3 | 모두 같은 i를 참조하므로 3, 3, 3 출력 |
문제 13
다음 코드를 살펴보자.
console.log(0 == "0");
console.log(0 === "0");
console.log(null == undefined);
console.log(null === undefined);동등 비교 연산자는 두 값의 타입이 다르면 한쪽을 다른 쪽 타입으로 변환한 뒤 비교하고, 일치 비교 연산자는 타입 변환 없이 타입과 값이 모두 같아야 참이 된다. null과 undefined는 서로 다른 타입이지만 동등 비교에서만 예외적으로 같다고 취급되는 특별한 규칙이 있다.
문제 14
다음 코드를 살펴보자.
const numbers = [1, 2, 3];
const result = numbers.map(function (n) {
return n * 2;
});
console.log(result);
console.log(numbers);map 메서드는 배열의 각 요소에 함수를 적용한 결과를 담은 새로운 배열을 반환하며, 원본 배열 자체는 변경하지 않는다.
문제 15
다음 코드를 살펴보자.
console.log(typeof greet);
console.log(typeof sayHi);
function greet() {
return "hello";
}
var sayHi = function () {
return "hi";
};함수 선언문(function greet)은 실행 전 단계에서 함수 전체가 미리 메모리에 올라가는 호이스팅이 일어나 어디서든 바로 호출할 수 있다. 반면 var로 선언한 변수는 선언만 끌어올려지고 값 대입은 원래 코드 위치에서 이루어지므로, 대입 이전 시점에는 undefined 상태다.
문제 16
다음 코드를 살펴보자.
<button id="btn">클릭</button>
<script>
const button = document.getElementById("btn");
button.addEventListener("click", function () {
console.log("클릭됨");
});
</script>getElementById는 문서 안에서 지정한 id 값을 가진 요소 하나만 찾아 반환하며, addEventListener는 특정 이벤트가 발생했을 때 실행할 함수를 등록한다.
문제 17
XML(Extensible Markup Language, 확장 가능한 마크업 언어)은 HTML처럼 태그 구조를 쓰지만, 태그의 종류와 의미를 미리 정해 두지 않고 문서를 작성하는 사람이 필요에 따라 자유롭게 만들어 쓴다는 점이 가장 큰 차이다.
문제 18
다음은 도서 정보를 표현한 XML 문서다.
<도서>
<제목>독학사 웹프로그래밍</제목>
<가격>15000</가격>
</도서>XML 문서가 잘 정형화되었다(well-formed)고 인정받으려면 몇 가지 구조 규칙을 지켜야 한다.
문제 19
Ajax(Asynchronous JavaScript and XML, 비동기 자바스크립트와 XML)는 이름에 XML이 들어 있지만, 실제로는 페이지 전체를 새로고침하지 않고도 자바스크립트로 서버와 데이터를 주고받는 기법 전반을 가리키는 말로 자리 잡았다.
문제 20
웹 표준(web standard)은 특정 회사나 브라우저의 독자적인 방식이 아니라, W3C(World Wide Web Consortium, 월드와이드웹 컨소시엄) 같은 표준화 기구가 정한 공통 규격을 뜻한다.
문제 21
웹 접근성(web accessibility)의 대표적인 국제 원칙은 인식의 용이성(perceivable), 운용의 용이성(operable), 이해의 용이성(understandable), 견고성(robust) 네 가지로 요약된다.
문제 22
다음 img 요소를 살펴보자.
<img src="chart.png" alt="2024년 분기별 매출 증가 추이 막대그래프">alt 속성은 이미지를 대체하는 텍스트를 지정하는 속성으로, 웹 접근성과 검색 엔진 최적화 모두에 영향을 준다.