방송대 방통대 HTML5웹프로그래밍 1강 - 웹 프로그래밍과 HTML 텍스트 - 요약 노트 시험족보 예상문제 - 올에이클래스

HTML5웹프로그래밍 1강 - 웹 프로그래밍과 HTML 텍스트

인터넷과 웹의 차이, 서버-클라이언트 구조와 웹 페이지의 요청·응답 과정을 이해한다. HTML 문서의 요소·속성·기본 구조를 익히고, 텍스트 요소를 모양이 아니라 의미에 맞게 선택하는 실무 원칙까지 학습한다.

1. 인터넷과 웹의 이해

인터넷

인터넷(Internet)은 전 세계의 네트워크를 서로 연결한 네트워크 인프라이다. ‘네트워크들의 네트워크(Network of Networks)’라고 표현하며, 1960년대의 ARPANET에서 시작되었다. 인터넷이라는 기반 위에서 이메일, FTP, 온라인 게임, 웹 등 다양한 서비스가 제공된다.

월드 와이드 웹

웹(World Wide Web)은 인터넷에서 하이퍼링크를 통해 문서를 연결하고 정보를 공유하는 서비스이다. 1989년 팀 버너스리(Tim Berners-Lee)가 제안했으며, 인터넷 위에서 HTTP, URL, HTML을 중심으로 동작한다.

인터넷과 웹은 같은 뜻이 아니다. 인터넷은 통신을 가능하게 하는 전체 인프라이고, 웹은 그 인프라를 사용하는 여러 서비스 중 하나이다. 따라서 포함 관계는 인터넷 ⊃ 웹으로 나타낼 수 있다.

인터넷이 도로와 같은 기반 시설이라면 웹은 그 도로 위에서 운행되는 서비스에 해당한다. 이메일이나 FTP도 인터넷 서비스이지만 웹 자체는 아니다.

2. 웹 사이트·웹 문서·웹 페이지

웹 사이트

웹 사이트는 여러 웹 문서 또는 웹 페이지가 모여 하나의 서비스를 구성한 것이다. 한 기관이나 서비스의 목적에 따라 메인 페이지, 소개 페이지, 게시판, 검색 페이지 등 서로 연결된 페이지들을 포함할 수 있다.

웹 문서

웹 문서는 특정한 주제나 기능 단위로 구성된 HTML 중심의 문서 집합을 가리킨다. 하나의 웹 문서도 주제와 내용에 따라 여러 웹 페이지 파일로 나누어 작성될 수 있으며 흔히 HTML 문서라고 부른다.

웹 페이지

웹 페이지는 브라우저에서 한 번에 표시되는 단일 문서이다. 보통 하나의 HTML 파일을 중심으로 구성되고, 필요한 CSS·JavaScript·이미지 등의 리소스를 함께 불러와 화면을 완성한다.

구분	의미
웹 사이트	여러 웹 문서와 페이지가 모인 하나의 서비스
웹 문서	특정 주제나 기능을 다루는 HTML 중심의 문서 집합
웹 페이지	브라우저에서 한 번에 표시되는 단일 문서로, 보통 하나의 HTML 파일

3. 웹의 서버-클라이언트 동작 원리

클라이언트와 서버

웹은 서버-클라이언트 구조에서 요청(request)과 응답(response)을 주고받으며 동작한다. 클라이언트는 서비스를 요청하는 쪽으로, 대표적인 클라이언트 프로그램은 Chrome, Safari, Edge, Firefox 같은 웹 브라우저이다. 브라우저는 응답받은 HTML 코드를 해석해 화면에 표시한다.

서버는 서비스를 제공하는 쪽이다. 데이터를 저장한 컴퓨터와 그 위에서 동작하는 서버 소프트웨어로 구성되며 Apache, Nginx, IIS(Internet Information Services) 등이 대표적인 웹 서버 소프트웨어이다.

HTTP와 HTTPS

HTTP(HyperText Transfer Protocol)는 클라이언트와 서버가 데이터를 주고받기 위한 통신 규약이다. 실제 서비스에서는 전송 내용을 암호화하는 HTTPS(HTTP Secure)가 기본적으로 사용된다.

브라우저가 페이지를 표시하는 순서

1. 사용자가 브라우저에 URL을 입력한다.
2. DNS에 도메인 이름을 조회하여 서버의 IP 주소를 얻는다.
3. 브라우저가 해당 서버에 HTTP 또는 HTTPS 요청을 보낸다.
4. 서버가 HTML, CSS, JavaScript 등의 리소스로 응답한다.
5. 브라우저가 HTML을 파싱하고 다른 리소스를 반영하여 화면을 렌더링한다.

DNS 캐시와 브라우저 캐시에 필요한 정보가 저장되어 있으면 두 번째 접속부터 더 빠르게 처리될 수 있다.

웹의 기본 흐름은 URL 입력 → DNS 조회 → 요청 → 응답 → 파싱 및 렌더링이다.

4. 웹 페이지를 구성하는 세 가지 기술

HTML: 구조와 내용

HTML(HyperText Markup Language)은 웹 페이지의 뼈대를 만들고 콘텐츠의 구조와 의미를 정의한다. 제목, 본문, 이미지, 표 등이 무엇인지를 브라우저와 검색 엔진에 알려 준다.

CSS: 시각적 표현

CSS(Cascading Style Sheets)는 HTML로 만든 구조와 내용에 색상, 글꼴, 정렬, 간격, 레이아웃과 같은 디자인을 적용한다. 웹 페이지의 인테리어에 해당한다.

JavaScript: 동작과 상호작용

JavaScript는 이벤트 처리, 상태 변경, 비동기 데이터 처리 등 웹 페이지의 동적 기능과 사용자 상호작용을 담당한다.

실무에서는 세 기술의 관심사를 분리하는 것이 중요하다. HTML은 의미 중심의 구조, CSS는 레이아웃·반응형·디자인 시스템, JavaScript는 상태·이벤트·비동기 데이터 흐름을 담당하게 한다.

기술	비유	역할
HTML	뼈대	콘텐츠의 구조와 의미
CSS	디자인·인테리어	시각적 표현과 레이아웃
JavaScript	기능	동작과 사용자 상호작용

HTML5를 기반으로 계속 갱신되는 WHATWG HTML Living Standard가 현재 사실상 HTML 표준으로 사용된다.

5. 프론트엔드·백엔드와 웹 개발 과정

프론트엔드 프로그래밍

프론트엔드(front-end) 또는 클라이언트 사이드 프로그래밍은 사용자의 눈에 보이고 브라우저에서 동작하는 화면 영역을 개발한다. 기본 기술은 HTML, CSS, JavaScript이며 React, Vue, Angular 같은 도구로 확장할 수 있다. 이 강의는 클라이언트에서 동작하는 기초 문서와 UI 구성을 중심으로 HTML·CSS·JavaScript를 다룬다.

백엔드 프로그래밍

백엔드(back-end) 또는 서버 사이드 프로그래밍은 사용자에게 직접 보이지 않는 서버와 데이터베이스 영역을 개발한다. 강의에서는 Node.js, Django, Spring, Database 등을 예로 든다.

프론트엔드와 백엔드는 HTTP로 통신한다. REST는 HTTP를 효과적으로 활용하기 위한 설계 원칙이며, JSON은 주고받거나 저장하는 데이터 형식으로 사용된다.

웹 프로그래밍 과정

1. 기획·설계: 사이트의 목적, 대상 사용자, 콘텐츠와 요구사항을 정한다.
2. 디자인: UI·UX, 레이아웃, 색상과 이미지를 설계한다.
3. 퍼블리싱: 디자인 시안을 바탕으로 HTML과 CSS를 웹 표준에 맞게 작성한다.
4. 프론트엔드 개발: JavaScript로 동적 기능과 상호작용을 구현한다.
5. 백엔드 개발: 서버, 데이터베이스와 API를 구축해 데이터와 비즈니스 로직을 처리한다.
6. 테스트·배포: 다양한 환경에서 오류를 수정한 뒤 실제 서버에 배포한다.

6. HTML 요소와 속성

요소의 기본 구조

HTML 문서는 다양한 요소(element)의 조합이다. 일반적인 요소는 시작 태그, 내용, 종료 태그로 구성된다.

<태그명 속성명="속성값">내용</태그명>

예를 들어 <p class="intro">HTML5의 개념</p>에서 p는 태그명, class="intro"는 속성, 가운데 텍스트는 내용이다. 전체를 하나의 요소라고 한다.

빈 요소

br, img, hr처럼 내용과 종료 태그 없이 단독으로 사용하는 요소를 빈 요소라고 한다. HTML 표준에서는 <br>, <img>처럼 쓸 수 있다. React 같은 프레임워크에서는 <br />, <img />처럼 명시적으로 닫는 표기를 요구할 수 있다.

속성 작성 규칙

여러 속성은 공백으로 구분하고 속성값은 큰따옴표로 감싸는 것이 실무 표준이다. 등호 주변에는 보통 공백을 두지 않는다.

<a href="https://example.com" target="_blank" rel="noopener">예시 링크</a>

전역 속성과 전용 속성

전용 속성은 특정 요소에 맞게 사용할 수 있지만 전역 속성은 모든 HTML 요소에서 공통으로 사용할 수 있다.

전역 속성	역할
id	문서 전체에서 하나의 요소를 고유하게 식별하며 중복하지 않음
class	여러 요소를 그룹으로 묶어 공통 스타일이나 처리를 적용
title	마우스를 올렸을 때 보충 설명을 표시
data-*	화면에 직접 보이지 않는 사용자 정의 데이터를 저장
role	접근성 도구에 요소의 역할을 알려 줌
aria-*	스크린 리더를 위해 상태나 정보를 보충 설명

7. HTML 작성 규칙과 문서 기본 구조

기본 작성 규칙

HTML 태그명과 속성명은 문법적으로 대소문자를 구분하지 않지만 가독성과 일관성, XHTML 호환성을 위해 소문자로 작성하는 것이 실무 원칙이다. 문서 파일의 확장자는 .htm 또는 .html을 사용한다.

두 칸 이상의 연속된 공백은 브라우저에서 하나의 공백으로 합쳐진다. 편집기에 입력한 엔터, 탭과 공백이 그대로 화면에 적용되지 않는다. 요소를 중첩할 때는 먼저 연 태그를 나중에 닫아야 한다. 또한 들여쓰기를 일관되게 사용하면 문서의 계층을 쉽게 파악할 수 있다.

HTML5 기본 템플릿

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="description" content="문서 핵심 설명">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>문서 제목</title>
</head>
<body>
  <h1>HTML 문서의 기본 템플릿</h1>
  <p>화면에 표시할 본문</p>
</body>
</html>

문서 선언과 루트 요소

<!DOCTYPE html>은 HTML5 문서임을 선언하고 표준 모드 렌더링을 보장하는 지시어이다. 반드시 문서의 첫 줄에 둔다. <html lang="ko">는 문서의 시작과 끝을 나타내는 루트 요소이며 lang은 스크린 리더와 검색 엔진이 문서 언어를 파악하도록 돕는다.

head와 body

head에는 브라우저와 검색 엔진을 위한 메타데이터, 제목, 스타일과 스크립트 연결 정보가 들어가며 일반적으로 화면에 직접 표시되지 않는다. body에는 브라우저 화면에 실제로 출력할 문서 본문을 작성한다.

HTML 주석

HTML 주석은 <!-- 내용 --> 형식으로 작성하며 브라우저 화면에 표시되지 않는다. 문서 어디에나 둘 수 있지만 주석 내용에는 주석 문법을 깨뜨리는 연속 하이픈 등을 사용하지 않아야 한다. CSS와 JavaScript의 주석 형식은 /* 내용 */이다.

8. head 영역의 핵심 요소

meta 요소

<meta charset="UTF-8">는 문자 인코딩을 지정하여 한글과 다국어 문자의 깨짐을 방지한다. viewport 설정은 모바일 화면의 너비와 확대 비율을 지정하여 반응형 웹을 위한 기반을 만든다.

description은 페이지의 핵심 내용을 설명하며 검색 결과 제목 아래의 설명으로 활용될 수 있다. 페이지 내용을 잘 요약하도록 약 150자 내외로 작성한다. author는 작성자나 회사를 나타낸다. keywords는 현대 검색 엔진 최적화 관점에서 사실상 사용되지 않는다.

Open Graph

Open Graph 메타 속성은 SNS에 링크가 공유될 때 표시할 URL, 제목, 이미지와 설명을 미리 정한다. 강의에서는 키워드 메타 속성보다 Open Graph의 실무 중요성이 훨씬 크다고 설명한다.

<meta property="og:title" content="공유 제목">
<meta property="og:image" content="https://example.com/image.jpg">

title, link, style

title은 브라우저 탭, 즐겨찾기와 검색 결과의 제목으로 사용된다. 페이지마다 고유하고 구체적으로 작성하는 것이 좋다. link는 외부 CSS 파일을 연결하고 style은 문서 내부 CSS를 정의한다.

CSS는 페이지가 표시되기 전에 준비되도록 거의 항상 head에 둔다. 외부 CSS 파일은 렌더링 안정성, 캐싱과 분리 관리에 유리하다.

script 요소

script는 JavaScript 코드를 작성하거나 외부 파일을 연결한다. 최근 실무에서는 <script defer src="app.js"></script>처럼 head에서 defer를 사용하는 방식이 권장된다. defer는 HTML 파싱을 중단시키지 않고 문서 파싱이 끝난 뒤 스크립트를 실행하게 한다.

과거에는 화면 로딩을 방해하지 않도록 body 종료 태그 직전에 스크립트를 배치하는 방법을 사용했다.

base 요소

base는 문서의 기본 URL이나 링크의 기본 대상 창을 지정한다. 그러나 상대 경로 해석이 예상과 달라져 혼란을 만들 수 있으므로 실무에서는 최소한으로 사용하며, 절대 경로나 명시적인 상대 경로를 사용하는 편이 바람직하다.

9. 문서 작성과 실행 도구

코드 편집기

강의에서는 HTML 문서 편집기로 Visual Studio Code를 추천한다. Live Server 확장은 저장한 문서를 로컬 웹 서버로 빠르게 확인할 수 있게 하고, Prettier - Code formatter는 코드의 들여쓰기와 서식을 일관되게 정리한다.

브라우저와 개발자 도구

작성한 HTML 문서는 Chrome 같은 웹 브라우저에서 실행하고 확인한다. F12로 여는 개발자 도구에서 Elements, Console, Network 탭을 자주 확인하는 습관이 중요하다.

• Elements: 브라우저가 해석한 문서 요소와 적용된 스타일을 확인한다.
• Console: JavaScript 오류와 실행 메시지를 확인한다.
• Network: HTML, CSS, JavaScript와 이미지의 요청·응답 상태를 확인한다.

10. 줄바꿈·문단·주제 전환·제목 요소

br 요소

br은 주소, 시, 가사처럼 실제 줄바꿈 자체가 의미를 가질 때 사용한다. 문단 사이의 간격이나 레이아웃을 만들려고 <br>을 여러 번 연속 사용하는 것은 잘못된 방법이다. 시각적 여백은 CSS의 margin과 padding으로 처리한다.

p 요소

p는 독립된 하나의 문단이나 단락을 표현한다. 브라우저에서 앞뒤에 줄바꿈과 기본 여백이 생기지만 간격과 정렬은 CSS로 조절한다. p 요소 안에 다른 p 요소를 중첩하는 것은 의미적으로 부적절하다.

hr 요소

hr은 단순히 수평선을 그리는 도구가 아니라 주제가 전환되는 콘텐츠를 구분하는 의미적 요소이다. 주제 전환이 아니라 시각적인 선만 필요하면 CSS의 border-bottom 같은 속성을 사용한다.

h1부터 h6까지의 제목

h1부터 h6은 문서의 제목 계층과 목차 구조를 만든다. 숫자가 작을수록 높은 단계의 제목이다. 검색 엔진과 스크린 리더가 문서의 주제와 구조를 파악하는 데 중요한 역할을 한다.

h1은 페이지의 메인 제목으로 한 번만 사용하는 것이 원칙이며, 제목 단계는 건너뛰지 않고 순서대로 구성한다. 글자를 크게 보이게 하려는 디자인 목적으로 제목 요소를 선택해서는 안 되며 크기와 색상은 CSS로 조절한다.

텍스트 요소는 화면에 보이는 모양이 아니라 콘텐츠의 의미와 문서 구조에 맞춰 선택한다.

11. 서식 유지·인용·문자 엔티티

pre와 code

pre는 문서 작성 과정에서 입력한 공백과 줄바꿈을 그대로 유지한다. 자동 줄바꿈이 적용되지 않으며 요소 안에 작성한 HTML 요소는 해석되어 적용된다. 소스 코드를 표시할 때는 의미를 분명히 하기 위해 pre 안에 code를 넣는 방식이 실무 표준이다.

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

blockquote와 q

blockquote는 긴 인용문을 블록 단위로 표현한다. 웹 접근성을 위해 cite 속성이나 footer 요소로 출처를 제시하는 것이 중요하다. 짧은 인용은 q 요소를 사용한다.

문자 엔티티

HTML에서 문법에 사용되는 예약 문자, 연속 공백, 키보드로 입력하기 어려운 기호는 문자 엔티티로 표현한다. 형식은 이름 방식 &이름;, 10진수 방식 &#코드값;, 16진수 방식 &#x코드값;이다.

문자	이름 엔티티	10진수	16진수
<	&lt;	&#60;	&#x3c;
>	&gt;	&#62;	&#x3e;
&	&amp;	&#38;	&#x26;
"	&quot;	&#34;	&#x22;
공백	&nbsp;	&#32;	&#x20;

×, ÷, ©, ®, ™로 곱하기, 나누기, 저작권, 등록상표, 상표 기호를 나타낼 수 있다. 간격을 넓히려고  를 반복하기보다 CSS 여백 속성을 사용한다.

12. 물리적 요소와 시맨틱 요소

표현 중심과 의미 중심

물리적 요소는 화면의 모양을 중심으로 표현하고, 논리적 또는 시맨틱 요소는 콘텐츠의 의미를 전달한다. 스크린 리더와 검색 엔진이 콘텐츠를 이해하도록 의미 중심 요소를 우선 사용해야 한다.

시각적 목적	물리적 요소	권장 시맨틱 요소	의미
굵게	b	strong	중요한 내용
기울임	i	em	문맥상의 강조
취소선	s	del	삭제된 내용
밑줄	u	ins	새로 추가된 내용

mark는 주목할 내용을 표시하고, abbr은 약어의 전체 뜻을 제공한다. code, kbd, samp, var는 개발 문서에서 코드, 키보드 입력, 프로그램 출력, 변수를 의미한다.

단순히 굵게, 기울임, 취소선이나 밑줄 모양만 필요하다면 각각 CSS의 font-weight, font-style, text-decoration을 사용하는 편이 의미를 왜곡하지 않는다.

13. 블록·인라인 요소와 div·span

블록 요소

블록 요소는 기본적으로 한 줄의 너비를 모두 차지하고 앞뒤에 줄바꿈이 발생한다. 폭과 높이를 조절할 수 있으며 div, p, 제목 요소, ul 등이 대표적이다. 레이아웃의 큰 틀이나 독립된 콘텐츠 단위를 구성하는 데 사용한다.

인라인 요소

인라인 요소는 내용만큼의 공간만 차지하고 줄바꿈 없이 옆으로 배치된다. 기본 상태에서는 폭과 높이 조절에 제약이 있다. span, a, strong, img 등이 대표적이며 문장 중간의 텍스트 스타일이나 링크에 사용한다.

div와 span

div는 별도의 의미가 없는 블록 컨테이너로, 논리적으로 구분된 많은 내용에 CSS를 적용할 때 사용한다. span은 의미가 없는 인라인 컨테이너로, 문장 중간의 특정 단어나 작은 구간에 스타일을 적용할 때 사용한다.

의미 있는 요소가 존재한다면 div보다 header, main, section, article, nav, footer 같은 시맨틱 요소를 우선 사용한다. div는 적절한 의미 요소가 없을 때 사용하는 최후의 수단으로 생각하는 것이 좋다.

구분	블록	인라인
기본 너비	한 줄 전체	내용만큼
줄바꿈	앞뒤에 발생	발생하지 않음
크기 조절	폭·높이 조절 가능	기본 상태에서 제약이 있음
대표 컨테이너	div	span

14. 핵심 개념 정리

• 인터넷은 전 세계 네트워크 인프라이고 웹은 인터넷 위에서 HTTP·URL·HTML로 동작하는 정보 서비스이다.
• 웹은 URL 입력, DNS 조회, HTTP 요청, 서버 응답, 브라우저 파싱과 렌더링 순서로 동작한다.
• HTML은 구조와 의미, CSS는 시각적 표현, JavaScript는 동작과 상호작용을 담당한다.
• 일반 HTML 요소는 시작 태그·속성·내용·종료 태그로 구성되며 빈 요소에는 종료 태그가 없다.
• id, class, title, data-*, role, aria-*는 대표적인 전역 속성이다.
• HTML5 문서는 DOCTYPE, html, head, body의 기본 구조를 갖는다.
• meta, title, link, style, script 등은 브라우저와 검색 엔진을 위한 정보를 제공한다.
• br, p, hr, 제목, pre, blockquote는 모양이 아니라 콘텐츠의 의미에 맞춰 선택한다.
• 접근성을 위해 단순 표현 요소보다 strong, em, del, ins 같은 시맨틱 요소를 우선한다.
• 블록 요소는 한 줄을 차지하고 인라인 요소는 내용만큼 차지하며, 의미 없는 컨테이너는 각각 div와 span이다.

HTML 학습의 중심은 태그의 겉모양을 외우는 것이 아니라 콘텐츠가 무엇을 의미하는지에 맞는 요소를 선택하고, 올바른 계층과 문법으로 문서를 구성하는 것이다. 구조는 HTML, 표현은 CSS, 동작은 JavaScript로 분리해야 접근성과 유지보수성이 높은 웹 페이지를 만들 수 있다.

15. 예상문제 20선

1. 인터넷과 웹의 관계에 대한 설명으로 옳은 것은?

① 인터넷과 웹은 완전히 같은 개념이다. ② 인터넷은 네트워크 인프라이고 웹은 그 위에서 동작하는 서비스이다. ③ 웹이 인터넷을 포함한다. ④ 이메일과 FTP는 웹에서만 동작한다.

정답입니다.

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

정답 및 해설 보기

정답: ②
인터넷은 여러 서비스를 제공하는 기반이고 웹은 HTTP·URL·HTML을 사용하는 인터넷 서비스 중 하나이다.

2. 브라우저에 URL을 입력한 뒤 웹 페이지가 표시되는 흐름으로 옳은 것은?

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

정답입니다.

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

정답 및 해설 보기

정답: ④
DNS로 서버 IP를 확인한 뒤 요청과 응답이 이루어지고 브라우저가 받은 리소스를 파싱·렌더링한다.

3. HTML, CSS, JavaScript의 역할 연결로 옳은 것은?

① HTML-동작, CSS-구조, JavaScript-디자인 ② HTML-디자인, CSS-동작, JavaScript-구조 ③ HTML-구조와 의미, CSS-표현, JavaScript-동작 ④ 세 기술은 모두 같은 역할을 한다.

정답입니다.

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

정답 및 해설 보기

정답: ③
관심사를 분리하여 HTML은 내용의 구조, CSS는 시각적 표현, JavaScript는 기능과 상호작용을 담당한다.

4. 사용자에게 보이는 브라우저 화면과 상호작용을 개발하는 영역은?

① 프론트엔드 프로그래밍 ② 백엔드 데이터베이스 관리만 ③ DNS 서버 운영만 ④ 네트워크 케이블 설치

정답입니다.

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

정답 및 해설 보기

정답: ①
프론트엔드는 HTML, CSS, JavaScript 등을 사용해 사용자가 보는 클라이언트 화면을 개발한다.

5. 일반적인 HTML 요소의 구성으로 옳은 것은?

① 시작 태그·속성·내용·종료 태그 ② CSS 선택자와 JavaScript 함수만 ③ IP 주소와 DNS 이름만 ④ 속성값과 종료 태그만

정답입니다.

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

정답 및 해설 보기

정답: ①
일반 요소는 시작 태그에 속성을 둘 수 있고, 내용 뒤에 대응하는 종료 태그를 작성한다.

6. 다음 중 빈 요소에 해당하는 것은?

① p ② strong ③ img ④ article

정답입니다.

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

정답 및 해설 보기

정답: ③
img는 내용과 종료 태그 없이 사용하는 빈 요소이며 br과 hr도 같은 유형이다.

7. 여러 요소를 하나의 그룹으로 묶어 같은 CSS 스타일을 적용할 때 적절한 전역 속성은?

① id ② title ③ lang ④ class

정답입니다.

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

정답 및 해설 보기

정답: ④
class는 여러 요소에 같은 그룹 이름을 부여하며, id는 문서에서 고유하게 사용한다.

8. HTML 요소를 중첩하는 규칙으로 옳은 것은?

① 먼저 연 태그를 먼저 닫는다. ② 먼저 연 태그를 나중에 닫는다. ③ 모든 태그는 중첩할 수 없다. ④ 종료 태그는 항상 생략한다.

정답입니다.

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

정답 및 해설 보기

정답: ②
바깥 요소를 먼저 열고 안쪽 요소를 닫은 뒤 바깥 요소를 닫아 계층이 교차하지 않게 해야 한다.

9. <!DOCTYPE html>의 역할은?

① 화면의 본문 내용을 표시한다. ② 외부 JavaScript 파일을 연결한다. ③ 웹 서버의 IP 주소를 지정한다. ④ HTML5 문서임을 선언하고 표준 모드 렌더링을 보장한다.

정답입니다.

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

정답 및 해설 보기

정답: ④
DOCTYPE은 요소가 아니라 문서 형식을 브라우저에 알려 주는 첫 줄의 지시어이다.

10. <meta charset="UTF-8">를 사용하는 주된 이유는?

① 문자 인코딩을 지정하여 한글과 다국어 깨짐을 방지한다. ② 페이지의 배경색을 정한다. ③ 서버의 데이터를 암호화한다. ④ 제목 요소의 크기를 정한다.

정답입니다.

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

정답 및 해설 보기

정답: ①
charset 메타 정보는 브라우저가 문서 문자를 어떤 인코딩으로 해석할지 지정한다.

11. SNS에 페이지를 공유할 때 제목과 썸네일 정보를 지정하는 데 사용하는 것은?

① meta keywords만 ② Open Graph 메타 속성 ③ base target ④ HTML 주석

정답입니다.

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

정답 및 해설 보기

정답: ②
og:title, og:image, og:description 등이 SNS 공유 화면의 정보를 정의한다.

12. defer 속성을 지정한 외부 스크립트에 대한 설명으로 옳은 것은?

① HTML 파싱을 즉시 중단하고 먼저 실행한다. ② JavaScript를 CSS로 변환한다. ③ HTML 파싱을 막지 않고 문서 파싱 후 실행한다. ④ 스크립트를 브라우저 화면에 텍스트로 출력한다.

정답입니다.

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

정답 및 해설 보기

정답: ③
defer는 문서 파싱과 외부 파일 다운로드를 병행하고 파싱이 끝난 뒤 스크립트를 실행하게 한다.

13. br 요소의 올바른 사용 사례는?

① 주소에서 도로명과 전화번호 사이의 의미 있는 줄바꿈 ② 문단 사이의 큰 여백을 만들기 위해 열 번 연속 사용 ③ 페이지의 전체 레이아웃 열을 구성 ④ 제목 글자 크기를 키움

정답입니다.

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

정답 및 해설 보기

정답: ①
br은 실제 줄바꿈에 의미가 있을 때 사용하며 시각적 여백은 CSS로 처리한다.

14. hr 요소의 시맨틱한 의미는?

① 모든 텍스트를 굵게 표시 ② 외부 페이지로 이동하는 링크 ③ 인용문의 출처 표시 ④ 콘텐츠 주제의 전환과 구분

정답입니다.

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

정답 및 해설 보기

정답: ④
hr은 수평선 모양 자체보다 콘텐츠의 주제가 전환된다는 의미를 나타낸다.

15. 제목 요소 h1부터 h6의 사용 원칙으로 옳은 것은?

① 글자 크기를 위해서만 선택한다. ② 문서 계층에 맞춰 순서를 건너뛰지 않고 사용한다. ③ 숫자가 클수록 더 중요한 제목이다. ④ 한 페이지에서 h1을 문단마다 사용한다.

정답입니다.

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

정답 및 해설 보기

정답: ②
제목 요소는 디자인이 아니라 문서의 목차 계층을 표현하며 h1에서 하위 단계로 논리적으로 이어져야 한다.

16. 소스 코드의 공백과 줄바꿈을 유지하며 의미도 나타내는 권장 조합은?

① p와 hr ② div와 span ③ pre 안의 code ④ blockquote 안의 q

정답입니다.

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

정답 및 해설 보기

정답: ③
pre는 서식을 유지하고 code는 내용이 코드임을 의미적으로 나타낸다.

17. HTML에서 문자 <를 텍스트로 표시하는 이름 엔티티는?

① > ② & ③ " ④ <

정답입니다.

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

정답 및 해설 보기

정답: ④
<는 less than의 약자로 HTML 문법에 예약된 왼쪽 꺾쇠를 텍스트로 표시한다.

18. 콘텐츠가 ‘매우 중요하다’는 의미를 전달할 때 알맞은 요소는?

① b만 사용 ② strong ③ u ④ span

정답입니다.

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

정답 및 해설 보기

정답: ②
strong은 시각적 굵기뿐 아니라 내용의 중요성을 브라우저와 보조 기술에 전달한다.

19. 블록 요소의 일반적인 특징은?

① 한 줄 너비를 차지하고 앞뒤에 줄바꿈이 발생한다. ② 내용만큼의 공간만 차지하고 줄바꿈이 없다. ③ 폭과 높이를 전혀 조절할 수 없다. ④ 문장 중간의 한 단어에만 사용해야 한다.

정답입니다.

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

정답 및 해설 보기

정답: ①
블록 요소는 기본적으로 부모의 한 줄을 차지하고 독립된 줄에 배치되며 폭과 높이도 조절할 수 있다.

20. div와 span에 대한 설명으로 옳은 것은?

① 둘 다 고유한 문서 의미를 가진 시맨틱 요소이다. ② div는 인라인이고 span은 블록이다. ③ div는 블록 컨테이너이고 span은 인라인 컨테이너이다. ④ 의미 있는 요소가 있어도 항상 div를 우선한다.

정답입니다.

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

정답 및 해설 보기

정답: ③
두 요소 모두 자체 의미가 없는 컨테이너이며 div는 블록, span은 인라인 방식으로 배치된다.