방송대 HTML5웹프로그래밍 1강: 웹 요청 과정과 의미 중심 HTML

방송대 HTML5웹프로그래밍 1강: 웹 요청 과정과 의미 중심 HTML

브라우저에 보이는 결과가 같다고 해서 같은 HTML은 아니다. 굵은 글자를 b와 strong 중 무엇으로 표현하는지, 간격을 br로 늘릴지 CSS에 맡길지에 따라 문서의 의미와 유지보수성이 달라진다. 이 글은 URL 입력부터 화면 렌더링까지의 흐름을 따라간 뒤, 구조·기계용 정보·본문 의미를 기준으로 올바른 요소를 선택하는 법을 만든다.

웹 페이지 한 장에는 통신과 문서 설계가 함께 들어 있다

사용자가 주소를 입력해 페이지를 보기까지는 네트워크의 요청·응답 과정과 HTML 문서의 해석 과정이 이어진다. 서버가 파일을 보내는 것으로 끝나는 것이 아니라, 브라우저가 HTML의 구조와 의미를 파악하고 CSS와 JavaScript를 결합해야 화면이 완성된다.

단계	핵심 질문	이 강의에서 연결되는 개념
주소 찾기	도메인이 가리키는 서버는 어디인가?	URL, DNS, IP 주소
데이터 교환	브라우저와 서버는 어떤 규칙으로 주고받는가?	클라이언트·서버, HTTP·HTTPS, 요청·응답
문서 해석	받은 자료에서 구조와 의미는 무엇인가?	HTML 요소, 속성, 문서 계층
화면 구성	표현과 동작은 어디서 더해지는가?	CSS, JavaScript, 파싱과 렌더링

따라서 HTML은 단순히 화면에 글자를 찍는 명령이 아니다. 서버가 전달한 콘텐츠를 브라우저, 검색 엔진, 스크린 리더가 이해할 수 있도록 구조와 의미를 표시하는 언어다.

인터넷은 기반이고 웹은 그 위에서 동작하는 서비스다

인터넷(Internet)은 전 세계의 네트워크를 연결한 인프라, 즉 “네트워크들의 네트워크”다. 강의는 그 출발을 1960년대 ARPANET과 연결하고, 인터넷 위에서 이메일·FTP·온라인 게임·웹 같은 여러 서비스가 제공된다고 설명한다.

웹(World Wide Web)은 인터넷에서 하이퍼링크로 문서를 연결하고 정보를 공유하는 서비스다. 1989년 팀 버너스리의 제안에서 출발했으며 URL, HTTP, HTML을 중심으로 작동한다. 포함 관계는 인터넷 ⊃ 웹이다.

판단 핵심: 인터넷 연결이 끊겼다는 말은 기반 네트워크의 문제를 가리키고, 특정 웹 페이지가 열리지 않는다는 말은 웹 서버·주소·문서 응답 등 더 좁은 범위의 문제일 수 있다.

사이트·문서·페이지는 서비스 범위와 표시 단위로 구분한다

용어	범위	판단 예
웹 사이트	여러 문서와 페이지가 모인 하나의 서비스	대학의 전체 웹 서비스
웹 문서	특정 주제·기능 단위의 HTML 중심 문서 집합	수강 안내라는 주제로 구성된 문서
웹 페이지	브라우저에서 한 번에 표시되는 단일 문서	보통 하나의 HTML 파일을 중심으로 표시되는 화면

세 용어는 서로 배타적인 파일 형식을 뜻하지 않는다. 서비스 전체를 말할 때는 사이트, 주제와 기능의 문서 묶음을 말할 때는 웹 문서, 브라우저의 한 표시 단위를 말할 때는 페이지라는 관점을 쓴다.

URL에서 화면까지는 다섯 사건으로 추적한다

1. URL 입력: 사용자가 브라우저에 자원의 주소를 입력한다.
2. DNS 조회: 도메인 이름에 대응하는 서버의 IP 주소를 얻는다.
3. 요청: 브라우저가 서버에 HTTP 또는 HTTPS 요청을 보낸다.
4. 응답: 서버가 HTML, CSS, JavaScript 등의 리소스를 돌려준다.
5. 파싱·렌더링: 브라우저가 받은 문서를 해석하고 화면을 그린다.

클라이언트는 서비스를 요청하는 쪽이며 이 강의에서는 브라우저가 대표적이다. 서버는 데이터를 저장하고 서비스를 제공하는 쪽이다. HTTP는 두 쪽이 데이터를 주고받는 통신 규약이며, 전송 내용을 보호해야 하는 실제 서비스에서는 HTTPS를 사용한다.

흐름을 잘못 읽는 경우: DNS가 HTML을 보내는 것은 아니다. DNS는 이름으로 서버 위치를 찾는 단계이고, 실제 문서 요청과 응답은 브라우저와 웹 서버 사이에서 일어난다. 캐시가 있으면 반복 접속의 일부 조회와 전송이 빨라질 수 있다.

HTML·CSS·JavaScript는 같은 화면에서 다른 책임을 맡는다

기술	주된 책임	이 기술로 판단할 질문
HTML	콘텐츠의 구조와 의미	이 내용은 제목인가, 문단인가, 인용인가?
CSS	색상·글꼴·간격·정렬·레이아웃	어떻게 보이고 배치되어야 하는가?
JavaScript	상태 변화·이벤트·동적 상호작용	사용자 행동에 어떻게 반응해야 하는가?

관심사의 분리는 화면 모양만 보고 HTML 요소를 고르지 않게 한다. “글자를 크게 보이게 하고 싶다”는 CSS의 문제이고, “이 문장이 문서의 최상위 제목이다”는 HTML의 문제다. 동작을 추가할 때는 JavaScript가 맡는다.

웹 프로그래밍의 범위도 이 책임을 따라 나뉜다. 프론트엔드는 사용자에게 보이는 화면과 클라이언트 동작을 다루고, 백엔드는 서버·데이터베이스·API와 비즈니스 로직을 다룬다. 둘은 HTTP, REST, JSON 같은 통신 규칙과 데이터 형식을 통해 정보를 교환한다. 이 강의의 초점은 HTML·CSS·JavaScript를 사용하는 프론트엔드의 기초 문서와 UI 구성이다.

웹 제작 과정은 역할 분담이 결과물로 이어지는 순서다

단계	결정하거나 만드는 것	다음 단계로 넘기는 결과
기획·설계	목적, 대상 사용자, 콘텐츠, 기능	요구사항과 정보 구조
디자인	UI·UX, 레이아웃, 색상, 이미지	디자인 시안
퍼블리싱	웹 표준에 맞춘 HTML·CSS	구조와 표현이 구현된 화면
프론트엔드 개발	JavaScript 동작과 상호작용	사용 가능한 클라이언트 기능
백엔드 개발	서버, DB, API, 업무 로직	데이터 처리와 서비스 기능
테스트·배포	환경별 확인, 오류 수정, 서버 반영	사용자에게 제공되는 웹 사이트

이 순서는 직무 이름을 외우기 위한 목록이 아니다. 앞 단계의 결정이 뒤 단계의 입력이 된다는 점이 중요하다. 목적과 콘텐츠가 불분명하면 의미 있는 HTML 구조를 만들기 어렵고, 구조가 불안정하면 디자인과 동작을 덧붙일수록 수정 비용이 커진다.

HTML 요소는 시작 태그·속성·내용·종료 태그로 읽는다

HTML 문서는 여러 요소(element)의 조합이다. 일반 요소는 시작 태그, 필요하면 속성, 내용, 종료 태그로 구성된다. 속성은 요소에 추가 정보를 주며 여러 속성은 공백으로 구분한다.

<p class="intro">HTML5의 개념</p>
<a href="https://example.com" target="_blank" rel="noopener">예시 링크</a>
<img src="logo.png" alt="학교 로고">

img, br, hr처럼 내용과 종료 태그가 없는 빈 요소도 있다. 태그명과 속성명은 대소문자를 구분하지 않지만 가독성과 다른 문법과의 호환을 위해 소문자로 작성하는 것이 기본이다. 파일 확장자는 .htm 또는 .html을 쓴다.

요소가 중첩되면 먼저 연 요소를 나중에 닫아야 한다. 두 칸 이상의 연속 공백은 일반 문장 표시에서 하나로 합쳐지므로 편집기에서 보이는 간격을 그대로 레이아웃으로 기대해서는 안 된다.

<article>
  <h2>제목</h2>
  <p>본문</p>
</article>

전역 속성과 전용 속성은 적용 범위로 나눈다

전역 속성은 여러 HTML 요소에서 공통으로 사용할 수 있고, 전용 속성은 특정 요소의 기능과 결합한다. 속성을 선택할 때는 “값이 무엇인가?”보다 먼저 “이 요소에서 허용되고 어떤 역할을 하는가?”를 확인한다.

• id: 문서 전체에서 요소 하나를 고유하게 식별한다.
• class: 여러 요소를 같은 그룹으로 묶어 CSS나 JavaScript에서 함께 다룬다.
• title: 요소에 보충 설명을 제공한다.
• data-*: 화면에 직접 표시하지 않는 사용자 정의 데이터를 보관해 CSS·JavaScript에서 활용한다.
• role, aria-*: 요소의 역할과 상태 정보를 보충해 접근성 도구의 이해를 돕는다.

예를 들어 href는 링크 목적지를 나타내는 a 요소의 전용 속성이고, src와 alt는 이미지 자원과 대체 설명을 지정하는 img의 핵심 속성이다. 모든 속성을 모든 태그에 임의로 붙일 수 있는 것은 아니다.

문서 템플릿은 기계용 정보와 화면용 내용을 분리한다

기본 HTML 문서는 문서 선언, 루트 html, 기계가 읽는 head, 화면에 표시할 body로 나뉜다. 다음은 강의 범위를 학습용으로 재구성한 최소 템플릿이다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="HTML 기본 구조를 설명하는 학습 페이지">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 문서 구조</title>
  <link rel="stylesheet" href="style.css">
  <script defer src="app.js"></script>
</head>
<body>
  <h1>HTML 문서 구조</h1>
  <p>화면에 표시할 본문입니다.</p>
</body>
</html>

<!doctype html>은 HTML5 문서임을 알려 표준 모드 렌더링을 유도한다. html은 문서의 루트이고 lang="ko"는 문서 언어를 알려 준다. head는 브라우저·검색 엔진을 위한 정보와 스타일·기능 연결을, body는 화면에 출력할 본문을 담는다.

head 요소는 목적에 따라 선택해야 한다

요소·설정	담는 정보	판단 기준
meta charset	문자 인코딩	한글·다국어 깨짐을 막기 위한 기본 설정
meta description	페이지 핵심 설명	문서 내용을 구체적으로 요약
meta viewport	모바일 화면 폭과 배율	반응형 표시를 위한 기본 설정
title	탭·즐겨찾기·검색 결과 제목	페이지마다 고유하고 구체적으로 작성
link·style	외부 또는 내부 CSS	표현을 문서에 연결
script	내부 또는 외부 JavaScript	defer를 사용하면 파싱을 막지 않고 파싱 뒤 실행

Open Graph의 og:title, og:description, og:image, og:url은 SNS 공유 시 제목·설명·썸네일·주소를 미리 정하는 데 사용한다. 강의는 keywords 메타 정보보다 실제 공유 정보와 구체적인 제목·설명이 실무에서 더 중요하다고 설명한다.

base는 상대 URL의 기준이나 링크의 기본 target을 정할 수 있지만, 문서 전체의 상대 경로 해석을 바꾸어 혼란을 만들 수 있다. 강의의 권고처럼 필요 범위를 제한하고 일반적으로는 경로를 명시적으로 작성하는 편이 안전하다.

텍스트 요소는 보이는 모양이 아니라 문장의 역할로 고른다

같은 줄바꿈이나 굵은 글씨처럼 보여도 의미가 다르면 요소도 달라진다. 학습을 위해 “강의 안내 페이지”를 만든다고 가정하고 선택 과정을 적용해 보자.

<h1>HTML5 웹 프로그래밍</h1>
<h2>수업 안내</h2>

<p>첫 수업은 3월 4일에 시작합니다.</p>
<address>
  서울특별시 종로구 대학로 86<br>
  1577-9995
</address>

<hr>
<p><strong>제출 기한</strong>은 금요일입니다.</p>

• p는 독립된 문단을 만든다. 문단을 중첩하지 않고 문단 간 간격은 CSS로 조정한다.
• br은 주소·시·가사처럼 줄바꿈 자체에 의미가 있을 때 쓴다. 여백을 늘리는 용도로 연속 사용하지 않는다.
• hr은 주제가 바뀌는 지점을 나타내는 의미적 수평선이다. 단순한 장식선은 CSS로 표현한다.
• h1부터 h6은 문서의 제목 계층이다. 숫자를 건너뛰지 않고 순서대로 사용하며, 크기 조절은 CSS에 맡긴다.

pre·blockquote·엔티티는 원문 보존 방식이 서로 다르다

pre는 입력한 공백과 줄바꿈을 보존하며 자동 줄바꿈이 적용되지 않는다. 소스 코드는 의미를 더하기 위해 pre 안에 code를 넣는다.

<pre><code>const message = "hello";
console.log(message);</code></pre>

blockquote는 긴 인용을 블록 단위로 표현하고, 짧은 인용은 q를 사용할 수 있다. 긴 인용의 출처는 cite 속성이나 footer 등으로 명시해 독자가 근거를 확인할 수 있게 한다.

<blockquote cite="https://example.com/source">
  <p>HTML은 콘텐츠의 구조와 의미를 기술한다.</p>
</blockquote>

태그로 오해될 수 있는 <와 >, 엔티티 시작 기호인 &, 따옴표, 연속 공백이나 키보드로 입력하기 어려운 기호는 엔티티로 표현할 수 있다. 예를 들어 소스에서 <, >, &, "를 쓰면 각각 해당 문자를 표시한다. 단순한 간격 확보를 위해  를 반복하는 대신 CSS의 margin과 padding을 사용한다.

물리적 모양보다 시맨틱 의미를 우선한다

물리적 요소는 굵게·기울임처럼 시각 효과를 중심으로 하고, 논리적 또는 시맨틱 요소는 콘텐츠의 의미를 전달한다. 접근성 도구와 검색 시스템이 의도를 파악할 수 있도록 의미가 있는 경우에는 시맨틱 요소를 우선한다.

원하는 의미	권장 요소	모양만 필요할 때
매우 중요한 내용	strong	CSS font-weight
문장 흐름의 강조	em	CSS font-style
삭제된 내용	del	CSS text-decoration
추가된 내용	ins	CSS 또는 목적에 맞는 표현
코드·키보드·출력·변수	code·kbd·samp·var	단순 글꼴 변경은 CSS

<p><strong>반드시 저장하세요.</strong></p>
<p>문맥상 <em>이 단어</em>를 강조합니다.</p>
<p><kbd>Ctrl</kbd>+<kbd>S</kbd>를 누릅니다.</p>
<p><abbr title="HyperText Markup Language">HTML</abbr>을 배웁니다.</p>

오개념 교정: strong은 “굵게 만드는 태그”가 아니라 중요성을 나타내는 요소다. 굵기만 바꾸려는 경우 CSS를 사용해야 의미와 디자인이 뒤섞이지 않는다.

블록·인라인과 div·span은 차지하는 범위부터 판단한다

구분	기본 배치 특성	대표 요소	사용 판단
블록 요소	한 줄 영역을 차지하고 앞뒤 줄바꿈 발생	div, p, h1, ul	문서와 레이아웃의 큰 덩어리
인라인 요소	내용만큼 공간을 차지하고 줄 안에 배치	span, a, strong, img	문장 중간의 링크·강조·짧은 구간

div는 의미가 없는 블록 컨테이너이고 span은 의미가 없는 인라인 컨테이너다. 대량의 콘텐츠를 CSS 적용 단위로 묶을 때는 div, 문장 일부를 묶을 때는 span을 쓸 수 있다.

<div class="notice">
  <h2>수업 공지</h2>
  <p>제출일은 <span class="deadline">금요일</span>입니다.</p>
</div>

하지만 이름과 의미가 있는 구조라면 header, main, section, article, nav, footer 같은 시맨틱 요소를 먼저 검토한다. div를 무조건 금지하는 것이 아니라, 의미 있는 대안이 없을 때 쓰는 범용 컨테이너로 이해한다.

요소 선택은 의미·계층·표현의 세 질문으로 끝낸다

1. 이 콘텐츠의 의미는 무엇인가? 문단, 제목, 인용, 중요성, 코드처럼 역할을 먼저 말로 설명한다.
2. 문서 계층에서 어디에 놓이는가? head의 기계용 정보인지 body의 본문인지, 블록인지 문장 속 인라인인지 판단한다.
3. 남은 요구가 모양 또는 동작인가? 색·크기·간격은 CSS, 이벤트와 상태 변화는 JavaScript에 맡긴다.

새 태그를 고른 뒤에는 중첩 순서, 허용 속성, 빈 요소 여부, 엔티티 이스케이프를 확인한다. 이 과정은 “브라우저에 비슷하게 보인다”를 넘어 사람과 기계가 같은 문서 구조를 이해하게 한다.

핵심 개념 정리

• 인터넷은 네트워크 인프라이고 웹은 URL·HTTP·HTML을 중심으로 그 위에서 동작하는 정보 서비스다.
• 웹 페이지는 URL 입력, DNS 조회, 요청, 응답, 파싱·렌더링의 흐름으로 표시된다.
• HTML은 구조와 의미, CSS는 표현, JavaScript는 동작을 맡으며 프론트엔드와 백엔드는 데이터를 교환한다.
• HTML 요소는 태그·속성·내용의 관계와 올바른 중첩 순서로 작성한다.
• head는 기계가 사용할 정보와 자원 연결, body는 화면에 표시할 본문을 담는다.
• 텍스트 요소는 모양이 아니라 문단·주제 전환·제목 계층·인용·중요성 같은 의미로 선택한다.
• 블록·인라인의 배치 차이를 이해하되 의미 있는 시맨틱 요소가 있으면 div와 span보다 먼저 검토한다.

웹 문서를 읽고 만들 때는 URL에서 응답까지의 흐름 확인 → HTML·CSS·JavaScript 책임 분리 → head와 body 구분 → 콘텐츠 의미와 제목 계층 판정 → 블록·인라인 문맥 확인 → 모양과 동작은 CSS·JavaScript로 분리하는 순서로 판단한다. 이 순서를 따르면 화면만 비슷한 마크업이 아니라 구조와 의미가 설명되는 HTML을 작성할 수 있다.

예상문제 10선

1. 인터넷과 웹의 관계를 가장 정확히 설명한 것은?

① 웹은 인터넷 전체를 물리적으로 연결하는 케이블망이다 ② 인터넷은 웹 브라우저 하나를 뜻한다 ③ 인터넷은 네트워크 인프라이고 웹은 그 위의 정보 서비스다 ④ 인터넷과 웹은 범위와 기능이 완전히 같은 용어다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③

• ① 오답: 물리적·논리적 네트워크 기반은 인터넷의 범위이며 웹은 그 기반을 이용한다.
• ② 오답: 브라우저는 웹 서비스를 요청하는 클라이언트 프로그램이다.
• ③ 정답: 큰 기반 안에 웹·이메일·FTP 같은 여러 서비스가 존재한다는 포함 관계다.
• ④ 오답: 웹은 인터넷의 여러 서비스 중 하나이므로 두 범위가 같지 않다.

2. 사용자가 URL을 입력한 뒤 화면이 표시되는 기본 순서로 옳은 것은?

① DNS 조회 → 요청 → 응답 → 파싱·렌더링 ② 렌더링 → DNS 조회 → 응답 → 요청 ③ 응답 → URL 입력 → DNS 조회 → 요청 ④ 요청 → 파싱 → DNS 조회 → 응답

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①

• ① 정답: 서버 위치를 찾고 요청·응답을 마친 뒤 브라우저가 문서를 해석해 그린다.
• ② 오답: 화면 렌더링은 서버 자료를 받기 전이 아니라 응답 뒤에 진행된다.
• ③ 오답: 서버는 사용자가 주소를 입력하고 요청하기 전에 해당 요청의 응답을 보낼 수 없다.
• ④ 오답: 도메인을 사용하는 경우 서버 위치 확인이 요청보다 먼저 필요하다.

3. “제목의 글자 크기를 키우고 클릭하면 설명을 펼친다”는 요구를 책임별로 바르게 나눈 것은?

① 크기는 JavaScript, 클릭 동작은 HTML만 담당한다 ② 크기와 클릭 동작을 모두 DNS가 처리한다 ③ 크기와 클릭 동작을 모두 CSS만 담당한다 ④ 제목 구조는 HTML, 크기는 CSS, 클릭 동작은 JavaScript가 담당한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④

• ① 오답: 시각적 크기는 CSS, 사용자 이벤트 반응은 JavaScript의 책임이다.
• ② 오답: DNS는 도메인으로 서버 위치를 찾으며 페이지 표현과 상호작용을 만들지 않는다.
• ③ 오답: CSS가 시각 상태를 표현할 수는 있어도 강의의 책임 분리에서 동작 로직은 JavaScript가 맡는다.
• ④ 정답: 의미·표현·동작을 각 기술의 역할에 맞게 분리했다.

4. head와 body의 역할을 올바르게 연결한 것은?

① head는 본문, body는 DNS 정보를 담는다 ② head는 기계용 정보와 자원 연결, body는 화면에 표시할 본문을 담는다 ③ head는 서버 프로그램, body는 데이터베이스를 담는다 ④ 두 요소는 모두 문서 밖에 위치한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②

• ① 오답: 본문은 body에 놓이고 DNS 정보는 HTML의 두 영역에 저장하는 내용이 아니다.
• ② 정답: 브라우저·검색 엔진을 위한 정보와 사용자가 보는 콘텐츠를 분리한 구조다.
• ③ 오답: 두 요소는 HTML 문서 영역이며 서버와 데이터베이스 자체를 포함하지 않는다.
• ④ 오답: head와 body는 루트 html 요소 안에 위치한다.

5. id와 class의 결정적 차이는?

① id는 이미지만, class는 링크만 식별한다 ② id는 전용 속성이고 class는 태그 이름이다 ③ id는 여러 요소의 공통 그룹, class는 문서의 유일 식별자다 ④ id는 고유 식별, class는 여러 요소의 그룹화에 사용한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④

• ① 오답: 두 속성은 특정 태그 종류에만 제한되지 않는 전역 속성이다.
• ② 오답: 둘 다 여러 요소에서 사용할 수 있는 속성이며 class는 요소명이 아니다.
• ③ 오답: 고유성과 그룹화의 역할을 서로 뒤바꿨다.
• ④ 정답: 하나를 특정할 때와 같은 규칙을 여러 요소에 적용할 때의 선택 기준이다.

6. 문단 사이의 여백을 늘리려고 br을 여러 번 넣은 코드의 문제를 바로잡은 것은?

① 문단은 p로 구분하고 시각적 간격은 CSS의 margin·padding으로 조정한다 ② br 대신 h1을 여러 번 빈 요소로 넣는다 ③ 연속 공백만 늘리면 브라우저가 모두 보존한다 ④ 간격을 만들기 위해 blockquote를 빈 채로 추가한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ①

• ① 정답: 문서의 의미 구조와 화면의 간격 표현을 각각 HTML과 CSS에 맡긴다.
• ② 오답: 제목 요소를 여백 도구로 쓰면 문서 계층이 잘못 전달된다.
• ③ 오답: 일반 HTML 본문에서 연속 공백은 보통 하나의 공백으로 합쳐진다.
• ④ 오답: blockquote는 긴 인용을 뜻하므로 빈 여백 용도로 사용하면 의미가 왜곡된다.

7. “제출 기한은 금요일이다”에서 내용의 중요성을 기계에도 전달하려면 가장 알맞은 요소는?

① b ② span ③ strong ④ br

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ③

• ① 오답: b는 시각적 굵기를 중심으로 하며 중요성이라는 의미 선택과 다르다.
• ② 오답: span은 의미 없는 인라인 컨테이너이므로 자체로 중요성을 전달하지 않는다.
• ③ 정답: strong은 해당 내용이 매우 중요하다는 시맨틱 의미를 나타낸다.
• ④ 오답: br은 의미 있는 줄바꿈을 만들며 강조 요소가 아니다.

8. C와 D를 연속 공백 네 칸으로 구분해 일반 p에 작성했다. 기본 표시 결과에 대한 설명은?

① 두 글자 사이에 자동으로 네 줄이 생긴다 ② 연속 공백은 보통 하나의 공백으로 합쳐져 표시된다 ③ 공백 때문에 p 요소가 자동으로 pre로 바뀐다 ④ 공백은 DNS 조회를 네 번 발생시킨다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②

• ① 오답: 일반 공백은 줄바꿈 요소가 아니므로 줄을 네 번 바꾸지 않는다.
• ② 정답: 일반 HTML 텍스트의 공백 축약 규칙을 적용한 결과다.
• ③ 오답: 공백 입력 방식이 요소 종류를 바꾸지는 않으며 보존하려면 pre를 명시해야 한다.
• ④ 오답: 문서 안의 문자 공백은 도메인 이름 조회와 관계없다.

9. 블록 요소와 인라인 요소의 기본 배치 차이로 옳은 것은?

① 블록은 내용만큼, 인라인은 한 줄 전체를 차지한다 ② 블록은 줄 영역을 만들고 인라인은 문장 흐름 안에서 내용만큼 배치된다 ③ 블록은 head에서만, 인라인은 body 밖에서만 쓴다 ④ 두 구분은 서버와 클라이언트의 차이를 뜻한다

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ②

• ① 오답: 한 줄 영역과 내용만큼의 공간이라는 기본 특성을 서로 뒤집었다.
• ② 정답: div·p 같은 큰 덩어리와 span·a 같은 줄 속 요소의 배치 차이다.
• ③ 오답: 블록과 인라인은 body 콘텐츠의 배치 문맥을 설명하는 구분이다.
• ④ 오답: 서버·클라이언트는 통신 주체이며 요소의 표시 범위와 다른 개념이다.

10. 의미 중심 HTML을 작성하는 판단 순서로 가장 적절한 것은?

① 글자 크기 선택 → 빈 br 반복 → 의미 추측 ② div로 모두 묶기 → 제목 순서 생략 → CSS 제거 ③ 보이는 모양 선택 → 태그 중첩 무시 → JavaScript로 수정 ④ 콘텐츠 의미 → 문서 계층·문맥 → 요소 선택 → 표현·동작 분리

정답입니다.

오답입니다. 답안을 다시 선택해 보세요.

정답 및 해설 보기

정답: ④

• ① 오답: 시각적 간격부터 정하면 문단과 줄바꿈의 의미를 왜곡하기 쉽다.
• ② 오답: 범용 컨테이너 남용과 제목 단계 생략은 문서 구조를 불명확하게 한다.
• ③ 오답: 잘못된 중첩과 의미 구조를 JavaScript가 대신 해결하는 방식은 책임 분리에 맞지 않는다.
• ④ 정답: 의미와 계층을 먼저 정하고 모양과 동작을 별도 기술에 맡기는 재사용 가능한 절차다.

참고 자료와 작성 기준

이 글은 해당 차시 강의자료를 바탕으로 학습 목적에 맞게 재구성한 비공식 학습자료입니다. 웹 요청 흐름과 HTML 요소 선택을 하나의 판단 과정으로 연결하고, 코드·경계 사례·오개념을 직접 검토했습니다.

• 작성·편집: 올에이클래스 학습연구팀
• 주요 근거: 한국방송통신대학교 HTML5웹프로그래밍 1강 「웹 프로그래밍 & HTML 텍스트」 강의록 :codex-file-citation{path="K1. 컴퓨터과학과/1. 재검토필요/2-1 HTML5웹프로그래밍/1. 강의록/HTML5웹프로그래밍_01_강의록.pdf" purpose="source"}
• 편집 원칙: 올에이클래스 편집 정책
• 최종 내용 검토: 2026-09-05