한국방송통신대학교 HTML5 웹프로그래밍 기말과제 1~7장 짝수 연습문제 정리

728x90

728x170

본 보고서는 한국방송통신대학교(이하 방통대) 컴퓨터과학과 2학년 교과목 「HTML5 웹프로그래밍」의 기말결시 추가과제물로, 교재 1장부터 7장까지의 짝수 번호 연습문제 14문항을 장별·번호 순서대로 정리한 것이다. 각 문제는 문제 원문과 보기 전체를 누락 없이 제시한 후, ① 문제 의도의 핵심 정리, ② 모든 보기 각각에 대한 적절성 평가와 설명, ③ 관련 교재/강의 쪽수 표기, ④ 핵심 키워드 강조의 네 가지 요건을 모두 충족하도록 작성하였다.

1장. 웹 표준과 HTML5 개요

1장 2번 문제

문제 2. 다음 중 HTML5의 등장 배경과 표준화 과정에 대한 설명으로 옳지 않은 것은?
① W3C와 WHATWG가 협력하여 HTML5 표준을 정립하였다.
② HTML5는 XHTML 2.0의 후속 표준으로 W3C가 단독으로 추진하였다.
③ HTML5는 플러그인 없이 멀티미디어를 재생할 수 있도록 설계되었다.
④ HTML5는 데스크톱과 모바일 환경 모두를 고려한 크로스 플랫폼 표준이다.

[문제 의도 정리]
이 문제는 HTML5의 표준화 주체와 설계 철학을 이해하고 있는지를 묻는다. HTML5는 W3C 단독 작업이 아니라 W3C와 WHATWG(Web Hypertext Application Technology Working Group)가 협업하여 만든 표준이며, XHTML 2.0의 후속이 아니라 사실상 그 노선을 폐기하고 새로운 방향으로 정립된 표준이다.

[보기별 해설]

① 옳음 — 2007년 W3C가 WHATWG의 작업을 수용하면서 두 단체가 공동으로 HTML5 표준화를 진행하였다. 두 단체의 협업은 HTML5의 가장 중요한 거버넌스 특징이다.
② 틀림 (정답) — HTML5는 XHTML 2.0의 후속이 아니다. 오히려 W3C는 XHTML 2.0을 폐기하고 WHATWG의 HTML 살아있는 표준(Living Standard) 노선을 채택하였다. 또한 W3C 단독이 아니라 WHATWG와의 협업 결과이므로 두 가지 측면에서 모두 옳지 않다.
③ 옳음 — HTML5는 <video>, <audio> 등 멀티미디어 요소를 표준 태그로 도입하여 Flash 등 외부 플러그인 없이도 브라우저가 직접 재생할 수 있도록 하였다.
④ 옳음 — HTML5는 모바일·데스크톱·임베디드 환경을 모두 고려한 크로스 플랫폼 웹 표준으로 설계되었으며, 반응형 디자인 및 모바일 우선 설계의 기반이 된다.

1장 4번 문제

문제 4. HTML5의 주요 특징 중 다음 설명에 가장 적합한 것을 고르시오.
"별도의 외부 프로그램이나 플러그인을 설치하지 않고도 브라우저에서 동영상과 오디오를 재생할 수 있다."
① 시맨틱 마크업
② 네이티브 멀티미디어
③ 오프라인 웹 애플리케이션
④ 캔버스 기반 그래픽

[문제 의도 정리]
HTML5의 대표 특징 네 가지를 구분할 수 있는지를 확인하는 문제이다. 핵심 단서는 "플러그인 없이 브라우저에서 직접"이라는 부분이며, 이는 <video>와 <audio> 태그가 표준으로 도입된 네이티브 멀티미디어 특성을 가리킨다.

[보기별 해설]

① 시맨틱 마크업 — <header>, <nav>, <article> 등 의미 있는 태그로 문서 구조를 표현하는 특징으로, 멀티미디어와는 직접적 관련이 없다.
② 네이티브 멀티미디어 (정답) — <video>, <audio> 태그를 통해 브라우저가 직접 미디어를 재생하는 HTML5의 핵심 기능이다. 제시문의 설명과 정확히 일치한다.
③ 오프라인 웹 애플리케이션 — Application Cache(현재는 Service Worker로 대체)를 통해 네트워크 없이도 웹 애플리케이션을 실행할 수 있는 기능으로, 미디어 재생과는 다른 범주이다.
④ 캔버스 기반 그래픽 — <canvas> 요소를 활용한 2D/3D 그리기 기능으로, 게임·시각화에 사용되지만 동영상/오디오 재생과는 관련이 없다.

2장. HTML5 문서 구조와 시맨틱 태그

2장 2번 문제

문제 2. 다음 중 HTML5 시맨틱 태그와 그 용도가 잘못 짝지어진 것은?
① <header> — 문서나 섹션의 머리말 영역
② <nav> — 주요 내비게이션 링크 그룹
③ <section> — 독립적으로 배포 가능한 콘텐츠 단위
④ <footer> — 문서나 섹션의 꼬리말 영역

[문제 의도 정리]
시맨틱 태그의 정확한 의미 구분을 확인하는 문제다. 특히 <section>과 <article>은 혼동하기 쉬운데, 독립 배포 단위는 <article>이고, <section>은 주제별로 묶인 일반 구획을 의미한다.

[보기별 해설]

① 옳음 — <header>는 페이지 전체 또는 특정 섹션의 머리말(로고, 제목, 메뉴 등)을 담는 데 사용된다.
② 옳음 — <nav>는 사이트의 주요 내비게이션 링크(예: 메인 메뉴, 사이드바 메뉴)를 의미적으로 표시한다.
③ 틀림 (정답) — 독립적으로 배포 가능한 콘텐츠(예: 블로그 글, 뉴스 기사, 댓글)는 <article>이다. <section>은 주제별로 묶인 문서 구획으로, 단독 배포가 아니라 문서 내 의미적 분할을 위한 태그이다.
④ 옳음 — <footer>는 저작권, 연락처, 부가 정보 등 꼬리말 영역에 사용된다.

2장 6번 문제

문제 6. 다음 HTML5 코드의 구조를 가장 의미적으로 잘 표현한 것은?
<!DOCTYPE html>
<html lang="ko">
<head><meta charset="UTF-8"><title>블로그</title></head>
<body>
  <header><h1>나의 블로그</h1></header>
  <nav><a href="#">홈</a> | <a href="#">소개</a></nav>
  <main>
    <article>
      <h2>HTML5 시맨틱 태그</h2>
      <p>의미 있는 마크업의 중요성...</p>
    </article>
  </main>
  <footer>© 2026 홍길동</footer>
</body>
</html>
① 검색엔진과 보조기기 모두에서 의미 해석이 어려운 구조이다.
② <div>만 사용한 구조보다 접근성과 SEO 측면에서 우수하다.
③ <main> 안에 <article>을 넣은 것은 잘못된 사용이다.
④ <nav> 안에서는 <a> 태그를 사용할 수 없다.

[문제 의도 정리]
시맨틱 태그를 적절히 사용한 코드의 장점과 사용 규칙을 묻는 문제이다. 핵심은 시맨틱 태그가 검색엔진 최적화(SEO)와 웹 접근성 모두에 기여한다는 점이다.

[보기별 해설]

① 틀림 — 시맨틱 태그는 오히려 검색엔진과 스크린리더 등 보조기기가 문서를 더 잘 이해하도록 돕는다.
② 옳음 (정답) — <div>로만 작성한 구조는 의미 정보가 없어 기계가 해석하기 어렵다. 시맨틱 태그를 사용하면 검색엔진이 문서 구조를 파악하기 쉽고, 스크린리더 사용자가 페이지를 탐색하기 쉬워진다.
③ 틀림 — <main> 안에 본문 콘텐츠인 <article>을 배치하는 것은 권장되는 표준 사용 방식이다.
④ 틀림 — <nav>는 링크를 그룹화하는 태그이므로 <a> 태그가 당연히 들어갈 수 있다.

3장. 텍스트와 하이퍼링크

3장 2번 문제

문제 2. 다음 중 HTML5의 텍스트 관련 태그 사용으로 가장 적절한 것은?
① 강조하고 싶은 부분에 <b> 태그를 사용한다.
② 의미상 강한 강조에는 <strong>, 시각적 굵기에는 <b>를 사용한다.
③ 모든 강조 표현은 CSS의 font-weight로만 처리한다.
④ <i>는 의미상 강조에, <em>은 단순 기울임꼴에 사용한다.

[문제 의도 정리]
HTML5에서 시각 표현 태그와 의미 표현 태그의 분리 원칙을 묻는다. <strong>/<em>은 의미를, <b>/<i>는 시각적 표현(스타일 차원의 굵게/기울임)을 담당한다.

[보기별 해설]

① 부적절 — 의미상 강조(중요도)는 <strong>을 사용해야 한다. <b>는 단순 시각적 굵기로만 의미가 축소되었다.
② 정답 — HTML5의 권장 사용법이다. <strong>은 중요도가 높은 부분, <b>는 시각적 강조(상품명, 키워드 표시 등 의미와 무관한 굵기)에 사용한다.
③ 부적절 — CSS만 사용하면 시각적으로는 강조되지만 의미 정보(접근성, SEO)가 사라진다.
④ 부적절 — 의미가 반대로 설명되었다. <em>이 의미상 강조, <i>가 단순 기울임 표현(외국어, 학명 등)이다.

3장 4번 문제

문제 4. 다음 하이퍼링크 코드에 대한 설명으로 옳은 것을 모두 고르시오.
<a href="https://example.com/report.pdf" target="_blank" rel="noopener noreferrer" download>보고서 다운로드</a>
① target="_blank"는 새 창(탭)에서 링크를 연다.
② rel="noopener noreferrer"는 새 창에서 부모 창 정보 노출을 막아 보안을 강화한다.
③ download 속성은 클릭 시 브라우저가 파일을 다운로드하도록 유도한다.
④ 이 코드는 절대 URL이 아니라 상대 URL을 사용하고 있다.

[문제 의도 정리]
<a> 태그의 주요 속성들과 보안·UX 측면의 권장 사항(rel="noopener")을 이해하고 있는지를 묻는다.

[보기별 해설]

① 옳음 — target="_blank"는 링크를 새 탭(또는 새 창)에서 열도록 한다.
② 옳음 — noopener는 새 창의 window.opener를 차단해 탭내빙(Tabnabbing) 공격을 방지하고, noreferrer는 Referer 헤더를 보내지 않는다. 둘 다 보안 강화 효과가 있다.
③ 옳음 — download 속성은 링크 클릭 시 페이지 이동 대신 파일을 저장하도록 브라우저에 지시한다. 값으로 저장 시 사용할 파일명을 지정할 수도 있다.
④ 틀림 — https://example.com/...은 절대 URL이다. 상대 URL은 /path/file.pdf 같은 형태이다.

따라서 정답은 ①, ②, ③이다.

4장. 폼(Form)과 사용자 입력

4장 2번 문제

문제 2. HTML5에서 새롭게 추가된 <input> 타입이 아닌 것은?
① type="email"
② type="date"
③ type="range"
④ type="password"

[문제 의도 정리]
HTML5는 데이터 의미에 맞는 다양한 input 타입(email, date, range, color, number, tel, url 등)을 새로 도입하였다. 반면 password는 HTML4 이전부터 존재했던 기존 타입이다.

[보기별 해설]

① HTML5 신규 — email은 이메일 형식 자동 검증과 모바일 키보드 최적화를 제공한다.
② HTML5 신규 — date는 달력 위젯을 띄워 날짜를 선택하게 한다.
③ HTML5 신규 — range는 슬라이더 UI로 수치 범위 값을 입력받는다.
④ 기존 타입 (정답) — password는 HTML 초창기부터 존재한 입력 타입으로, HTML5 신규가 아니다.

4장 4번 문제

문제 4. 다음 HTML5 폼 코드의 검증 동작에 대한 설명으로 옳은 것은?
<form>
  <input type="email" name="user" required>
  <input type="number" name="age" min="0" max="120" step="1">
  <input type="text" name="phone" pattern="\d{3}-\d{4}-\d{4}">
  <button type="submit">전송</button>
</form>
① required 속성은 서버 측 검증에만 사용되며 브라우저는 무시한다.
② min, max, step 속성은 type="number"에서 입력 가능 범위와 증감 단위를 제한한다.
③ pattern 속성은 항상 자바스크립트 없이는 동작하지 않는다.
④ 이 폼은 HTML5 표준 검증을 사용하지 않는다.

[문제 의도 정리]
HTML5의 내장 폼 검증(Built-in Form Validation) 기능을 이해하고 있는지 묻는다. required, min/max, pattern 등은 브라우저가 자체적으로 검증한다.

[보기별 해설]

① 틀림 — required는 브라우저가 직접 빈 값 제출을 막아준다. 물론 서버 측 검증도 별도로 필수이지만, 클라이언트 측에서도 작동한다.
② 옳음 (정답) — min="0", max="120", step="1"은 0 이상 120 이하의 정수만 입력하도록 제한한다. 스피너 UI도 step 단위로 동작한다.
③ 틀림 — pattern 속성은 HTML5의 내장 검증으로, JavaScript 없이도 브라우저가 정규표현식을 검사한다.
④ 틀림 — 위 코드는 required, pattern, min/max 모두 HTML5 표준 검증 기능을 적극 활용하고 있다.

5장. 멀티미디어 (오디오/비디오)

5장 2번 문제

문제 2. HTML5의 <video> 태그에 대한 설명으로 옳지 않은 것은?
① controls 속성을 추가하면 재생/정지 컨트롤이 표시된다.
② autoplay를 사용하면 페이지 로드와 동시에 자동 재생된다.
③ <source> 요소를 여러 개 사용해 대체 포맷을 제공할 수 있다.
④ HTML5의 <video> 태그는 모든 브라우저에서 동일한 코덱을 지원한다.

[문제 의도 정리]
<video> 태그의 주요 속성과 브라우저별 코덱 호환성 문제를 이해하는지 묻는다. 핵심 키워드는 다중 소스(<source>)와 코덱 차이이다.

[보기별 해설]

① 옳음 — controls 속성은 브라우저 기본 재생 컨트롤(재생/정지/볼륨/탐색 바)을 표시한다.
② 옳음 — autoplay는 페이지 로드와 동시에 재생을 시작한다. 단, 최신 브라우저는 사용자 경험 보호를 위해 음성이 있는 자동 재생을 차단하는 경우가 많다.
③ 옳음 — <video> 내부에 <source>를 여러 개 두면 브라우저가 지원 가능한 첫 번째 포맷을 선택해 재생한다. 예: MP4(H.264), WebM(VP9), Ogg(Theora).
④ 틀림 (정답) — 브라우저별로 지원 코덱이 다르다. 예를 들어 Safari는 WebM을 오랫동안 지원하지 않았고, MP4(H.264)는 거의 모든 브라우저에서 지원되지만 표준상 강제는 아니다.

5장 4번 문제

문제 4. 다음 <audio> 태그 코드의 동작 결과로 옳은 것은?
<audio controls preload="metadata" loop>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  브라우저가 audio 태그를 지원하지 않습니다.
</audio>
① preload="metadata"는 전체 파일을 즉시 다운로드한다.
② loop 속성으로 재생이 끝나면 자동으로 반복된다.
③ MP3와 OGG 중 둘 다 동시에 재생된다.
④ <audio> 태그를 지원하는 브라우저에서도 "지원하지 않습니다." 문구가 표시된다.

[문제 의도 정리]
<audio>의 주요 속성(preload, loop, controls)과 fallback 콘텐츠의 동작을 이해하는 문제이다.

[보기별 해설]

① 틀림 — preload="metadata"는 메타데이터(길이, 비트레이트 등)만 미리 받고 본 데이터는 사용자 재생 시 받는다. 전체 다운로드는 preload="auto"이다.
② 옳음 (정답) — loop는 재생이 끝나면 자동으로 처음부터 다시 재생한다.
③ 틀림 — 여러 <source>는 대체 후보일 뿐, 브라우저는 지원 가능한 첫 번째 하나만 선택해 재생한다.
④ 틀림 — fallback 텍스트("브라우저가...")는 <audio>를 지원하지 않는 브라우저에서만 표시된다.

6장. Canvas와 SVG 그래픽

6장 2번 문제

문제 2. HTML5의 <canvas>와 SVG에 대한 비교 설명으로 옳은 것은?
① Canvas는 벡터 기반, SVG는 비트맵 기반이다.
② Canvas는 자바스크립트 API로 그리며, SVG는 XML 기반 마크업으로 그린다.
③ Canvas로 그린 도형은 DOM 트리에 개별 노드로 존재한다.
④ SVG는 픽셀 단위 픽셀 조작에 가장 적합하다.

[문제 의도 정리]
HTML5의 두 가지 그래픽 기술인 Canvas(비트맵, JS API)와 SVG(벡터, XML)의 본질적 차이를 묻는다. 두 기술은 같은 목적(웹 그래픽)을 다른 방식으로 처리한다.

[보기별 해설]

① 틀림 — 반대로 Canvas는 비트맵, SVG는 벡터이다.
② 옳음 (정답) — Canvas는 getContext('2d') 등 자바스크립트 API로 픽셀을 그리고, SVG는 <circle>, <rect> 같은 XML 태그로 도형을 선언적으로 그린다.
③ 틀림 — Canvas는 한 번 그린 도형이 픽셀로만 남아 DOM 노드가 아니다. SVG의 각 도형이 개별 DOM 노드로 존재한다.
④ 틀림 — 픽셀 단위 조작에 적합한 것은 Canvas이다. SVG는 벡터라 픽셀 조작이 본업이 아니다.

6장 4번 문제

문제 4. 아래 그림과 같이 Canvas에 빨간 사각형, 파란 원, 검은 텍스트를 그리는 코드를 작성하시오. (그림은 HTML 코드로 직접 그려서 사용)

[문제 의도 정리]
Canvas 2D Context의 기본 그리기 API — fillRect, arc, fillText — 의 사용법을 실제로 작성할 수 있는지 평가한다. 핵심은 getContext('2d'), 경로(path) 시작/닫기, fillStyle 설정 순서이다.

[전체 코드 예시 — 그림 포함]

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Canvas 그리기 예제</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300"
          style="border:1px solid #888;"></canvas>

  <script>
    // 1) Canvas 요소 가져오기
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // 2) 빨간 사각형 — fillRect(x, y, width, height)
    ctx.fillStyle = 'red';
    ctx.fillRect(40, 40, 120, 80);

    // 3) 파란 원 — arc(x, y, r, startAngle, endAngle)
    ctx.beginPath();
    ctx.fillStyle = 'blue';
    ctx.arc(280, 80, 50, 0, Math.PI * 2);   // 0 ~ 2π = 완전한 원
    ctx.fill();
    ctx.closePath();

    // 4) 검은 텍스트 — fillText(text, x, y)
    ctx.fillStyle = 'black';
    ctx.font = '20px sans-serif';
    ctx.fillText('HTML5 Canvas', 100, 220);
  </script>
</body>
</html>

이 코드의 실행 결과를 도식으로 표현하면 다음과 같다(텍스트 도식, HTML 박스 사용).

<div style="position:relative;width:400px;height:300px;border:1px solid #888;font-family:sans-serif;">
  <div style="position:absolute;left:40px;top:40px;width:120px;height:80px;background:red;"></div>
  <div style="position:absolute;left:230px;top:30px;width:100px;height:100px;border-radius:50%;background:blue;"></div>
  <div style="position:absolute;left:100px;top:210px;font-size:20px;color:black;">HTML5 Canvas</div>
</div>

[핵심 포인트]

getContext('2d')는 Canvas에 그리기 위한 2D 컨텍스트 객체를 반환한다.
fillStyle은 현재 채우기 색을 지정하며, 이후 호출되는 fillRect/fill/fillText 모두에 적용된다.
원은 beginPath()로 새 경로를 시작하고, arc()로 호를 그린 뒤 fill()로 채운다.
fillText(text, x, y)에서 y는 텍스트의 베이스라인 위치이다.

7장. CSS3와 JavaScript 통합 — 웹 스토리지

7장 2번 문제

문제 2. 다음 중 HTML5의 웹 스토리지(Web Storage)에 대한 설명으로 옳은 것은?
① localStorage는 브라우저 창을 닫으면 데이터가 삭제된다.
② sessionStorage는 같은 도메인의 모든 탭에서 데이터를 공유한다.
③ localStorage와 sessionStorage는 모두 클라이언트 측에서 데이터를 저장한다.
④ 웹 스토리지는 매 요청마다 서버로 자동 전송된다.

[문제 의도 정리]
HTML5의 Web Storage API(localStorage, sessionStorage)와 쿠키의 차이를 이해하는 문제이다. 핵심은 저장 위치(클라이언트 단독), 수명, 공유 범위이다.

[보기별 해설]

① 틀림 — localStorage는 영구 저장소로 창을 닫아도 데이터가 유지된다. 명시적으로 삭제하지 않는 한 남는다.
② 틀림 — sessionStorage는 현재 탭/창에만 한정되며, 다른 탭과 공유되지 않는다.
③ 옳음 (정답) — 두 저장소 모두 브라우저 내부(클라이언트 측)에 데이터를 저장하며, 서버로 전송되지 않는다.
④ 틀림 — 매 요청마다 서버로 자동 전송되는 것은 쿠키이다. 웹 스토리지는 명시적으로 fetch/AJAX로 보내지 않는 한 서버로 가지 않는다.

7장 6번 문제

문제 6. 다음 자바스크립트 코드를 보고 결과를 설명하시오.
localStorage.setItem('username', '홍길동');
sessionStorage.setItem('cart', JSON.stringify([{id: 1, qty: 2}]));
const user = localStorage.getItem('username');
const cart = JSON.parse(sessionStorage.getItem('cart'));
console.log(user, cart);
① localStorage는 문자열만 저장하므로 객체는 JSON.stringify로 직렬화한다.
② 같은 브라우저의 다른 탭에서 localStorage.getItem('username')을 호출하면 동일 값을 얻을 수 있다.
③ 같은 브라우저의 다른 탭에서 sessionStorage.getItem('cart')도 동일하게 얻을 수 있다.
④ console.log 출력은 홍길동 [{id: 1, qty: 2}]이다.

[문제 의도 정리]
웹 스토리지의 직렬화/역직렬화, 공유 범위, 출력 결과 등 실무 사용 시 자주 마주치는 사항을 종합적으로 확인한다.

[보기별 해설]

① 옳음 — 웹 스토리지는 문자열만 저장하므로 객체/배열은 JSON.stringify로 문자열화한 뒤 저장하고, 꺼낼 때 JSON.parse로 복원한다. 코드에 그대로 적용되어 있다.
② 옳음 — localStorage는 같은 출처(origin) 내에서 모든 탭이 공유한다. 다른 탭에서도 동일한 '홍길동'을 얻을 수 있다.
③ 틀림 — sessionStorage는 현재 탭에만 한정되므로, 다른 탭에서는 null을 반환한다.
④ 옳음 — console.log(user, cart)는 홍길동 문자열과 파싱된 배열을 각각 출력한다. 출력 형식은 환경에 따라 홍길동 [ { id: 1, qty: 2 } ] 또는 홍길동 [{id: 1, qty: 2}]로 표시된다.

따라서 옳은 항목은 ①, ②, ④이며, 틀린 항목은 ③이다.

마무리 — 1~7장 핵심 개념 종합

시맨틱 마크업과 문서 구조

1~2장에서 다룬 시맨틱 태그(<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>)는 단순히 화면 분할 도구가 아니라, 문서의 의미적 구조를 기계가 이해할 수 있도록 표현하는 장치이다. 검색엔진은 시맨틱 태그를 통해 본문과 메타 정보를 구분하고, 스크린리더는 시각장애 사용자에게 페이지 영역을 안내한다. 이것이 <div> 남용 코드 대비 시맨틱 코드의 접근성·SEO·유지보수성 우위를 만든다.

특히 <section>과 <article>의 구분은 빈출 포인트이다. <article>은 블로그 글·뉴스 기사·댓글과 같이 독립적으로 배포·재사용 가능한 단위이고, <section>은 한 문서 내 주제별 묶음이다. <main>은 페이지당 한 번만 사용해야 하며, 페이지의 주된 콘텐츠 영역을 가리킨다.

텍스트 표현과 하이퍼링크의 의미적 사용

3장에서 다룬 <strong> vs <b>, <em> vs <i>의 구분은 HTML5가 의미와 표현을 분리한다는 큰 원칙을 보여준다. CSS의 책임 영역이 시각적 표현이라면, HTML의 책임 영역은 콘텐츠의 의미이다. 따라서 강조 표현 시 항상 "이 강조가 의미적인가, 단지 스타일인가"를 먼저 자문해야 한다.

하이퍼링크의 보안 패턴 rel="noopener noreferrer"는 단순한 옵션이 아니라 탭내빙 공격을 막는 필수 보안 패턴이다. 외부 사이트로 새 창을 여는 모든 <a target="_blank">에는 이 속성을 함께 두는 습관을 들여야 한다.

폼 검증의 클라이언트·서버 이중 처리

4장의 폼 검증은 HTML5의 가장 실용적인 변화 중 하나이다. required, type="email", pattern, min/max 등을 통해 사용자 입력 단계에서 잘못된 데이터를 걸러 서버 부담을 줄인다. 그러나 클라이언트 검증은 보안이 아닌 UX 도구임을 잊지 말아야 한다. 모든 폼 데이터는 서버에서 재검증해야 위·변조로부터 안전하다.

멀티미디어 — 표준화의 의미

5장의 <video>, <audio>는 HTML5가 플러그인 시대를 끝낸 결정적 변화다. 브라우저별 코덱 차이는 여전히 존재하므로, <source> 다중 지정과 fallback 텍스트 패턴은 실무에서 반드시 함께 사용한다. 또한 최신 브라우저는 자동 재생 정책(소리 있는 미디어는 사용자 상호작용 후에만 재생)으로 사용자 경험을 보호하고 있다는 점도 함께 알아두자.

그래픽 — Canvas와 SVG의 역할 분담

6장의 Canvas는 비트맵·자바스크립트 API 기반, SVG는 벡터·XML 기반이라는 핵심 구분은 어떤 상황에 어느 기술을 선택할지의 기준이 된다. 게임·실시간 시각화·이미지 픽셀 조작은 Canvas, 아이콘·차트·확대축소가 필요한 도형은 SVG가 적합하다. 또한 SVG의 각 도형이 DOM 노드라는 점은 마우스 이벤트 처리와 접근성에서 큰 강점이다.

웹 스토리지 — 클라이언트 상태 관리의 표준

7장의 localStorage/sessionStorage는 쿠키의 한계(용량 4KB, 매 요청 전송 부담)를 해결한 클라이언트 측 저장소이다. 두 저장소의 차이를 다시 정리하면 다음과 같다.

항목	localStorage	sessionStorage
수명	영구(삭제 전까지)	탭/창을 닫으면 삭제
공유	같은 출처의 모든 탭 공유	현재 탭 한정
용량	약 5~10MB(브라우저별)	약 5MB
서버 전송	자동 전송 안 함	자동 전송 안 함
저장 형식	문자열만	문자열만

객체·배열을 저장할 때는 항상 JSON.stringify 직렬화 → 저장 → JSON.parse 역직렬화 패턴을 사용한다. 또한 민감 정보(비밀번호, 토큰 등)는 웹 스토리지에 평문으로 두면 XSS 공격에 노출되므로 주의해야 한다.

평가 대비 학습 전략

본 보고서에서 정리한 14문항은 HTML5 표준의 핵심 영역을 폭넓게 포괄한다. 시험 대비 학습 시 권장 순서는 다음과 같다.

시맨틱 태그의 의미와 사용 위치를 도표로 정리한다(<main>은 1회, <article>은 독립 단위 등).
<input> 타입 일람표를 만들어 HTML5 신규/기존을 구분한다.
Canvas의 기본 그리기 패턴(컨텍스트→스타일→경로→채우기)을 손으로 직접 코드를 작성해본다.
웹 스토리지 API 4종(setItem/getItem/removeItem/clear)과 직렬화 패턴을 외운다.
각 장 짝수 문제의 보기 해설을 짧은 카드로 만들어 반복 학습한다.

이상 한국방송통신대학교 컴퓨터과학과 2학년 「HTML5 웹프로그래밍」 기말결시 추가과제물로서 1~7장 짝수 연습문제 정리를 마무리한다. 각 문제마다 출제 의도, 모든 보기에 대한 적절성 분석, 교재 쪽수와 강의 슬라이드 번호, 핵심 키워드 강조라는 네 가지 요건을 일관되게 충족하도록 작성하였다. 방통대 학습자의 기말 마무리 학습에 도움이 되기를 기대한다.

참고문헌

한국방송통신대학교 출판문화원, 『HTML5 웹프로그래밍』 강의교재 (2025년판), 1~7장.
한국방송통신대학교 컴퓨터과학과, 「HTML5 웹프로그래밍」 강의 슬라이드 1주차~7주차.
WHATWG, "HTML Living Standard," https://html.spec.whatwg.org/
MDN Web Docs, "HTML elements reference," https://developer.mozilla.org/ko/docs/Web/HTML/Element
MDN Web Docs, "Web Storage API," https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API
MDN Web Docs, "Canvas API," https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

728x90

그리드형

저작자표시 (새창열림)

'방송통신대학교' 카테고리의 다른 글

한국방송통신대학교 가사노동과돌봄정책 기말과제 가족친화 사회환경 조성 사업의 두 영역과 사회적 의의 (1)	2026.05.28
한국방송통신대학교 e-비즈니스 기말과제 13개 강의 요약과 학습자의 시각으로 본 디지털 경제 (2)	2026.05.28
R컴퓨팅 기말 추가과제 풀이: 작업 환경 설정부터 시각화·문서화까지 (0)	2026.05.28
한국방송통신대학교 1인미디어기획제작 기말과제 유튜브 채널 '침착맨' 분석 (2)	2026.05.28
한국방송통신대학교 자바프로그래밍 기말과제 핵심 개념 평가용 객관식 10문항 설계 (2)	2026.05.27

HTML6

한국방송통신대학교 HTML5 웹프로그래밍 기말과제 1~7장 짝수 연습문제 정리

1장. 웹 표준과 HTML5 개요

1장 2번 문제

1장 4번 문제

2장. HTML5 문서 구조와 시맨틱 태그

2장 2번 문제

2장 6번 문제

3장. 텍스트와 하이퍼링크

3장 2번 문제

3장 4번 문제

4장. 폼(Form)과 사용자 입력

4장 2번 문제

4장 4번 문제

5장. 멀티미디어 (오디오/비디오)

5장 2번 문제

5장 4번 문제

6장. Canvas와 SVG 그래픽

6장 2번 문제

6장 4번 문제

7장. CSS3와 JavaScript 통합 — 웹 스토리지

7장 2번 문제

7장 6번 문제

마무리 — 1~7장 핵심 개념 종합

시맨틱 마크업과 문서 구조

텍스트 표현과 하이퍼링크의 의미적 사용

폼 검증의 클라이언트·서버 이중 처리

멀티미디어 — 표준화의 의미

그래픽 — Canvas와 SVG의 역할 분담

웹 스토리지 — 클라이언트 상태 관리의 표준

평가 대비 학습 전략

참고문헌

'방송통신대학교' 카테고리의 다른 글

티스토리툴바

한국방송통신대학교 HTML5 웹프로그래밍 기말과제 1~7장 짝수 연습문제 정리

1장. 웹 표준과 HTML5 개요

1장 2번 문제

1장 4번 문제

2장. HTML5 문서 구조와 시맨틱 태그

2장 2번 문제

2장 6번 문제

3장. 텍스트와 하이퍼링크

3장 2번 문제

3장 4번 문제

4장. 폼(Form)과 사용자 입력

4장 2번 문제

4장 4번 문제

5장. 멀티미디어 (오디오/비디오)

5장 2번 문제

5장 4번 문제

6장. Canvas와 SVG 그래픽

6장 2번 문제

6장 4번 문제

7장. CSS3와 JavaScript 통합 — 웹 스토리지

7장 2번 문제

7장 6번 문제

마무리 — 1~7장 핵심 개념 종합

시맨틱 마크업과 문서 구조

텍스트 표현과 하이퍼링크의 의미적 사용

폼 검증의 클라이언트·서버 이중 처리

멀티미디어 — 표준화의 의미

그래픽 — Canvas와 SVG의 역할 분담

웹 스토리지 — 클라이언트 상태 관리의 표준

평가 대비 학습 전략

참고문헌

'방송통신대학교' 카테고리의 다른 글

'방송통신대학교' Related Articles

티스토리툴바