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/52_기본
+++ b/doc/html5/52_기본
@@ -0,0 +1,62 @@
+# 기본 구조
+HTML 문서는 항상 `<html>` 안에 `<head>`와 `<body>`를 포함하는 계층 구조를 따릅니다.
+
+## html
+
+| **속성** | **설명** |
+|---|----|
+| `lang` | 문서의 기본 언어를 지정합니다. (예: `en`은 영어, `ko`는 한국어) |
+| `dir` | 텍스트 방향을 지정합니다. (`ltr`: 왼쪽에서 오른쪽, `rtl`: 오른쪽에서 왼쪽) |
+| `manifest` | 오프라인 웹 애플리케이션을 위한 캐시 매니페스트 파일의 URL을 지정합니다. (HTML5에서 사용, 현재는 비추천) |
+
+```html
+<html lang="ko">
+  <head>
+    <title>예시 페이지</title>
+  </head>
+  <body>
+    <h1>안녕하세요!</h1>
+    <p>이것은 한국어로 작성된 HTML 문서입니다.</p>
+  </body>
+</html>
+```
+- 설명: `lang="ko"` 속성을 사용하여 문서의 기본 언어를 한국어로 지정했습니다.
+
+## head
+
+```html
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Website</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Welcome</h1>
+  </body>
+</html>
+```
+- 설명: 
+  - `<meta charset="UTF-8">`: 문자 인코딩을 UTF-8로 설정.
+  - `<meta name="viewport">`: 모바일 디바이스에서 적절히 표시되도록 뷰포트 설정.
+  - `<link>`: 외부 CSS 파일 연결.
+
+## body
+| **속성** | **설명** |
+|---|----|
+| `onload` | 페이지 로드가 완료될 때 실행할 스크립트를 지정합니다. |
+| `onunload` | 페이지가 닫힐 때 실행할 스크립트를 지정합니다. |
+
+```html
+<html lang="en">
+  <head>
+    <title>Body Example</title>
+  </head>
+  <body onload="alert('페이지가 로드되었습니다!')">
+    <h1>Hello, World!</h1>
+    <p>This is the content visible to users.</p>
+  </body>
+</html>
+```
+- 설명: `onload` 속성을 사용하여 페이지 로드 시 경고창이 표시되도록 설정했습니다.