Chapter 1-5. HTML 문서기본구조( HTML/CSS)

카테고리 없음

Chapter 1-5. HTML 문서기본구조( HTML/CSS)

Chansman 2025. 3. 28. 14:08

📌 HTML 문서의 기본 구조 이해하기

이번 튜토리얼은 HTML 문서의 기본 구조를 이해하고 실제로 작성하는 방법을 안내합니다. HTML문서의 구조는 크게 head와 body로 나뉘며, head는 문서의 정보, body는 화면에 표시될 내용을 담습니다. 이 두 부분을 html 태그로 묶고, 문서 상단에 DOCTYPE을 선언하여 HTML5 문서임을 명시합니다. 이 튜토리얼을 통해 HTML문서의 기본 구조를 확립하고 웹 개발을 시작하는 데 필요한 필수적인 지식을 제공합니다.

📝 1. HTML 문서의 기본 구조 이해하기

🔹 HTML 문서 구역 나누기

HTML 문서는 크게 head와 body로 나눠집니다.
- head: 문서의 정보(메타데이터)가 들어가는 구역
- body: 실제로 웹 페이지에 표시될 콘텐츠가 들어가는 구역

이렇게 구역을 나누면 코드 관리가 용이하고, 웹 브라우저의 렌더링 성능에도 유리합니다.

✅ 구조 설정 예시

<!DOCTYPE html>
<html>
  <head>
    <!-- 문서 정보 -->
  </head>
  <body>
    <!-- 화면 콘텐츠 -->
  </body>
</html>

🏗️ 2. HTML 문서의 기본 구조와 독타입

DOCTYPE은 HTML 문서의 타입을 지정하는 선언으로, 웹 브라우저와 시스템에게 HTML5 문서임을 알리는 역할을 합니다.
HTML5를 사용하여 문서를 작성할 때는 반드시 DOCTYPE을 추가해야 합니다.

✅ DOCTYPE 예시

<!DOCTYPE html>
<html>
  <!-- 문서 내용 -->
</html>

📝 3. HTML 문서 작성의 기본 사항

🔹 문서 작성 순서

DOCTYPE을 먼저 작성하여 HTML5 문서임을 명시합니다.
그 후 html 태그로 문서의 시작을 표시합니다.
head와 body 태그를 작성하여 각각의 역할을 정의합니다.

✅ 문서 작성 예시

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>웹 페이지 제목</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
  </body>
</html>

📝 4. HTML 문서 기본 구조

head 태그에는 문서 정보를, body 태그에는 실제 콘텐츠가 들어갑니다.
문서 구조를 명확하게 이해하고, 적절한 들여쓰기를 통해 가독성을 높입니다.

✅ 문서 구조 예시

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>웹 페이지 제목</title>
  </head>
  <body>
    <h1>안녕하세요, 웹 개발!</h1>
  </body>
</html>

📝 5. HTML 문서의 언어 및 제목 설정

🔹 언어 설정: lang="ko"는 HTML 문서가 한국어로 작성되었음을 명시합니다. 이는 시스템적으로 문서를 보다 잘 처리할 수 있게 해줍니다.

🔹 문서 제목 설정: title 태그를 사용하여 웹 브라우저의 탭에 표시될 문서 제목을 설정합니다.

✅ 예시

<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>내 웹 페이지</title>
  </head>
</html>

📝 6. HTML 문서의 메타 태그와 인코딩

meta 태그를 사용하여 UTF-8 인코딩을 설정함으로써, 다양한 환경에서 텍스트가 깨지지 않도록 보장합니다.

✅ meta 태그 예시

<meta charset="UTF-8">

이 태그는 문서 렌더링 전에 브라우저가 텍스트 인코딩 방식을 확인할 수 있게 해줍니다.

📚 HTML 문서 구조 및 작성법 요약

이번 튜토리얼에서는 HTML 문서의 기본 구조와 함께 DOCTYPE 선언, head와 body 구분, 언어 설정, 타이틀 설정, meta 태그 사용법 등을 배웠습니다. 이러한 기본 구조는 웹 개발을 시작하는 데 필수적인 지식이므로 반드시 이해하고 실습해야 합니다.

✅ 핵심 포인트

DOCTYPE은 HTML5 문서를 명시하는 선언입니다.
head와 body 태그로 구역을 나누어 정보를 관리합니다.
meta 태그로 텍스트 인코딩을 설정하여 문자 깨짐을 방지합니다.
title 태그로 웹 브라우저 탭에 문서 제목을 설정합니다.

🎯 마무리하며

HTML 기본 구조를 확립하고 웹 페이지의 첫 단계를 진행해보셨습니다. 이 튜토리얼을 통해 HTML 문서의 체계적인 구조와 작성법을 이해하는 데 중요한 첫걸음을 떼었습니다. 이제, 실습을 통해 웹 페이지를 한 단계 더 발전시키세요! 🚀✨