웹 개발 기초집LESSON 02

HTML 문서의 기본 뼈대

난이도입문

예상 시간25분

선수지식이전 강의

2강. HTML 문서의 기본 뼈대

이번 강의의 결과물은 브라우저가 문서의 언어, 문자 인코딩, 제목, 화면 콘텐츠를 올바르게 구분할 수 있는 index.html입니다.

1. 이번 강의에서 해결할 문제

1강에서는 로컬 서버가 index.html을 브라우저에 전달하는 과정을 확인했습니다. 하지만 브라우저는 받은 텍스트 중 무엇이 문서 정보이고 무엇이 화면에 표시할 내용인지 어떻게 알 수 있을까요?

HTML은 태그로 콘텐츠의 역할과 계층을 표시합니다. 이번 강의에서는 모든 페이지의 출발점이 되는 문서 구조를 작성합니다.

학습 목표

HTML은 태그로 콘텐츠의 역할과 계층을 표시합니다. 이번 강의에서는 모든 페이지의 출발점이 되는 문서 구조를 작성합니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

태그, 요소, 속성

<html lang="ko">내용</html>

태그(tag): <html>과 </html>처럼 요소의 시작과 끝을 표시하는 문법입니다.
요소(element): 시작 태그, 내용, 종료 태그를 포함한 하나의 HTML 구성 단위입니다.
속성(attribute): lang="ko"처럼 요소에 추가 정보를 제공합니다.

HTML 요소는 다른 요소 안에 들어갈 수 있습니다. 이를 중첩이라고 하며, 안쪽 요소를 바깥쪽 요소보다 먼저 닫아야 합니다.

<body>
  <p>올바른 중첩</p>
</body>

기본 문서 구조

Document
├─ <!doctype html>
└─ html
   ├─ head
   │  ├─ meta
   │  ├─ meta
   │  └─ title
   └─ body
      ├─ h1
      └─ p

구성	역할
`<!doctype html>`	브라우저가 표준에 맞는 방식으로 문서를 처리하도록 알립니다.
`<html lang="ko">`	문서 전체를 감싸는 루트 요소이며, 주 언어가 한국어임을 나타냅니다.
`<head>`	문자 인코딩, 페이지 제목처럼 문서에 관한 정보를 담습니다.
`<meta charset="UTF-8">`	한글을 포함한 문자를 어떤 방식으로 해석할지 지정합니다.
`<meta name="viewport">`	모바일 화면 너비를 기준으로 페이지를 표시하도록 설정합니다.
`<title>`	브라우저 탭과 방문 기록 등에 표시될 문서 제목입니다.
`<body>`	제목, 문단처럼 사용자에게 보여 줄 페이지 콘텐츠를 담습니다.

WHATWG HTML 문법 표준은 HTML 문서에 doctype과 html 문서 요소가 필요하다고 설명합니다. HTML 요소 표준은 html 요소의 내용이 head 다음 body 순서로 구성된다고 정의합니다.

3. 코드 예시

파일 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio\index.html

1강에서 만든 index.html을 다음 내용으로 정리합니다. 아직 파일을 만들지 않았다면 portfolio 폴더와 파일을 새로 만듭니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 개발 포트폴리오</title>
  </head>
  <body>
    <h1>게임과 웹을 공부하는 개발자</h1>
    <p>Unreal C++과 웹 개발 학습 과정을 기록합니다.</p>
  </body>
</html>

실행 위치:

D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

PowerShell 실행 명령:

cd D:\WebProject\StartBook\dev-foundations\web-basics\portfolio
python -m http.server 5500

브라우저 주소:

http://localhost:5500/

4. 코드가 동작하는 이유

<!doctype html>을 읽은 브라우저는 표준 모드로 문서를 처리합니다.
<html lang="ko">는 나머지 요소를 포함하는 문서의 뿌리가 되고, 음성 낭독 및 번역 도구에 기본 언어를 전달합니다.
브라우저는 <head> 안의 정보를 페이지 설정에 사용하지만 일반적인 본문 콘텐츠처럼 화면에 표시하지 않습니다.
UTF-8 문자 인코딩을 사용하므로 한글을 올바른 문자로 해석할 수 있습니다.
<title>의 내용은 본문이 아니라 브라우저 탭 제목에 사용됩니다.
<body> 안의 h1과 p는 브라우저가 화면에 표시할 문서 콘텐츠가 됩니다.

브라우저는 HTML 원문을 위에서부터 해석해 요소의 부모와 자식 관계를 가진 DOM 트리를 만듭니다. 들여쓰기 자체가 동작을 바꾸지는 않지만 이 관계를 사람이 읽고 실수를 찾기 쉽게 해 줍니다.

lang 속성은 발음과 번역 규칙을 선택하는 도구에 도움을 주므로 문서의 실제 주 언어와 일치시켜야 합니다. 이 용도 역시 WHATWG의 html 요소 설명에 명시되어 있습니다.

5. 자주 하는 실수

화면에 보일 글을 head에 작성함: 사용자에게 보여 줄 콘텐츠는 body 안에 작성합니다.
중첩 순서를 뒤집어 닫음: <body><p>내용</body></p>가 아니라 <body><p>내용</p></body> 순서로 닫습니다.
lang을 실제 언어와 다르게 지정함: 한국어 중심 문서라면 lang="ko"를 사용합니다.
title과 h1을 같은 것으로 생각함: title은 문서와 브라우저 탭의 이름이고, h1은 화면에 보이는 대표 제목입니다.
오류가 있어도 화면이 보이므로 정상이라고 판단함: 브라우저는 일부 잘못된 HTML을 스스로 보정하지만, 작성자가 의도한 구조와 다른 DOM이 만들어질 수 있습니다.

6. 짧은 실습 과제

코드 예시를 web-basics/portfolio/index.html에 작성합니다.
title을 이름 | 개발 포트폴리오 형식으로 바꿉니다.
h1에는 방문자가 화면에서 보게 될 개발자 소개를 작성합니다.
p에는 현재 공부 중인 게임 또는 웹 기술을 한 문장으로 작성합니다.
로컬 서버를 실행해 다음 두 위치의 내용이 서로 다른지 확인합니다.
- 브라우저 탭: title 내용
- 웹페이지 본문: h1, p 내용
F12로 개발자 도구를 열고 Elements 탭에서 html 아래에 head와 body가 형제 요소로 만들어졌는지 확인합니다.

완료 기준은 한글이 깨지지 않고, 탭 제목과 본문 제목이 각각 의도한 위치에 나타나며, Elements 탭에서 문서 계층을 확인할 수 있는 것입니다.

7. 이해 점검 질문 3개

head와 body에는 각각 어떤 종류의 정보를 넣어야 하나요?
화면에 직접 표시되지 않는 lang="ko" 속성이 필요한 이유는 무엇인가요?
브라우저가 <!doctype html> 없이도 어느 정도 화면을 표시할 수 있는데, 그래도 doctype을 작성해야 하는 이유는 무엇인가요?

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ