안녕하세요. 이번 포스팅에서는 HTML을 처음 배울 때 가장 먼저 마주치게 되는 기본 문서 구조에 대해 알아보겠습니다.
HTML 파일을 새로 만들 때마다 매번 등장하는 <!DOCTYPE html>, <meta>, <head> 같은 코드들, 그냥 복붙하면서 "이게 뭔지 잘 모르겠다"고 느끼신 적 있으신가요? 오늘 포스팅을 읽고 나면 각각의 코드가 어떤 역할을 하는지 확실하게 이해하실 수 있을 겁니다.
기본 문서 구조를 알아야 하는 이유
웹페이지를 만들 때 가장 먼저 필요한 건 문서의 기본 뼈대입니다. 집을 지을 때 설계도가 있어야 하듯이, HTML 문서도 정해진 기본 구조를 갖춰야 브라우저가 내용을 올바르게 읽고 화면에 표시할 수 있습니다.
비유를 하자면, HTML 기본 구존느 집의 설계도와 같습니다. "이 건물은 어떤 용도이고, 각 공간은 어디에 있는지"를 명시해두는 것처럼, HTML도 브라우저에게 "이 문서는 HTML이고, 제목은 이거고, 화면에 보여줄 내용은 여기 있어"라고 알려주는 역할을 합니다.
HTML 기본 문서 구조
아래에 있는 코드가 바로 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>
HTML의 기본 문서 구조는 <!DOCTYPE html>, <html>, <head>, <body>, <title>, <meta> 총 6가지로 이루어져 있습니다. 하나씩 살펴보도록 합시다.
문서 형식 선언, <!DOCTYPE html>
문서 맨 첫 줄에 오는 이 선언은 "이 파일은 HTML5로 작성됐습니다" 라고 브라우저에게 알려주는 역할입니다. 태그처럼 생겼지만 태그는 아니고, 일종의 선언문입니다.
문서의 시작과 끝, <html lang="ko">
<!DOCTYPE> 선언 다음에 오는 <html> 태그가 실제 문서의 시작입니다. 여는 태그부터 닫는 태그 </html> 사이에 모든 내용이 들어갑니다.
lang="ko" 속성은 "이 문서의 주요 언어는 한국어입니다"라는 뜻입니다. 영어라면 "en", 일본어라면 "ja"를 쓰면 됩니다. 스크린 리더(시각장애인 보조 기술)나 번역 기능이 이 정보를 활용하기 때문에 접근성 측면에서도 중요한 속성이에요.
문서의 정보, <head>
<head> 안에 들어가는 내용은 웹페이지 화면에 직접 표시되지 않습니다. 대신 브라우저와 검색엔진에게 이 문서에 대한 정보를 전달하는 역할을 합니다.
인코딩 방식 설정, <meta charset="UTF-8">
<meta> 태그는 문서의 다양한 설정값을 지정할 때 사용합니다. 그중 charset="UTF-8"은 특히 중요한데, 인코딩 방식을 UTF-8로 설정하는 코드입니다.
UTF-8은 한국어, 영어, 일본어 등 세계 대부분의 언어를 표현할 수 있는 인코딩 방식입니다. 이걸 빠뜨리면 한글이 깨져 보일 수 있습니다. 요즘은 VS Code에서 html:5 자동완성을 사용하면 자동으로 포함되기 때문에 직접 타이핑할 일은 거의 없지만, 이 코드가 왜 필요한지 이해해두는 것이 중요합니다.
모바일 화면 설정, <meta name="viewport" content="width=device-width, initial-scale=1.0">
모바일 화면 대응을 위한 설정입니다.
- width=device-width: 화면 너비를 기기의 실제 너비에 맞춰라
- initial-scale=1.0: 처음 로딩 시 확대/축소 없이 100% 크기로 보여라
이 코드가 없으면 스마트폰에서 웹페이지를 열었을 때 화면이 PC버전 그대로 작게 보이는 문제가 생길 수 있습니다. 요즘은 모바일 사용자가 많기 때문에 기본적으로 넣어주는 코드입니다.
문서의 제목, <title>
<title> 태그에 입력한 텍스트는 브라우저 탭 상단에 표시됩니다. 사용자가 여러 탭을 열어놨을 때 어떤 페이지인지 구분하는 기준이 되기도 하고, 구글 같은 검색엔진이 검색 결과에 제목을 표시할 때도 이걸 활용합니다.
그래서 <title>을 "무제" 나 "index"처럼 대충 쓰는 것보다, 페이지 내용을 잘 나타내는 이름으로 찾는게 SEO(검색 최적화)에도 유리합니다.
화면에 표시될 콘텐츠, <body>
<body> 안에 들어가는 내용이 바로 브라우저 화면에 실제로 보이는 부분입니다. 텍스트, 이미지, 버튼, 영상 등 사용자가 눈으로 보고 상호작용하는 모든 요소가 여기에 들어갑니다.
실습하기
먼저 VS Code를 실행합니다. VS Code가 설치 안 되신 분들은 VS Code 설치 방법 & 사용법 이 포스팅을 참고해 주세요.
VS Code를 실행한 뒤, 작업 폴더 옆에 있는 New File 아이콘을 클릭해서 (파일명은 자유롭게 지으면 된다. 나는 여기서) 01_skeleton.html 이름의 파일을 만들어 보겠습니다.
파일 이름 뒤에 .html을 붙이는 이유는, 이 파일이 HTML형식으로 작성된 문서라른 걸 컴퓨터와 브라우저에게 알려주기 위함입니다. .txt는 일반 텍스트, .jpg는 이미지 파일인 것처럼, .html은 웹 문서 파일을 의미합니다.
코드 편집기에 html 이라고 입력하면 자동완성 목록이 뜨는데, 그중 html:5를 선택하면 HTML의 기본 구조가 자동으로 완성됩니다.
앞서 배운 내용을 토대로 <title> 부분에 원하는 이름을 작성해보고, Live Server로 브라우저 창을 열어보면 탭에 설정한 이름이 나오는 걸 확인할 수 있습니다.
이번엔 <body> 안에 내용을 작성해보겠습니다. 다음 포스팅에서 배울 <h1> 태그를 이용해 페이지에 텍스트를 작성해볼게요.
브우저에 굵고 큰 글씨로 텍스트가 표시되는 걸 확인할 수 있습니다.
마치며
HTML의 기본 문서 구조에 대해 알아보았습니다. 처음엔 외워야 할 것들이 많아 보이지만, VS Code의 자동완성 기능을 활용하면 금방 익숙해지실 겁니다.
다음 포스팅에는 실제로 화면에 내용을 표시하는 데 자주 쓰이는 텍스트 관련 태그들을 배워볼 예정입니다. 궁금하신게 있으시다면 댓글 남겨주세요. 감사합니다!
참고 자료 이 포스팅은 아래 자료를 참고하여 작성되었습니다.
https://wikidocs.net/160892
'HTML CSS JS' 카테고리의 다른 글
| 1-4 목록 태그 (0) | 2026.06.04 |
|---|---|
| 1-3 HTML 자주 쓰는 태그 (0) | 2026.05.26 |
| 1-1. HTML 역할 이해 (1) | 2026.04.23 |