HTML의 기본 구조를 이해하는 것은 웹 페이지 구성의 기본입니다. 이 글에서는 HTML 문서의 기본 구성 요소인 DOCTYPE, `<html>`, `<head>`, `<body>` 태그에 대해 이론을 공부하고 실습을 통해 실제로 적용해 볼 수 있도록 안내해 드리겠습니다.
자동목차
이론: HTML 기본 구조
웹 브라우저는 HTML 문서를 읽고, 파싱하여 사용자에게 정형화된 매체로써 웹 페이지를 표시합니다. 이를 가능하게 하는 것이 바로 HTML의 기본 구조입니다.
1. DOCTYPE 선언
문서의 첫 줄에 위치하는 <!DOCTYPE html> 선언은 현재 문서가 HTML5 문서임을 브라우저에 알리는 역할을 합니다. 이것은 태그가 아니라 선언으로, HTML 문서에서 가장 먼저 나타나야 하며, HTML5가 현재 표준이기 때문에 HTML 문서에서는 이 선언을 사용합니다.
2. <html> 태그
이 태그는 HTML 문서의 루트 요소로 모든 다른 HTML 요소들은 이 <html> 태그 내부에 위치해야 합니다. 또한 lang 속성을 통해 문서의 기본 언어를 선언하는 것이 좋습니다.
3. <head> 태그
<head> 태그 내에는 문서의 메타 정보가 포함됩니다. 이는 예를 들어 문서의 제목(<title>), 문자 집합(<meta charset="utf-8">), 외부 스타일시트 링크(<link>), 스크립트(<script>), 다른 메타정보(<meta>) 등이 포함될 수 있습니다.
4. <body> 태그
<body> 태그는 실제 웹 페이지의 내용을 담습니다. 이 부분에는 텍스트, 이미지, 비디오, 게임, 플레이어 컨트롤, 스크립트 등 사용자에게 출력되는 모든 콘텐츠가 위치합니다.
실습: HTML 기본 구조 실제로 해보기
이론을 배웠으니, 이제 기본 HTML 구조를 가진 샘플 웹페이지를 만들어 보겠습니다.
1. 텍스트 에디터를 열고 다음 코드를 입력하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 HTML 구조 이해하기</title>
</head>
<body>
<h1>Welcome to HTML!</h1>
<p>이 문단은 웹 페이지의 본문, 즉 body 태그 안에 있습니다.</p>
</body>
</html>2. 파일을 'basic-structure.html'로 저장합니다.
3. 저장한 파일을 웹 브라우저로 열어보세요.
코드 설명
- <!DOCTYPE html>: 선언은 이 문서가 최신 버전의 HTML, 즉 HTML5임을 의미합니다.
- <html lang="en">: 루트 요소로서 문서 전체의 부모 요소입니다. lang 속성은 문서의 주된 언어가 영어임을 명시합니다.
- <head>: 이 안에서는 문서의 문자 인코딩, 제목, 그리고 기타 메타 정보를 설정할 수 있습니다.
- <meta charset="UTF-8">: 문자 인코딩을 UTF-8로 설정하여 국제 문자를 올바르게 표시할 수 있게 합니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 장치에서의 보기 환경을 최적화합니다.
- <title>: 브라우저 탭에 페이지의 제목으로 표시됩니다.
- <body>: 이것은 페이지 내용의 컨테이너로 실제 표시되는 내용을 포함합니다.
마무리
이제 여러분은 HTML 문서의 기본 구조를 이해하고 간단한 페이지를 만들 수 있는 능력을 갖추었습니다. 이 구조는 모든 HTML 문서의 골격이므로 잘 숙지하시기 바랍니다.
다음 포스팅에서는 HTML 태그에 대해 더 자세히 알아보고, 다양한 요소들을 사용하여 페이지를 더 풍부하게 만드는 방법을 배워보겠습니다. 코드가 웹 브라우저에서 어떻게 표현되는지 확인하면서, 각 요소와 태그가 실제로 어떤 일을 하는지 감을 잡으시면 좋을 것입니다. 계속해서 HTML에 대한 여정을 즐겨주세요!