63 lines
1.9 KiB
Markdown
63 lines
1.9 KiB
Markdown
# 기본 구조
|
|
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` 속성을 사용하여 페이지 로드 시 경고창이 표시되도록 설정했습니다.
|