2.1 HTML 문서의 기본 구조
HTML 문서는 특정한 규칙에 따라 작성됩니다. 이 규칙을 이해하면 HTML 문서를 읽고 작성하는 데 도움이 됩니다. 기본적인 HTML 문서의 구조는 다음과 같습니다:
[HTML 코드 입력]
<!DOCTYPE html> <html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 HTML 문서</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 기본 HTML 문서의 예제입니다.</p>
</body>
</html>
2.2 <!DOCTYPE html> 선언
- 역할:
<!DOCTYPE html> 선언은 HTML5 문서임을 브라우저에 알려주는 역할을 합니다. - 위치: 문서의 가장 첫 번째 줄에 위치해야 합니다.
- 중요성: 브라우저가 문서를 올바르게 해석하고 렌더링하기 위해 필요합니다. 이 선언이 없으면 브라우저는 문서를 "쿼크 모드(Quirks Mode)"로 렌더링할 수 있습니다.
2.3 <html> 요소
- 역할: HTML 문서의 루트 요소로, 문서 전체를 감쌉니다.
- 위치:
<!DOCTYPE html> 다음에 위치하며, 문서의 모든 다른 요소를 포함합니다. - 속성:
<html> 태그에는 lang 속성을 사용하여 문서의 기본 언어를 설정할 수 있습니다.
[HTML 코드 입력]
<html lang="ko">2.4 <head> 요소
- 역할: 문서의 메타데이터를 포함하는 부분입니다. 이 메타데이터는 브라우저가 문서를 올바르게 표시하는 데 사용됩니다.
- 위치:
<html> 태그 내에서 <body> 태그 전에 위치합니다. - 내용:
<title>, <meta>, <link>, <style>, <script> 등을 포함할 수 있습니다. <title>: 브라우저 탭에 표시될 문서의 제목을 지정합니다.
[HTML 코드 입력]
<title>문서 제목</title><meta>: 문서의 메타데이터를 정의합니다. 예를 들어, 문자 인코딩을 설정할 수 있습니다.
[HTML 코드 입력]
<meta charset="UTF-8">2.5 <body> 요소
- 역할: 실제로 브라우저에 표시될 콘텐츠를 포함하는 부분입니다.
- 위치:
<head> 태그 다음에 위치합니다. - 내용: 텍스트, 이미지, 링크, 비디오 등 다양한 콘텐츠 요소를 포함할 수 있습니다.
예제 문서
다음은 간단한 HTML 문서의 예제입니다:
[HTML 코드 입력]
<!DOCTYPE html> <html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 HTML 문서</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 기본 HTML 문서의 예제입니다.</p>
</body>
</html>
2.6 연습 문제
- HTML 문서의 기본 구조를 작성해 보세요.
<title> 태그를 사용하여 문서 제목을 "내 첫 번째 HTML 문서"로 설정해 보세요.<meta> 태그를 사용하여 문서의 문자 인코딩을 UTF-8로 설정해 보세요.
댓글
댓글 쓰기