반응형

 

 

 

안녕하세요, 토스트데브입니다!
이전 글에서는 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 #웹개발공부

반응형
저작자표시 비영리 (새창열림)

'Web Front > HTML' 카테고리의 다른 글

[HTML 페이지 구조 이해] #01 HTML 문서의 기본 구조 완전 정리  (0) 2025.09.04
[HTML의 TEXT 요소] #04 HTML 텍스트 요소 – 문자 표현 태그 총정리 (남은 태그 편)  (10) 2025.09.03
[HTML의 TEXT 요소] #03 HTML 텍스트 요소 – 중요성과 강조 표현 완전 정리  (0) 2025.09.03
[HTML의 TEXT 요소] #02 HTML 목록 태그 완벽 정리, 순서가 있을 때와 없을 때의 차이는?  (4) 2025.07.16
[HTML의 TEXT 요소] #01 제목<h1~h6>과 단락<p>  (0) 2025.07.06

티스토리툴바