집을 짓는 것처럼#
집을 지을 때는 설계도가 있어야 합니다. 무턱대고 벽부터 세우면 안 되죠. 기초를 놓고, 골조를 세우고, 그 위에 외장을 입힙니다.
HTML 문서도 마찬가지입니다. 아무 태그나 아무렇게나 쓰면 안 됩니다. 브라우저가 이해할 수 있는 정해진 구조가 있습니다.
지난 편에서 만든 코드를 다시 보면서 각 부분의 역할을 정확히 이해해 봅시다.
전체 구조 한눈에 보기#
<!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>
<!-- 화면에 보이는 내용이 여기에 -->
</body>
</html>크게 세 덩어리로 나뉩니다.
| 부분 | 역할 |
|---|---|
<!DOCTYPE html> | "HTML5 문서입니다" 선언 |
<head> | 페이지 정보 (화면에 안 보임) |
<body> | 화면에 보이는 실제 내용 |
1. <!DOCTYPE html> — 버전 선언#
<!DOCTYPE html>이 한 줄은 "이 파일은 HTML5 형식으로 작성됐습니다" 라고 브라우저에 알려줍니다.
없어도 브라우저가 알아서 해석하지만, 있어야 브라우저가 표준 모드로 페이지를 그립니다. 없으면 브라우저마다 다르게 보일 수 있어서 반드시 첫 줄에 써야 합니다.
태그처럼 생겼지만 태그가 아니라 선언(declaration) 입니다. 닫는 태그가 없어요.
2. <html> — 문서의 시작과 끝#
<html lang="ko">
...
</html>모든 HTML 내용을 감싸는 최상위 태그입니다. lang="ko" 속성은 이 페이지가 한국어로 작성됐다는 뜻입니다.
이 속성이 있으면:
- 스크린 리더(시각 장애인용 보조 도구)가 올바른 언어로 읽어줍니다.
- 구글 같은 검색 엔진이 언어를 정확히 파악합니다.
- 브라우저 자동 번역 기능이 더 정확하게 작동합니다.
3. <head> — 눈에 안 보이는 정보들#
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>페이지 제목</title>
</head><head> 안의 내용은 화면에 직접 표시되지 않습니다. 대신 브라우저와 검색 엔진이 페이지를 이해하는 데 필요한 정보들이 들어갑니다.
<meta charset="UTF-8" />#
문자 인코딩 방식을 UTF-8로 설정합니다. UTF-8은 한글, 영어, 일본어, 이모지 등 세계 대부분의 문자를 표현할 수 있는 인코딩입니다.
이 줄이 없으면 한글이 ??? 나 ÇÇÇ 같이 깨져서 나옵니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />#
스마트폰, 태블릿 등 다양한 화면 크기에서 페이지가 올바르게 보이도록 합니다.
이 줄이 없으면 스마트폰에서 화면이 아주 작게 축소되어 글자가 깨알같이 작게 나옵니다.
<title>페이지 제목</title>#
브라우저 탭과 즐겨찾기에 표시되는 페이지 제목입니다. 검색 결과에도 이 제목이 나옵니다.
좋은 제목 예시:
<title>내 소개 페이지 — 홍길동</title>
<title>오늘의 일기 | 나의 블로그</title>4. <body> — 화면에 보이는 모든 것#
<body>
<h1>제목</h1>
<p>내용</p>
</body>앞으로 여러분이 작성할 거의 모든 HTML 태그는 <body> 안에 들어갑니다. 글, 이미지, 버튼, 표 등 화면에 실제로 보이는 요소들이 모두 여기에 위치합니다.
주석 달기#
코드에 메모를 남기고 싶을 때 주석(comment) 을 사용합니다. 주석은 화면에 표시되지 않습니다.
<!-- 이건 주석입니다. 화면에 보이지 않아요. -->
<h1>안녕하세요!</h1>
<!--
여러 줄 주석도 가능합니다.
나중에 수정할 때 메모를 남겨두면 편리해요.
-->
<p>내용</p>코드가 길어지거나 나중에 다시 봤을 때 이해하기 어려울 것 같은 부분에 주석을 달아두는 습관은 아주 좋은 습관입니다.
VSCode 단축키: HTML 기본 구조 자동 완성#
VSCode에서 .html 파일을 열고 !를 입력한 뒤 Tab 키를 누르면 기본 구조가 자동으로 생성됩니다. 이걸 Emmet 이라고 합니다.
! + Tab 입력 →
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>lang="en" 을 lang="ko" 로, <title>Document</title> 를 원하는 제목으로 바꿔 쓰면 됩니다.
직접 해보기 ✏️#
아래 요구사항에 맞게 index.html 을 새로 작성해 보세요.
- DOCTYPE 선언 포함
- 언어를 한국어로 설정
- 문자 인코딩 UTF-8
- 모바일 viewport 설정
- 탭 제목: "홍길동의 첫 페이지" (이름을 본인 이름으로)
- body에 자기소개 문장 한 줄 넣기
작성한 후 Live Server로 열어서 탭에 제목이 올바르게 나오는지 확인하세요.
정리#
<!DOCTYPE html>: HTML5 문서 선언 (항상 첫 줄)<html lang="ko">: 언어 지정 포함 최상위 태그<head>: 화면에 안 보이는 페이지 정보 (charset, viewport, title)<body>: 화면에 보이는 내용 전부<!-- 주석 -->: 화면에 안 보이는 메모
다음 편에서는 <body> 안에서 텍스트를 다루는 다양한 태그들을 배웁니다.
