HTML-이론

이종찬·2025년 3월 27일

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

HTML(HyperText Markup Language)는 웹 페이지를 만들기 위한 기본적인 마크업 언어입니다.

이 언어를 사용하여 문서의 구조와 콘텐츠를 정의할 수 있습니다.

작성한 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>즐거운 코딩!</h1>
    <p>함께 즐거운 코딩을 배워볼까요?.</p>
</body>
</html>

이렇게 HTML 문서를 작성하면 브라우저는 이 HTML 문서를 렌더링해서 사용자에게 보여줍니다.

문서 제목

즐거운 코딩!

함께 즐거운 코딩을 배워볼까요?

문서와 브라우저에 렌더링된 화면을 비교해서 보면,

<body>와 </body> 사이에 있는 것들만 브라우저에 표기된 것을 볼 수 있습니다.

HTML 문서는 크게 <head>와 <body>로 구분할 수 있는데 <head>는 웹 문서에 필요한 설정,

<body>는 실제로 사용자에게 보여지는 부분 입니다.

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

웹 문서는 요소로 구성되어 있습니다. <body>와 </body>를 묶어 <body> 요소라고 합니다.

위의 예시에서 <body>와 </body> 사이에 <h1>요소와 <p>요소가 있었습니다.

이를 풀어서 설명하면, <body> 요소의 영역 안에 <h1> 요소와 <p> 요소가 들어 있다고

표현할 수 있습니다. 또, <body> 요소를 <h1> 요소와 <p> 요소의 부모 요소,

<h1> 요소와 <p> 요소를 <body> 요소의 자식 요소라고 부르기도 합니다.

여는 태그와 닫는 태그

요소는 여는 태그와 닫는 태그로 구성되어 있습니다.

여는 태그란 요소의 시작점을 의미합니다.

<h1> 요소를 예로 들면, <h1>은 여는 태그, </h1>은 닫는 태그입니다.

여는 태그와 닫는 태그 사이에는 텍스트를 넣을 수도 있고, 또는 자식 요소를 추가할 수도 있습니다.

HTML 요소의 종류는 굉장히 다양합니다.

먼저 위에서 예시로 보여드린 HTML 문서에 있었던 요소에 대한 설명입니다.

<!DOCTYPE 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>: 실제 콘텐츠가 들어가는 부분으로, 텍스트, 이미지, 링크 등을 포함할 수 있습니다.