12. HTML 개념 확인 문제

재구성 출제 고지: 이 문제집은 국가평생교육진흥원 독학학위제 2단계 웹 프로그래밍 출제기준(HTML 문서 구조·주요 태그·표/폼·시맨틱 영역)의 평가 범위와 문항 유형을 분석해 새로 구성한 재구성 문항입니다. 실제 기출 문항을 그대로 옮긴 것이 아닙니다. 회차별 정확한 문항 수·시험 시간은 시행처 공고를 확인해야 하며, 여기서는 20문항을 표준 분량으로 구성했습니다.

출제 범위와 문항 배분

영역	문항 수	문항 번호	관련 편
문서 구조 판별	5	1–5	03
태그 용도 구분	5	6–10	03, 04
표·폼 기본 개념	6	11–16	05
시맨틱 태그 비교	4	17–20	04, 11

코드가 있는 문항은 먼저 눈으로 태그를 하나씩 짚어가며 “이 문서가 브라우저에 어떻게 그려질까”를 그려본 뒤 정답을 확인하세요. 독학사 시험은 태그를 실제로 그려보라는 실기 문제가 아니라, 태그의 의미·계층·용도를 정확히 짝지었는지를 묻는 문항이 대부분입니다.

문서 구조 판별 (1–5)

문제 1


<!DOCTYPE html>
<html>
  <head>
    <title>연습 문서</title>
  </head>
  <body>
    <p>안녕하세요</p>
  </body>
</html>

문제 14지선다

위 문서의 첫 줄에 있는 선언의 역할로 가장 적절한 것은?

브라우저에게 이 문서를 최신 HTML 표준 모드로 해석하라고 알려준다.문서의 저작권 정보를 브라우저에 전달한다.문서에 사용된 프로그래밍 언어의 버전을 서버에 알려준다.문서를 압축된 형태로 전송하라고 서버에 요청한다.

문제 2

문제 24지선다

HTML 문서에서 head 요소 안에 넣는 내용으로 가장 적절한 것은?

문서 제목, 문자 인코딩, 외부 스타일시트 연결처럼 화면에 직접 보이지 않는 메타 정보사용자에게 보여줄 문단과 이미지사용자가 클릭하는 버튼과 링크 목록문서의 각주와 참고 문헌 목록

문제 3


<!DOCTYPE html>
<html>
  <body>
    <head>
      <title>순서 실험</title>
    </head>
    <p>본문</p>
  </body>
</html>

문제 34지선다

위 문서처럼 head를 body 안쪽에 넣으면 어떤 일이 벌어지는가?

브라우저는 대부분 이를 보정해서 렌더링을 시도하지만, 표준 문서 계층을 어긴 잘못된 구조다.문서가 두 배로 빠르게 로딩된다.title에 지정한 문자열이 두 번 화면에 출력된다.어떤 브라우저에서도 완전히 빈 화면만 나온다.

문제 4

문제 44지선다

HTML에서 주석을 작성하는 방법으로 옳은 것은?

느낌표와 대시 두 개로 시작해서 대시 두 개로 닫는 형식을 사용한다.슬래시 두 개로 한 줄 전체를 주석 처리한다.샵 기호로 시작하는 줄은 모두 주석으로 처리된다.별표 두 개로 감싼 문자열은 주석으로 처리된다.

문제 5


<p>정상가는 100&amp;40원입니다.</p>

문제 54지선다

위 코드에서 앰퍼샌드(&)를 그대로 쓰지 않고 특별한 표기로 대체해서 쓴 이유로 가장 적절한 것은?

앰퍼샌드는 HTML 문법에서 특수한 의미로 예약된 기호라서 그대로 쓰면 다른 문자 참조의 시작으로 오인될 수 있기 때문이다.앰퍼샌드는 한글 인코딩과 충돌해서 문서가 깨지기 때문이다.앰퍼샌드를 그대로 쓰면 브라우저가 그 줄 전체를 주석으로 처리하기 때문이다.앰퍼샌드는 파일 이름에 쓸 수 없는 문자라서 문서 안에서도 금지되기 때문이다.

태그 용도 구분 (6–10)

문제 6


<h1>제목</h1>
<h3>소제목</h3>

문제 64지선다

위 코드에서 제목 태그 번호를 1에서 3으로 건너뛴 것에 대한 설명으로 가장 적절한 것은?

화면에는 문제없이 보일 수 있지만 문서의 논리적 제목 계층 구조를 건너뛰는 것이므로 구조적으로는 바람직하지 않다.브라우저가 이를 문법 오류로 판단해 문서 전체를 렌더링하지 않는다.건너뛴 숫자만큼 자동으로 빈 제목이 삽입된다.제목 태그의 번호는 화면에 보이는 글자 크기만 결정할 뿐 아무 의미가 없다.

문제 7


<ul>
  <li>첫 항목</li>
  <li>둘째 항목</li>
</ul>
<ol>
  <li>첫 단계</li>
  <li>둘째 단계</li>
</ol>

문제 74지선다

위 두 목록의 차이로 가장 적절한 것은?

위쪽은 순서가 중요하지 않은 목록, 아래쪽은 순서가 있는 목록으로 브라우저가 기본적으로 번호를 매겨 표시한다.두 목록은 화면에 동일하게 표시되며 이름만 다를 뿐 기능 차이는 없다.위쪽 목록은 최대 두 개 항목만 담을 수 있고 아래쪽은 제한이 없다.아래쪽 목록은 항목을 클릭해야만 내용이 보이는 접이식 목록이다.

문제 8


<a href="https://example.com">예시 사이트</a>

문제 84지선다

위 코드에서 속성에 지정한 값의 역할로 옳은 것은?

링크를 클릭했을 때 이동할 대상 주소를 지정한다.링크 글자의 색상을 지정한다.링크가 새 탭에서 열릴지 여부를 지정한다.링크에 마우스를 올렸을 때 나타날 설명 문구를 지정한다.

문제 9


<p>이 문장은 <strong>중요</strong>하고, 이 문장은 <em>강조</em>합니다.</p>

문제 94지선다

위 코드에서 두 태그의 의미 차이로 가장 적절한 것은?

앞의 태그는 내용의 중요성을 나타내고, 뒤의 태그는 어조상의 강조를 나타내며 둘 다 의미론적 태그다.두 태그는 색상만 다를 뿐 완전히 같은 의미를 가진다.앞의 태그는 글자를 기울이고, 뒤의 태그는 글자를 굵게 만든다.두 태그는 시각 장애인을 위한 보조 기술에서는 아무 차이 없이 동일하게 무시된다.

문제 10

문제 104지선다

이미지 삽입 태그에서 대체 텍스트를 지정하는 속성의 역할로 가장 적절한 것은?

이미지를 불러오지 못했을 때 대신 표시할 설명이자 스크린 리더가 읽어줄 텍스트를 제공한다.이미지의 실제 파일 용량을 지정한다.이미지를 클릭했을 때 이동할 주소를 지정한다.이미지의 가로세로 비율을 강제로 고정한다.

표·폼 기본 개념 (11–16)

문제 11


<table>
  <tr>
    <th>이름</th>
    <th>점수</th>
  </tr>
  <tr>
    <td>영희</td>
    <td>90</td>
  </tr>
</table>

문제 114지선다

위 표에서 첫 번째 행에 쓰인 셀 태그와 두 번째 행에 쓰인 셀 태그의 차이로 옳은 것은?

첫 번째 행의 태그는 제목 셀을 나타내 보통 굵고 가운데 정렬로 렌더링되고, 두 번째 행의 태그는 일반 데이터 셀을 나타낸다.두 태그는 완전히 동일하며 이름만 다를 뿐이다.첫 번째 행의 태그는 표의 테두리 색상을 결정한다.두 번째 행의 태그는 표 전체의 열 개수를 결정한다.

문제 12

문제 124지선다

폼 안에서 사용자가 입력한 값을 다른 서버로 어떤 방식으로 보낼지 지정하는 속성 두 가지로 가장 적절한 것은?

action(보낼 주소)과 method(전송 방식)name(요소 이름)과 id(요소 식별자)placeholder(안내 문구)와 required(필수 여부)width(너비)와 height(높이)

문제 13


<label for="email">이메일</label>
<input type="email" id="email" name="email" />

문제 134지선다

위 코드에서 label 태그의 for 속성 값과 input 태그의 id 속성 값을 일치시킨 이유로 가장 적절한 것은?

둘을 연결해 라벨 텍스트를 클릭해도 해당 입력란에 초점이 가도록 하고, 스크린 리더가 입력란의 이름표를 정확히 읽게 하기 위해서다.두 값이 같아야만 브라우저가 이메일 형식 검증을 수행하기 때문이다.두 값을 일치시키지 않으면 폼 전체가 전송되지 않기 때문이다.두 값이 같으면 입력란의 배경색이 자동으로 바뀌기 때문이다.

문제 14

문제 144지선다

입력 요소에 required 속성만 추가했을 때 나타나는 기본 동작으로 옳은 것은?

해당 입력란을 비운 채로 폼을 제출하려 하면 브라우저가 기본 제공하는 검증 메시지를 보여주며 제출을 막는다.입력란에 아무 값이나 입력해도 항상 오류로 표시된다.입력란이 자동으로 숨겨진다.입력란에 입력할 수 있는 글자 수가 5자로 제한된다.

문제 15


<video src="movie.mp4" controls></video>

문제 154지선다

위 코드에서 controls 속성을 뺐을 때 달라지는 점으로 가장 적절한 것은?

영상은 그대로 삽입되지만 재생·정지·음량 같은 기본 재생 도구 모음이 화면에 나타나지 않는다.영상 파일 자체가 브라우저에서 아예 로드되지 않는다.영상이 소리 없이 무한 반복 재생된다.영상 태그가 문법 오류로 인식되어 페이지 전체가 표시되지 않는다.

문제 16

문제 164지선다

input 요소의 type 속성 값을 checkbox로 설정했을 때의 기본 동작으로 옳은 것은?

사용자가 여러 항목 중 하나 이상을 선택하거나 선택하지 않을 수 있는 사각형 선택 상자가 표시된다.여러 옵션 중 반드시 하나만 선택할 수 있는 원형 선택 버튼이 표시된다.사용자가 자유롭게 여러 줄의 글을 입력할 수 있는 넓은 입력란이 표시된다.파일을 첨부할 수 있는 파일 선택 창이 자동으로 열린다.

시맨틱 태그 비교 (17–20)

문제 17

문제 174지선다

시맨틱 태그가 등장하기 전, 문서의 모든 구획을 범용 컨테이너 태그 하나로만 나누어 쓰던 방식의 한계로 가장 적절한 것은?

태그 이름만으로는 그 구획이 머리말인지 목차인지 본문인지 구분할 수 없어 검색 엔진이나 스크린 리더가 문서 구조를 이해하기 어렵다.범용 컨테이너 태그는 한 문서에 한 번만 사용할 수 있어서 구획을 여러 개 만들 수 없다.범용 컨테이너 태그 안에는 다른 태그를 전혀 넣을 수 없다.범용 컨테이너 태그를 쓰면 문서가 항상 두 배로 느리게 로딩된다.

문제 18


<article>
  <header>
    <h2>오늘의 소식</h2>
  </header>
  <p>본문 내용</p>
</article>

문제 184지선다

위 코드에서 article 태그를 사용하기에 적절한 상황으로 가장 적절한 것은?

문제 19

문제 194지선다

nav 태그와 aside 태그의 용도 차이로 가장 적절한 것은?

nav는 주요 이동 링크 모음을 감싸고, aside는 본문과 간접적으로만 관련된 보충 정보를 감싼다.nav는 표를 감싸고, aside는 폼을 감싼다.nav와 aside는 완전히 같은 의미이며 서로 바꿔 써도 무방하다.nav는 이미지 갤러리 전용이고, aside는 동영상 전용이다.

문제 20

문제 204지선다

한 문서 안에서 header 태그와 footer 태그를 여러 번 사용할 수 있는 경우로 가장 적절한 것은?

article이나 section처럼 각각 독립적인 구획 안에서 그 구획만의 머리말·꼬리말로 반복해서 쓸 수 있다.문서 전체에서 header와 footer는 각각 정확히 한 번씩만 쓸 수 있다.header와 footer는 body 태그 바로 아래에서만 쓸 수 있고 다른 태그 안에는 넣을 수 없다.header와 footer는 표 안에서만 반복해서 쓸 수 있다.