문항 구성

문제 1

웹의 통신 구조는 크게 역할이 고정된 클라이언트-서버 모델과, 참여자들이 대등하게 자원을 주고받는 P2P(Peer to Peer, 개인 대 개인) 모델로 나눌 수 있다.

문제 2

HTTP 응답에는 처리 결과를 요약해 알려주는 세 자리 숫자의 상태 코드가 함께 온다. 이 숫자의 첫 자리가 몇 인지에 따라 큰 범주가 나뉜다.

문제 3

폼 입력값을 브라우저 단계에서 검증할 때 required와 pattern 속성을 함께 쓰는 경우가 많다.

<input type="text" name="userid" required pattern="[A-Za-z0-9]{4,12}">

문제 4

멀티미디어 요소는 재생을 제어하는 여러 속성을 갖는다.

<video src="lecture.mp4" controls autoplay muted></video>

문제 5

div·span과 header, nav, section, article 같은 시맨틱 태그는 화면에 그려지는 방식이 아니라 문서 안에서의 역할을 드러내는지 여부로 구분된다.

문제 6

다음 CSS와 HTML을 살펴보자.

.list li { color: blue; }
.list > li { color: red; }

<ul class="list">
  <li>1단계
    <ul>
      <li>2단계</li>
    </ul>
  </li>
</ul>

공백으로 연결한 결합자는 자손 결합자, 부등호(greater-than 기호)로 연결한 결합자는 자식 결합자라고 부른다.

문제 7

CSS 속성 중 일부는 부모 요소에 지정하면 자식 요소에도 자동으로 전달되는데, 이를 상속(inheritance)이라 한다.

문제 8

CSS 규칙은 여러 곳에서 동시에 지정될 수 있어, 어느 것이 최종적으로 적용될지 결정하는 우선순위 규칙이 필요하다.

문제 9

다음 코드를 살펴보자.

<div id="outer">
  <button id="inner">클릭</button>
</div>
<script>
  document.getElementById("outer").addEventListener("click", function () {
    console.log("outer 처리");
  });
  document.getElementById("inner").addEventListener("click", function () {
    console.log("inner 처리");
  });
</script>

버튼을 클릭하면 이벤트는 실제로 클릭된 요소(inner)에서 먼저 발생한 뒤, 이벤트 버블링(event bubbling)에 의해 부모 요소(outer) 쪽으로 순서대로 전파되며 각 요소에 등록된 리스너를 차례로 실행한다.

문제 10

다음 코드를 살펴보자.

const person = {
  name: "지민",
  sayName: function () {
    console.log(this.name);
  },
  sayNameArrow: () => {
    console.log(this.name);
  },
};
person.sayName();
person.sayNameArrow();

일반 함수 표현식으로 정의한 메서드는 호출할 때 마침표 앞의 객체(여기서는 person)가 this로 결정된다. 반면 화살표 함수는 자기 자신의 this를 새로 만들지 않고, 함수가 정의된 위치를 둘러싼 스코프의 this를 그대로 물려받는다.

문제 11

다음 코드를 살펴보자.

const scores = [55, 82, 90, 47, 68];
const passed = scores.filter(function (score) {
  return score >= 60;
});
console.log(passed);

filter 메서드는 배열의 각 요소에 대해 콜백 함수를 실행해 그 결과가 참인 요소들만 모아 새 배열로 반환한다.

문제 12

다음 코드를 살펴보자.

const age = 17;
const message = age >= 19 ? "성인" : "미성년자";
console.log(message);

삼항 연산자는 조건식이 참이면 물음표 뒤의 값을, 거짓이면 콜론 뒤의 값을 결과로 만든다.

문제 13

이벤트 객체는 브라우저의 기본 동작을 제어하거나 이벤트 전파 방식을 제어하는 메서드를 제공한다.

문제 14

다음 코드를 살펴보자.

<ul id="list"></ul>
<script>
  const list = document.getElementById("list");
  const item = document.createElement("li");
  item.textContent = "새 항목";
  list.appendChild(item);
</script>

createElement는 아직 문서에 연결되지 않은 새 요소 노드를 메모리에 생성만 하고, appendChild가 호출되어야 실제로 문서 트리에 자식으로 연결되어 화면에 반영된다.

문제 15

다음 코드를 살펴보자.

<form id="loginForm">
  <input type="text" name="userid">
  <button type="submit">로그인</button>
</form>
<script>
  document.getElementById("loginForm").addEventListener("submit", function (e) {
    e.preventDefault();
    console.log("폼 제출을 가로챔");
  });
</script>

폼의 제출 버튼을 누르면 submit 이벤트가 발생하는데, 그 이벤트 객체의 preventDefault를 호출하면 원래 일어났을 페이지 이동(새로고침)을 막을 수 있다.

문제 16

다음은 카페 메뉴 정보를 표현한 XML 문서다.

<메뉴>
  <음식 종류="커피">아메리카노</음식>
  <음식 종류="음료">레모네이드</음식>
</메뉴>

XML에서 여는 태그 안에 이름=값 형태로 적힌 것은 자식 요소가 아니라 그 요소의 속성(attribute)이다.

문제 17

다음 코드를 살펴보자.

function getUser() {
  fetch("/api/user")
    .then(function (response) {
      return response.json();
    })
    .then(function (data) {
      console.log(data.name);
    });
  console.log("요청을 보냈습니다");
}
getUser();

fetch로 시작한 통신은 비동기로 처리되므로, 함수 안에서 fetch 호출 바로 다음 줄에 있는 코드가 서버 응답을 기다리지 않고 먼저 실행된다.

문제 18

JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)과 XML은 둘 다 데이터를 구조화해서 표현하는 형식이지만 문법이 다르다.

문제 19

다음 코드를 살펴보자.

let userName;
fetch("/api/user")
  .then(function (response) {
    return response.json();
  })
  .then(function (data) {
    userName = data.name;
  });
console.log(userName);

문제 20

키보드만으로 웹 페이지를 조작해야 하는 사용자를 위해, 원래 포커스를 받지 못하는 요소에 포커스 이동 기능을 추가할 수 있다.

<div tabindex="0" role="button">눌러보세요</div>

문제 21

role 속성은 ARIA(Accessible Rich Internet Applications, 접근 가능한 리치 인터넷 애플리케이션) 명세에서 정의한 속성으로, 요소의 실제 역할을 보조 기술에 알려주는 데 쓰인다.

문제 22

표(table) 요소는 본래 행과 열로 이루어진 데이터를 표현하기 위한 것이지만, 과거에는 페이지 전체 레이아웃을 짜는 용도로 오용되기도 했다.

참고 자료

• MDN Web Docs - Web APIs / Events 
• MDN Web Docs - DOM 
• MDN Web Docs - JavaScript 
• MDN Web Docs - AJAX 
• W3C WAI - Web Accessibility Initiative 
• 국가평생교육진흥원 독학학위제 공지사항