Web Front/HTML
[HTML 페이지 구조 이해] #02 HTML 페이지 구조 이해 - HEAD에 들어가는 태그에 대하여
TOASTDEV
2025. 9. 8. 12:53
반응형
안녕하세요, 토스트데브입니다!
이전 글에서는 HTML 문서의 기본 구조, 즉 <html>, <head>, <body>의 큰 틀을 함께 살펴봤습니다.
이번 글에서는 그 중에서도 웹페이지의 정보와 설정을 담당하는 <head> 태그 안에 들어가는 다양한 태그들을 하나씩 정리해보겠습니다.
✅ <head> 태그란?
<head>는 웹 브라우저에 직접적으로 표시되지 않는 정보를 담는 공간입니다.
하지만 이 영역은 페이지의 문서 정보, SEO, 인코딩, 외부 리소스 연결, 접근성, 브라우저 동작 등에 아주 중요한 역할을 합니다.
📌 <head> 태그 안에 들어갈 수 있는 주요 요소 정리
1. <!DOCTYPE html> (※ head 바깥에 위치하지만 함께 이해)
- 문서가 HTML5 형식임을 선언하는 태그
- 문서의 맨 첫 줄에 위치
<!DOCTYPE html>
2. <meta> – 문서 정보 설정
🟨 문자 인코딩 설정 (필수!)
<meta charset="UTF-8">문서가 UTF-8로 인코딩되어 있음을 나타냅니다. 한글/다국어 깨짐 방지!
🟨 뷰포트 설정 (반응형 필수)
<meta name="viewport" content="width=device-width, initial-scale=1.0">모바일/태블릿 등 다양한 기기에서의 화면 비율 설정
🟨 기타 메타 정보
<meta name="description" content="이 페이지는 HTML head 태그를 설명합니다.">
<meta name="keywords" content="HTML, head 태그, meta, 웹개발">
<meta name="author" content="토스트데브">검색엔진 최적화(SEO)에 도움을 주는 정보들
3. <title> – 문서의 제목
<title>HTML Head 태그 완전 정리</title>
- 브라우저 탭 제목, 검색 결과 타이틀 등에 표시
- 하나의 문서에 반드시 한 번만 사용
4. <link> – 외부 리소스 연결
🟦 CSS 연결
<link rel="stylesheet" href="style.css">
🟦 파비콘 설정
<link rel="icon" href="favicon.ico" type="image/x-icon">
5. <script> – 자바스크립트 삽입
<script src="main.js"></script>
- 자바스크립트 파일을 <head> 또는 <body> 맨 아래에 삽입
- <head>에 들어갈 경우 페이지 로딩 지연을 피하려면 defer 속성 활용
<script src="main.js" defer></script>
6. <style> – 내부 CSS 작성
<style>
body {
background-color: #f9f9f9;
font-family: sans-serif;
}
</style>
- 외부 파일 없이 페이지 내에 CSS를 직접 작성할 수 있음
- 작은 스타일 테스트나 예외적인 상황에 사용
7. 기타 자주 쓰는 태그
🟩 웹 폰트 사용 (Google Fonts 예시)
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
🟩 SNS 연동 (Open Graph Protocol)
<meta property="og:title" content="페이지 제목">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="페이지 설명">
🟩 트위터 카드 설정
<meta name="twitter:card" content="summary_large_image">
✅ 전체 예제: head 태그 정리 샘플
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="HTML head 태그 정리">
<meta name="author" content="Toast Dev">
<title>HTML Head 요소 정리</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<script src="main.js" defer></script>
</head>
🧩 정리 요약
| 태그 | 역할 |
| <meta> | 문자셋, 뷰포트, SEO 정보 등 문서 설정 |
| <title> | 문서 제목 (브라우저 탭에 표시) |
| <link> | 외부 CSS, 파비콘 등 연결 |
| <script> | 외부 자바스크립트 연결 |
| <style> | 내부 CSS 작성 |
HTML에서 <head> 영역은 단순한 부가 정보 공간이 아니라, 페이지의 품질, 접근성, SEO를 결정하는 핵심 공간입니다.
앞으로 HTML을 본격적으로 활용하기 위해 꼭 알아두세요!
#HTML #HTML기초 #HTML문서구조 #head태그 #메타태그 #title태그 #link태그 #script태그 #style태그 #웹접근성 #웹표준 #웹개발기초 #웹퍼블리싱 #코딩입문 #프론트엔드 #toastdev #웹개발공부
반응형