DevBlackCat
HTML 하루 15분, 2.기본 문서 구조 작성 본문
안녕하세요, 오늘은 "HTML 하루 15분, 일주일만에 완성하기" 시리즈의 두 번째 주제인 기본 문서 구조 작성에 대해 알아보겠습니다.
지난번 주제에서는 HTML 소개 및 개발 환경 설정에 대해 배웠습니다. HTML 기본 문서 구조란 웹 페이지를 구성하는 기본적인 뼈대를 의미합니다. 이를 마치 집을 짓는 과정에 비유하자면, 기본 문서 구조는 집의 기둥과 지붕, 벽 같은 핵심 요소입니다. 이제부터 기본 문서 구조에 필요한 내용을 간단한 예시로 보여드리며 설명하겠습니다.
우선, 모든 HTML 문서는 <!DOCTYPE html> 선언으로 시작합니다. 이 선언은 현재 문서가 HTML5 문서임을 브라우저에 알려주는 역할을 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>기본 문서 구조 예제</title>
</head>
<body>
<h1>안녕하세요! 기본 문서 구조입니다.</h1>
<p>이 문서는 기본 문서 구조를 실습하는 예시입니다.</p>
</body>
</html>
위 코드를 살펴보면, html 태그로 전체 문서를 감싸고 있고, 그 안에는 head 및 body 태그가 각각 포함되어 있는 것을 확인할 수 있습니다. 이는 마치 집의 뼈대와 여러 가지 구성 요소를 설치하는 과정과 비슷합니다. head 태그는 웹 페이지의 메타 정보, 스타일 및 외부 스크립트 등 페이지에 필요한 여러 정보들이 위치하는 곳입니다.
이는 집을 짓는 과정에서 배관, 전기 등 내부 시설을 설치하는 부분에 비유할 수 있습니다. 여기서는 문자 인코딩을 위한 meta 태그와 웹 페이지 제목을 위한 title 태그가 포함되어 있습니다.
body 태그는 실제 웹 페이지에 내용이 나타나는 부분입니다. 이 태그 안에 들어가는 요소들은 집의 가구와 인테리어에 비유할 수 있습니다. 예시에서는 제목(h1 태그)과 본문(p 태그)이 포함되어 있습니다.
이처럼 기본 문서 구조 작성은 웹 페이지의 전체적인 구조를 이해하고, 필요한 요소를 순서대로 배치하는 과정입니다. 이 과정이 끝나면 앞으로 배울 여러 HTML 요소를 추가하고 확장할 수 있는 기초가 마련된 것입니다.
'웹개발 > HTML' 카테고리의 다른 글
| HTML 하루 15분, 일주일만에 완성하기 (0) | 2023.06.03 |
|---|---|
| HTML 하루 15분, 일주일만에 완성하기 - 4.리스트와 순서 구분 (0) | 2023.06.03 |
| HTML 하루 15분, 일주일만에 완성하기 - 3.텍스트 요소와 포매팅 (0) | 2023.06.02 |
| HTML 하루 15분, 일주일만에 완성하기 - 1.HTML 소개 및 개발 환경 설정 (0) | 2023.06.02 |
