HTML 기본 구조

HTML 기본 구조: 웹 페이지의 기초 이해하기

HTML은 웹 페이지의 뼈대를 만드는 언어입니다. 모든 웹 페이지는 HTML을 기반으로 만들어지며, 이를 통해 구조와 콘텐츠를 정의할 수 있습니다. 오늘은 HTML의 기본 구조에 대해 자세히 알아보고, 간단한 예제를 통해 직접 HTML 문서를 작성해 보겠습니다. HTML에 익숙하지 않은 분도 쉽게 따라올 수 있도록 천천히 설명드릴게요.

HTML이란 무엇인가요?

HTML은 "HyperText Markup Language"의 약자로, 웹 페이지를 구성하는 데 사용되는 마크업 언어입니다. HTML은 브라우저가 콘텐츠를 해석하고 표시할 수 있도록 구조를 정의합니다. 예를 들어, 제목, 문단, 이미지, 링크 등을 HTML 태그를 사용해 작성할 수 있습니다.

HTML 문서의 기본 구조

HTML 문서는 항상 일정한 구조를 가집니다. 아래는 HTML 문서의 기본 템플릿입니다:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 기본 구조</title>
</head>
<body>
    <h1>안녕하세요, HTML!</h1>
    <p>이것은 HTML 문서의 기본 구조를 설명하는 예제입니다.</p>
</body>
</html>

이 템플릿을 한 줄씩 분석해 봅시다.

1. <!DOCTYPE html>: 문서 유형 선언

<!DOCTYPE html>은 문서가 HTML5 표준을 따른다는 것을 브라우저에 알리는 선언입니다. 이 선언은 문서의 첫 번째 줄에 있어야 하며, 브라우저가 문서를 올바르게 해석하는 데 도움을 줍니다.

2. <html>: HTML 문서의 루트 요소

<html> 태그는 HTML 문서의 루트 요소입니다. 모든 HTML 콘텐츠는 <html> 태그 안에 작성됩니다. 이 태그는 문서의 시작과 끝을 정의하며, 브라우저는 이 안의 내용을 처리합니다.

<html>
    <!-- 문서의 모든 내용은 이 안에 작성됩니다 -->
</html>

3. <head>: 문서 정보와 설정

<head> 태그는 문서에 대한 정보를 포함합니다. 이 영역은 사용자가 직접 보지 못하지만, 브라우저와 검색 엔진이 사용하는 중요한 데이터를 담습니다. 주요 태그는 다음과 같습니다:

<meta charset="UTF-8">: 문서의 문자 인코딩을 지정합니다. UTF-8은 대부분의 언어를 지원하므로 일반적으로 사용됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 반응형 디자인을 지원하기 위한 설정입니다. 다양한 화면 크기에서 올바르게 표시되도록 합니다.
<title>: 브라우저 탭에 표시될 문서 제목을 정의합니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
</head>

4. <body>: 문서의 본문

<body> 태그는 사용자가 실제로 볼 수 있는 콘텐츠를 포함합니다. 텍스트, 이미지, 비디오, 링크 등 모든 요소가 이 안에 작성됩니다. 예를 들어:

<body>
    <h1>안녕하세요!</h1>
    <p>이것은 문서의 본문입니다.</p>
</body>

HTML의 주요 태그 소개

제목 태그 (<h1> ~ <h6>)

HTML은 제목을 나타내기 위해 <h1>에서 <h6>까지의 태그를 제공합니다. <h1>은 가장 중요한 제목, <h6>은 가장 덜 중요한 제목을 나타냅니다.

<h1>가장 중요한 제목</h1>
<h2>두 번째로 중요한 제목</h2>
<h3>세 번째 제목</h3>

문단 태그 (<p>)

문단을 작성할 때는 <p> 태그를 사용합니다. 문단은 기본적으로 줄바꿈이 적용됩니다.

<p>이것은 문단입니다. HTML 문서에서 텍스트를 그룹화할 때 사용됩니다.</p>

줄바꿈 태그 (<br>)

줄바꿈이 필요한 경우 <br> 태그를 사용합니다. 이 태그는 닫는 태그가 필요하지 않습니다.

<p>첫 번째 줄<br>두 번째 줄</p>

수평선 태그 (<hr>)

내용을 구분하기 위해 수평선을 추가할 때 <hr> 태그를 사용합니다.

<p>위 내용</p>
<hr>
<p>아래 내용</p>