2025-03-07T20:29:01

2025-03-07 20:29:01 +09:00
parent 129046ec26
commit d481cb3b80
12 changed files with 1701 additions and 163 deletions
--- a/doc/html5/53_메타데이터.md
+++ b/doc/html5/53_메타데이터.md
@@ -0,0 +1,94 @@
+# 메타데이터
+이 태그들은 모두 `<head>` 안에 배치되며, 문서의 메타데이터나 리소스 연결을 담당합니다.
+
+## title
+`title` 태그는 일반적으로 속성을 사용하지 않으며, 단순히 텍스트 콘텐츠만 포함합니다.
+
+```html
+<head>
+  <title>My Awesome Website</title>
+</head>
+```
+- 설명: 브라우저 탭에 "My Awesome Website"라는 제목이 표시됩니다.
+
+## meta
+| **속성** | **설명** |
+|---|----|
+| `charset` | 문서의 문자 인코딩을 지정합니다. (예: `UTF-8`) |
+| `name` | 메타데이터의 이름을 정의합니다. (예: `description`, `keywords`) |
+| `content` | `name` 또는 `http-equiv`에 대한 값을 지정합니다. |
+| `http-equiv` | HTTP 헤더와 유사한 동작을 정의합니다. (예: `refresh`, `content-type`) |
+
+> `meta`의 `viewport` 설정은 모바일 웹에서 필수적이며, `link`는 CSS와 파비콘 연결에 자주 사용됩니다.
+
+```html
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="This is a sample website.">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="refresh" content="5;url=https://example.com">
+</head>
+```
+- 설명:
+  - `charset="UTF-8"`: 문자 인코딩을 UTF-8로 설정.
+  - `name="description"`: 검색 엔진에 표시될 문서 설명.
+  - `name="viewport"`: 모바일 친화적 뷰포트 설정.
+  - `http-equiv="refresh"`: 5초 후 다른 페이지로 리디렉션.
+
+## link
+| **속성** | **설명** |
+|---|----|
+| `rel` | 연결된 리소스와 문서의 관계를 지정합니다. (예: `stylesheet`, `icon`) |
+| `href` | 연결할 리소스의 URL을 지정합니다. |
+| `type` | 리소스의 MIME 타입을 지정합니다. (예: `text/css`) |
+| `media` | 리소스가 적용될 미디어 유형을 지정합니다. (예: `screen`, `print`) |
+
+```html
+<head>
+  <link rel="stylesheet" href="styles.css" type="text/css" media="screen">
+  <link rel="icon" href="favicon.ico" type="image/x-icon">
+</head>
+```
+- 설명:
+  - `rel="stylesheet"`: 외부 CSS 파일 연결.
+  - `rel="icon"`: 브라우저 탭에 표시될 파비콘 연결.
+
+## style
+| **속성** | **설명** |
+|---|----|
+| `type` | 스타일시트의 MIME 타입을 지정합니다. (기본값: `text/css`) |
+| `media` | 스타일이 적용될 미디어 유형을 지정합니다. (예: `screen`, `all`) |
+| `scoped` | 스타일을 특정 요소에만 적용하도록 제한합니다. (HTML5에서 실험적, 비추천) |
+
+```html
+<head>
+  <style type="text/css" media="screen">
+    body {
+      background-color: lightblue;
+      font-family: Arial, sans-serif;
+    }
+  </style>
+</head>
+```
+- 설명: `<style>` 태그 내에 CSS를 직접 작성하여 페이지 스타일을 정의.
+
+## base
+| **속성** | **설명** |
+|---|----|
+| `href` | 모든 상대 URL의 기준이 되는 절대 URL을 지정합니다. |
+| `target` | 링크의 기본 열기 방식을 지정합니다. (예: `_blank`, `_self`) |
+
+`base`는 한 문서에 하나만 사용할 수 있으며, 모든 상대 URL에 영향을 미칩니다.
+
+```html
+<head>
+  <base href="https://example.com/resources/" target="_blank">
+</head>
+<body>
+  <a href="page1.html">Page 1</a>
+  <img src="image.jpg" alt="Sample Image">
+</body>
+```
+- 설명:
+  - `href`: 모든 상대 URL의 기준 경로를 "https://example.com/resources/"로 설정.
+  - `target="_blank"`: 링크가 새 탭에서 열리도록 기본 설정.