HTML 이란? - head 태그에 대해서 -2
2024. 10. 12. 21:46ㆍFront-End의 모든것/HTML
728x90
반응형
안녕하세요!
오늘은 Head 태그에 대해서 알아보도록 하겠습니다.
이전 글에서 head 태그의 기본적인 역할을 간략하게 설명드렸는데요,
오늘은 조금 더 자세히 알아보도록 해요!
1️⃣ Head 태그란?
<head> 태그는 HTML 문서의 메타데이터를 정의하는 부분으로, 브라우저가 문서를 어떻게 처리하고 표시할지를 결정하는 데 필요한 정보가 포함됩니다. 이 태그는 <html> 요소 안에 있으며, <body> 태그와는 달리 사용자가 직접적으로 보지 않는 정보들을 담습니다. <head> 요소 안에는 다양한 태그들이 포함될 수 있으며, 이 태그들의 역할은 페이지의 외관과 동작을 설정하는 데 필수적입니다.
2️⃣ 주요 Head 태그들
1. <title>: 웹 페이지의 제목을 정의합니다. 브라우저 탭이나 검색 엔진 결과에 표시됩니다.
<title>웹 페이지 제목</title>
2. <meta>: 메타데이터를 제공하는 태그로, 문서의 설명, 인코딩 방식, 뷰포트 설정, 검색 엔진을 위한 키워드 등을 정의합니다.
- 페이지 설명:
<meta name="description" content="이 페이지는 ...에 대한 설명을 포함합니다.">
- 문자 인코딩:
<meta charset="UTF-8">
- 뷰포트 설정 (반응형 웹 디자인을 위한 설정):
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link>: 외부 리소스(예: CSS 파일)를 문서에 연결하는 데 사용됩니다.
<link rel="stylesheet" href="styles.css">
- <script>: 외부 자바스크립트 파일을 연결하거나 내부 자바스크립트 코드를 작성할 때 사용됩니다.
<!-- 외부 스크립트 예제 -->
<script src="script.js"></script>
<!-- 내부 스크립트 예제 -->
<script> console.log("Hello, World!"); </script>
- <base>: 문서 내 모든 상대 URL의 기준 URL을 설정합니다. 요소 안에서 한 번만 사용할 수 있습니다.
<base href="https://www.example.com/">
- <style>: 문서에 직접 CSS 스타일을 포함할 때 사용됩니다.
<style> body { background-color: lightblue; } </style>
- <noscript>: 자바스크립트가 비활성화된 브라우저에서 표시할 내용을 정의합니다.
<noscript>자바스크립트가 비활성화되어 있습니다.</noscript>
<head> 태그 내 정보들은 필수적인 요소들을 많이 다루고 있습니다.
내가 구축 하려는 사이트의 특성에 맞게 작성해서
에러없는 페이지를 다같이 만들어봐요!
728x90
반응형
'Front-End의 모든것 > HTML' 카테고리의 다른 글
| HTML 이란? - nav 태그에 대해서 -6 (2) | 2024.10.16 |
|---|---|
| HTML 이란? - header 태그에 대해서 -5 (1) | 2024.10.15 |
| HTML 이란? - footer 태그에 대해서 -4 (0) | 2024.10.14 |
| HTML 이란? - body 태그에 대해서 -3 (3) | 2024.10.13 |
| HTML 이란? - 기본 개념 및 구조 - 1 (7) | 2024.10.12 |