티스토리 뷰

구름/따라하며 배우는 html,css

HTML의 구조 완벽 정리: head, link, meta, style, title, body

박완희버서커 2025. 11. 10. 12:13
반응형
HTML의 구조 완벽 정리: head, link, meta, style, title, body의 역할까지 | Complete Guide to HTML Structure: Roles of head, link, meta, style, title, body

HTML의 구조 완벽 정리: head, link, meta, style, title, body의 역할까지

1. HTML 문서의 전체 구조

HTML 문서는 계층적인 구조(Tree Structure)를 가집니다.
모든 HTML 파일은 시작 태그(`<html>`)부터 끝 태그(`</html>`)까지 감싸진 형태로 이루어집니다.
그 내부는 두 개의 큰 영역, 즉 `<head>`와 `<body>`로 나뉩니다. 

<!DOCTYPE html>
<html>
<head>
<!-- 문서 정보(보이지 않음) -->
</head>
<body>
<!-- 실제 화면에 보이는 내용 -->
</body>
</html>


구분 역할
<html> 문서 전체를 감싸는 루트(root) 요소
<head> 문서의 정보, 스타일, 설정 등을 담는 영역 (사용자에게 직접 보이지 않음)
<body> 실제 화면에 표시되는 콘텐츠 영역 (텍스트, 이미지, 버튼 등)


2. <head> 영역

<head>는 HTML 문서의 머리 부분으로,
브라우저가 문서를 “어떻게 해석하고 표현할 것인지”에 필요한 메타정보(meta information)를 담고 있습니다.

이 영역은 화면에 직접 표시되지 않지만,
검색엔진, 브라우저, 소셜미디어, 접근성 프로그램이 문서를 이해하는 데 결정적인 역할을 합니다.

기본 구조 예시

<head>
<meta charset="UTF-8">
<meta name="description" content="HTML 구조를 설명하는 예제">
<meta name="author" content="홍길동">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 구조 정리</title>
<link rel="stylesheet" href="style.css">
<style>
body { font-family: Arial, sans-serif; }
</style>
</head>


3. <meta> — 문서의 속성 및 정보

<meta> 태그는 문서 자체의 정보(메타데이터)를 정의합니다.
이 정보는 브라우저가 문자 인코딩, 페이지 크기, 작성자 정보 등을 파악하는 데 사용됩니다.

속성 의미 예시
charset 문서의 문자 인코딩 방식 <meta charset="UTF-8">
name="description" 페이지 설명 <meta name="description" content="웹 개발 기초">
name="author" 작성자 <meta name="author" content="홍길동">
name="viewport" 반응형 웹 설정 (화면 크기 조정) <meta name="viewport" content="width=device-width, initial-scale=1.0">

예시 설명:
  • charset="UTF-8" : 모든 언어 문자를 올바르게 표시하도록 설정
  • viewport : 모바일 기기에서 화면 비율을 맞춰 반응형으로 표시


4. <title> — 문서의 제목

<title> 태그는 브라우저 탭이나 즐겨찾기에서 표시되는 문서의 이름을 정의합니다. 

<title>HTML 구조 정리</title>

  • 사용자는 페이지 상단 탭에서 이 제목을 확인할 수 있습니다.
  • 검색엔진(예: 구글)도 이 내용을 페이지 제목으로 인식하여 검색 결과에 노출합니다.


5. <link> — 외부 자원 연결

<link> 태그는 HTML 문서와 외부 파일(리소스)을 연결할 때 사용합니다.
대표적으로 CSS 파일, 아이콘, 폰트 등을 연결합니다. 

<link rel="stylesheet" href="style.css">


속성 설명 예시
rel 연결 관계 정의 rel="stylesheet" → 스타일시트 연결
href 연결할 파일 경로 href="style.css"
type 연결 파일의 유형(생략 가능) type="text/css"

즉, <link>는 HTML이 외부 자원과 협력하도록 연결해주는 다리 역할을 합니다.

6. <style> — 내부 스타일 정의

<style> 태그는 HTML 문서 내부에서 CSS를 직접 작성할 때 사용합니다. 

<style>
body {
background-color: #f4f4f4;
color: #333;
}
h1 {
font-size: 2em;
color: steelblue;
}
</style>

  • 내부 스타일 방식(internal CSS): 문서 안에 스타일을 직접 작성하는 방식
  • 소규모 문서에는 유용하지만,
    여러 페이지에 적용해야 할 때는 <link>로 외부 CSS 파일을 연결하는 것이 효율적입니다.


7. <body> — 실제 콘텐츠 영역

<body>는 사용자가 실제로 화면에서 보는 모든 콘텐츠가 들어가는 영역입니다.

텍스트, 이미지, 버튼, 표, 동영상 등
화면에 나타나는 모든 HTML 요소가 <body> 안에 들어갑니다.

예시: 

<body>
<h1>HTML 기본 구조</h1>
<p>이 문서는 HTML의 기본 구성 요소를 설명합니다.</p>
<img src="example.jpg" alt="HTML 예시 이미지">
<button>클릭하세요</button>
</body>

브라우저는 <body>에 포함된 내용만 화면에 출력하며,
<head> 영역은 보이지 않지만 기능적으로 함께 작동합니다.

8. 전체 예시 — HTML 구조 완성형

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="description" content="HTML 구조와 head, body 태그 설명">
<meta name="author" content="홍길동">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 문서 구조</title>
<link rel="stylesheet" href="style.css">
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
h1 { color: darkblue; }
</style>
</head>

<body>
<h1>HTML 구조 이해하기</h1>
<p>HTML 문서는 head와 body로 구성되며, 각각의 역할이 다릅니다.</p>
<ul>
<li>head: 문서 정보 및 설정</li>
<li>body: 실제 콘텐츠 표시</li>
</ul>
</body>
</html>

브라우저 표시 결과:
  • 제목: 브라우저 탭에 “HTML 문서 구조” 표시
  • 본문: <h1> 제목, <p> 설명, <ul> 목록이 화면에 표시


9. 요약 및 결론

태그 주요 역할 화면 표시 여부
<html> 문서 전체를 감싸는 루트 요소 X
<head> 문서 설정, 스타일, 메타정보 등 X
<meta> 문자 인코딩, 설명, 저자 등 문서 속성 정의 X
<title> 브라우저 탭, 즐겨찾기 이름 지정 O (탭 제목만)
<link> 외부 CSS, 폰트, 아이콘 등 연결 X
<style> 내부 CSS 정의 X (결과는 body에서 보임)
<body> 사용자에게 보이는 실제 콘텐츠 O

결론:
HTML의 구조는 단순히 태그들의 나열이 아니라,
정보(head)와 표현(body)을 명확히 구분하는 체계적 구조입니다.
<head>는 “보이지 않는 설정의 영역”, <body>는 “보이는 콘텐츠의 영역”이며,
이 둘이 조화롭게 구성될 때 의미 있고 완전한 웹 문서가 만들어집니다.

반응형

'구름 > 따라하며 배우는 html,css' 카테고리의 다른 글

CSS margin, padding, border 완벽 정리  (0) 2025.11.10
CSS 가상 요소(Pseudo-Element) 완벽 정리  (0) 2025.11.10
CSS 가상 클래스(Pseudo-Class) 완벽 정리  (0) 2025.11.10
HTML 태그와 요소 완벽 정리: 빈 요소, 블록 요소, 인라인  (0) 2025.11.10
HTML:시맨틱 요소(Semantic Element)란?  (0) 2025.11.10
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/11   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
글 보관함
반응형