html 문서 기본 구조
🏗️ HTML 문서 기본 구조란?
정의
HTML 문서 기본 구조는
<!DOCTYPE>,<html>,<head>,<body>로 이루어진 문서의 뼈대이다.
HTML 문서는 단순히 태그를 나열하는 것이 아니라, 문서의 선언과 본문 영역을 명확하게 나누는 구조를 가진다.
🧱 기본 골격
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
문서 본문
</body>
</html>
🧩 구성 요소
<!DOCTYPE>: HTML5 문서임을 선언한다.<html>: 문서 전체를 감싼다.<head>: 브라우저에 직접 보이지 않는 정보를 담는다.<meta>: 문자 인코딩 같은 메타 정보를 설정한다.<title>: 브라우저 탭 제목을 정한다.<body>: 실제 화면에 표시되는 내용을 담는다.
🔍 각 영역의 역할
head에는 문서 정보와 외부 리소스 설정이 들어간다.
- 문자 인코딩
- 문서 제목
- CSS 연결
- JavaScript 연결
- SEO 관련 메타 정보
body에는 사용자가 실제로 보게 되는 콘텐츠가 들어간다.
- 텍스트
- 이미지
- 버튼
- 폼
- 시맨틱 태그
🧪 기본 구조 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>예제 문서</title>
</head>
<body>
<header>상단 영역</header>
<main>본문 영역</main>
<footer>하단 영역</footer>
</body>
</html>
📌 정리
- HTML 문서는
doctype,html,head,body를 중심으로 구성된다. head는 문서 정보,body는 화면 내용을 담당한다.- 기본 구조를 정확히 이해하면 이후 태그 학습이 쉬워진다.
댓글남기기