코드 예제 및 설명

약 4분

본문 듣기

HTML 기초 > HTML 문서 구조

안녕하세요, HTML 학습을 시작해보겠습니다! HTML은 웹 페이지를 만들기 위한 기본적인 언어입니다. 이 과정을 통해 HTML 문서 구조에 대해 배워볼 건데, 너무 어렵게 생각하지 마세요. HTML은 사람에게도 친숙하고 구성 요소들이 잘 정리되어 있습니다.

HTML 문서의 기본 구조

웹 페이지는 여러 가지 요소로 구성되어 있어요. 그 중 가장 기본이 되는 것은 바로 문서의 구조입니다. HTML 문서는 보통 다음과 같은 구조를 가집니다:

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>내 첫 번째 웹 페이지</title>
</head>
<body>
    <h1>안녕하세요, HTML!</h1>
    <p>이것은 나의 첫 번째 웹 페이지입니다.</p>
</body>
</html>

이 구조를 좀 더 살펴보겠습니다.

<!DOCTYPE html>: HTML5 문서임을 선언합니다. 이 라인은 브라우저에게 이 페이지가 HTML5로 작성되었음을 알려줍니다.
<html>: HTML 문서의 시작을 나타냅니다.
<head>: 문서에 대한 메타데이터가 들어가는 부분입니다. 여기서는 <title> 태그를 사용해 웹 페이지의 제목을 설정하였습니다.
<body>: 실제 사용자에게 보여지는 내용이 들어가는 부분입니다. 여기서는 제목(<h1>)과 단락(<p>)을 사용했습니다.

자, 이제 여러분이 직접 이 구조를 시도해볼 차례입니다! VS Code에서 새로운 파일을 만들고, 위의 코드를 복사하여 붙여넣어 보세요.

동작 원리 이해하기

작성한 코드를 HTML 파일(.html)로 저장한 후 웹 브라우저에서 열어보세요. 여러분의 첫 번째 웹 페이지를 확인할 수 있을 거예요! 과 태그의 차이점도 눈여겨보세요. 은 가장 큰 제목을 의미하고, 는 단락을 의미합니다.

핵심 요약

이번 시간에는 HTML 문서의 기본 구조를 배웠습니다. <!DOCTYPE html>, <html>, <head>, 그리고 <body>의 역할에 대해 알아보았죠. 앞으로 이러한 구조를 바탕으로 다양한 웹 페이지를 만들 수 있을 것입니다.

실습 문제

자신만의 제목과 내용을 가진 HTML 파일을 만들어보세요.
추가적으로 <h2>, <h3> 태그를 사용하여 여러 개의 제목을 추가해보세요.
이 파일을 다시 웹 브라우저에서 열어보세요.

개인 프로젝트: 자기소개 페이지 만들기

사전 학습한 내용을 바탕으로 자신을 소개하는 웹 페이지를 만들어보세요. 이름, 간단한 소개, 취미 등을 포함해 볼 수 있습니다. 이 과정에서 다양한 HTML 태그를 활용하여 멋진 페이지를 만들어 보세요! 여러분의 창의력을 마음껏 발휘해 보세요!

이제 본격적으로 HTML의 세계에 발을 디뎠으니, 여러분의 상상력이 낳은 웹 페이지가 어떻게 만들어지는지 경험해 보세요. 앞으로 더 많은 배움을 기대해 주세요!