HTML-이론

GAMMJ·2025년 12월 3일

웹 문서의 구조를 표현하는 마크업 언어 HTML

HTML은 웹페이지를 만들기 위한 기본적인 마크업이다
작성한 HTML 문서는 웹 브라우저에서 렌더링되어 사용자에게 보여진다
아래는 HTML로 구성된 간단한 문서 예시이다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>이것은 간단한 HTML 문서입니다.</p>
</body>
</html>

이렇게 작성하면

이렇게 나온다고 합니다
<body>와 </body> 사이에 있는 것들만 브라우저에 표기된 것을 볼 수 있습니다
HTML 문서는 크게 <head>와 <body>로 구분할 수 있는데 <head>는 웹 문서에 필요한 설정, <body>는 실제로 사용자에게 보여지는 부분이라고 이해하면 된다

웹 문서를 구성하는 요소(element)

웹 문서는 요소로 구성되어 있다고 합니다. 그리고 <body>와 </body>를 묶어 <body> 요소라고 합니다
위의 예시에서 <body>와 </body> 사이에 <h1>요소와 <p>요소가 있었습니다

<body>
	<h1>Hello World!</h1>
	<p>이것은 간단한 HTML 문서입니다.</p>
</body>

이를 풀어서 설명하면, <body> 요소의 영역 안에 <h1> 요소와 <p> 요소가 들어 있다고
표현할 수 있습니다. 또, <body> 요소를 <h1> 요소와 <p> 요소의 부모 요소, <h1> 요소와 <p> 요소를 <body> 요소의 자식 요소라고 부르기도 합니다

여는 태그와 닫는 태그

요소는 여는 태그와 닫는 태그로 구성되는데
여는 태그는 시작점을 의미합니다

<body>
	<h1>여는 태그와 닫는 태그 사이에 텍스트를 넣을 수 있습니다.</h1>
	<div>
		<h3>여는 태그와 닫는 태그 사이에 다른 요소를 자식 요소로 넣을 수 있습니다.</h3>
	</div>
</body>

요소의 종류는 다양한데 위의 예시에서

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>문서 제목</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>이것은 간단한 HTML 문서입니다.</p>
</body>
</html>

: 이 문서가 HTML5로 작성되었음을 선언합니다.
<html lang="en">: HTML 문서의 시작을 나타내며, 여기서 lang 속성은 문서의 언어를 지정합니다.
<head>: 문서에 대한 메타 정보를 담고 있습니다. 예를 들면 문자 인코딩, 뷰포트 설정, 제목 등이 있습니다.
<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 기기에서 적절한 뷰포트를 설정합니다.
<title>: 문서의 제목을 정의합니다. 브라우저 탭에 표시됩니다.
<body>: 실제 콘텐츠가 들어가는 부분으로, 텍스트, 이미지, 링크 등을 포함할 수 있습니다.