한 줄 요약 — HTML 문서는 항상
<!DOCTYPE html>로 시작해<html>안에<head>와<body>를 둡니다.<head>에는 화면에 직접 안 보이는 설정을,<body>에는 사람이 볼 내용을 적습니다.
학습 목표#
- HTML 문서의 가장 단순한 5줄 골격을 보지 않고 칠 수 있다.
<!DOCTYPE html>이 왜 첫 줄에 있어야 하는지 설명할 수 있다.<head>와<body>에 각각 무엇을 두는지 구분할 수 있다.- 닫는 태그 위치만 보고 트리 구조가 맞는지 가늠할 수 있다.
오늘의 비유 — 집의 뼈대와 지붕·내부 공간#
집을 한 채 지을 때 가장 먼저 하는 일은 땅에 기초를 놓고 뼈대를 세우는 것입니다. 그다음 지붕을 올리고, 그 안쪽에 거실·주방·방을 나눠 만듭니다. 같은 평수라도 이 순서를 빼먹으면 그 위에 무엇을 올려도 무너집니다.
HTML 문서도 같습니다. <html>이라는 집 한 채를 짓고, 그 안을 <head>(겉으로 안 보이는 설비실) 와 <body>(사람이 들어가 사는 거실) 로 나눕니다. <!DOCTYPE html>은 건축 신고서 같은 첫 줄로, "이 집은 표준 규격을 따른다"는 한 줄 표시입니다. 오늘은 이 세 부분을 한 줄씩 자기 손으로 세워봅니다.
핵심 개념#
<!DOCTYPE html> — 건축 신고서#
문서 맨 앞의 <!DOCTYPE html>은 화면에 아무것도 그려주지 않습니다. 대신 브라우저에게 "이 페이지는 현대 HTML 규격을 따른다"라고 알려주는 신호입니다.
이 줄을 빼면 브라우저는 자동으로 호환 모드(quirks mode) 라는 옛날식 해석기로 전환합니다. 1990년대 인터넷 익스플로러 시절의 동작을 흉내 내는 모드라, 박스 크기 계산이 어긋나거나 일부 CSS가 의도와 다르게 동작합니다. 새로 짓는 집을 50년 전 건축법으로 짓는 셈입니다.
대소문자는 어느 쪽이든 동작하지만, 보통 위의 짧은 표기 한 줄을 그대로 씁니다. 옛 버전처럼 가운데에 다른 글자를 길게 적어 넣을 일은 거의 없습니다.
<html> — 집 한 채#
<html>은 문서 전체를 감싸는 가장 바깥 껍데기입니다. 한 문서당 정확히 한 번 등장하고, <head>와 <body>를 자식으로 둡니다.
여는 태그에는 보통 lang="ko" 같은 속성을 함께 적습니다. "이 페이지의 주된 언어는 한국어"라는 표시입니다. 검색 엔진과 스크린리더가 이 정보를 보고 동작을 바꿉니다. 빼도 화면은 보이지만, 접근성 점수가 떨어지고 일부 번역기가 헛돕니다.
<head> — 설비실#
<head>는 화면에 직접 보이지 않는 설정을 모아두는 자리입니다. 페이지 제목, 글자 인코딩, 외부 스타일시트 연결 같은 항목이 들어갑니다. 집으로 치면 전기·수도 계량기, 보일러가 모여 있는 설비실입니다. 평소에 들여다보지는 않지만, 없으면 집이 제대로 안 돌아갑니다.
대표적으로 두 가지가 거의 항상 들어갑니다.
<meta charset="utf-8">— "한글·이모지 같은 다국어 글자를 깨짐 없이 다룬다"는 선언입니다. 빼면 한글이?로 깨질 수 있습니다.<title>— 브라우저 탭에 표시되는 이름이자, 검색 결과의 큰 글씨로 잡히는 텍스트입니다.
<head> 안에 사람이 읽을 본문 글이나 그림을 두면 안 됩니다. 설비실에 소파를 놓는 격입니다. 자세한 메타 태그는 다음 회에서 따로 다룹니다.
<body> — 거실#
<body>는 사람이 실제로 보고 읽는 모든 콘텐츠를 담는 공간입니다. 제목·본문·이미지·버튼이 전부 이 안에 들어갑니다. 한 문서당 한 번만 등장합니다.
다 합치면 — 5줄로 끝나는 한 채#
위 네 가지를 한 파일 안에 모으면 다음 모양이 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>오늘의 첫 페이지</title>
</head>
<body>
<h1>안녕</h1>
<p>본문</p>
</body>
</html>
이 문서가 브라우저 안에서 만들어내는 트리는 대략 다음과 같이 생겼습니다.
html
├── head
│ ├── meta (charset)
│ └── title
└── body
├── h1
└── p
브라우저는 이 트리를 따라가며 화면을 그립니다. 트리를 머리에 그릴 수 있으면 닫는 태그 위치가 어긋났을 때도 "어느 방의 문이 안 닫혔나"를 금방 짚을 수 있습니다.
함께 따라하기 — 5줄짜리 HTML 직접 짓기#
지난 회에 만든 frontend-course/ 안에 day-03 폴더를 새로 만들고, 그 안에 index.html 파일을 둡니다. 다음 다섯 줄을 그대로 칩니다.
<!DOCTYPE html>
<html lang="ko">
<head><meta charset="utf-8"><title>첫 집</title></head>
<body><h1>안녕, 여긴 셋째 날</h1></body>
</html>
저장한 뒤 Live Server로 열면 두 곳이 한 번에 바뀝니다. 브라우저 탭 이름이 첫 집으로, 본문 큰 글씨가 안녕, 여긴 셋째 날로 잡힙니다. 탭 이름은 <title> 덕분이고 큰 글씨는 <h1> 덕분입니다. 같은 문서 안에서도 설비실과 거실이 서로 다른 자리에서 일하고 있다는 신호입니다.
여기서 한 가지만 더 해봅니다. 줄바꿈을 풀어 사람이 읽기 좋은 형태로 다시 적어 저장해 보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>첫 집</title>
</head>
<body>
<h1>안녕, 여긴 셋째 날</h1>
</body>
</html>
저장하면 화면은 똑같이 보입니다. HTML은 사람이 읽기 위한 들여쓰기·줄바꿈을 화면 결과에 반영하지 않기 때문입니다. 들여쓰기는 우리를 위한 배려일 뿐, 브라우저에게는 같은 집입니다.
흔한 실수 3가지#
1. DOCTYPE을 빼먹어 호환 모드로 렌더된다#
가장 자주 겪는 실수입니다. 첫 줄이 비어 있거나, <html>부터 바로 시작하는 경우입니다.
<html lang="ko">
<head><title>첫 집</title></head>
<body><h1>안녕</h1></body>
</html>
(이 코드는 의도와 다르게 동작합니다.) 화면은 멀쩡해 보여도 브라우저는 호환 모드로 돌아가, CSS의 박스 크기 계산이 옛 규격으로 처리됩니다. 나중에 만든 레이아웃이 1px씩 밀려나거나, 폭이 안 맞는 식의 이상 동작이 거기서 시작됩니다.
<!DOCTYPE html>
<html lang="ko">
<head><title>첫 집</title></head>
<body><h1>안녕</h1></body>
</html>
첫 줄에 <!DOCTYPE html> 한 줄만 더하면 됩니다. 개발자 도구의 Elements 탭에서 맨 위에 이 줄이 보인다면 안심해도 좋습니다.
2. <head> 안에 보이는 콘텐츠를 넣는다#
<head>는 설비실이지 거실이 아닙니다. 그런데 입문자들이 가끔 다음과 같이 적습니다.
<head>
<title>첫 집</title>
<h1>안녕</h1>
</head>
(이 코드는 의도와 다르게 동작합니다.) 브라우저가 친절하게 <h1>을 알아서 <body> 쪽으로 옮겨 보여주기는 합니다. 다만 우리가 의도한 트리 구조가 아니라 브라우저가 추측한 트리 구조로 동작하기 때문에, 다음에 무엇을 추가해도 결과가 예측하기 어려워집니다.
<head>
<title>첫 집</title>
</head>
<body>
<h1>안녕</h1>
</body>
사람이 볼 글자·그림은 모두 <body> 안으로 옮겨두세요. 설비실에는 계량기만 있어야 합니다.
3. 닫는 태그 위치가 어긋나 트리가 깨진다#
여는 태그와 닫는 태그의 순서가 어긋나는 실수도 흔합니다.
<body>
<h1>안녕
<p>본문입니다</h1></p>
</body>
(이 코드는 의도와 다르게 동작합니다.) 나중에 연 <p>가 먼저 열린 <h1>보다 먼저 닫히면, 브라우저가 추측으로 트리를 메우면서 의도와 다른 부모-자식 관계가 생깁니다. 결과적으로 CSS가 엉뚱한 요소에 걸리거나, 본문이 제목 크기로 남아 있는 식의 증상이 나타납니다.
<body>
<h1>안녕</h1>
<p>본문입니다</p>
</body>
태그는 나중에 연 것이 먼저 닫히는 순서를 따릅니다. "방문을 닫기 전에 그 안의 화장실 문부터 닫는다"고 외워두면 헷갈리지 않습니다.
오늘 배운 것 체크리스트#
-
<!DOCTYPE html>이 왜 첫 줄에 있어야 하는지 설명할 수 있다. -
<head>와<body>에 들어갈 내용을 한 가지씩 댈 수 있다. - 5줄짜리 HTML을 보지 않고 칠 수 있다.
- 들여쓰기·줄바꿈이 화면에 영향을 주지 않는다는 사실을 안다.
자주 묻는 질문#
Q. <!DOCTYPE html>은 왜 굳이 쓰나요? 빼도 페이지가 보이는데요.
A. 빼면 브라우저가 호환 모드로 동작합니다. 당장은 보여도 박스 크기 계산이 옛 규격으로 돌아가서, 나중에 만든 레이아웃이 미세하게 어긋나기 시작합니다. 새로 짓는 모든 페이지에 이 한 줄을 두는 게 사실상의 표준입니다.
Q. <head>와 <body>의 차이가 뭔가요?
A. <head>에는 화면에 직접 보이지 않는 설정(제목, 글자 인코딩, 외부 스타일시트 등)이 들어가고, <body>에는 사람이 보는 본문이 들어갑니다. 같은 집 안의 설비실과 거실의 차이라고 생각하면 됩니다.
Q. HTML 기본 구조를 매번 외워서 쳐야 하나요?
A. 처음 며칠은 손으로 직접 치는 편이 머리에 더 오래 남습니다. 손에 익으면 VS Code에서 !를 친 뒤 Tab 키를 누르는 단축 입력으로 5줄이 자동으로 채워지는 기능을 쓸 수 있습니다. 첫 주 정도는 의미를 떠올리며 직접 쳐 보세요.
다음 시간 예고#
내일은 메타 태그 — viewport, charset, og 이미지로 검색·공유 노출 잡기를 다룹니다. 오늘 <head> 안에 살짝 적었던 <meta> 한 줄이 실제로 무엇을 통제하는지, 그리고 카카오톡에 링크를 붙였을 때 미리보기를 결정하는 태그가 무엇인지 한 번에 정리합니다.