1. HTML의 문서구조
아래의 코드는 HTML의 기본구조입니다. 보이는 바와 같이 HTML문서는 크게 DOCTYPE선언부와 <html>태그로 두가지로 구분이 되어집니다. 각각의 부분을 나눠서 확인해 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2. DOCTYPE
doctype선언부는 항상 html문서의 최상단에 위치하면서 이 문서가 어떤 버전으로 작성이 되었는지 브라우저에게 알려주는 선언문같은 역할을 합니다. 작성을 안해도 상관은 없지만 만약 그럴경우 브라우저는 이 문서를 비표준방식으로 해석하기 때문에 반드시 규칙에 맞게 선언을 해주어야 합니다. 위의 예시에서 보여지는 doctype 코드는 html로 작성되어 있는 문서임을 알려주는 선언문이며 html이 아닌 다른 방식으로 작성되어져 있음을 알려주는 선언문도 있으니 html이 아니라 다른 방식으로 문서를 작성할 경우 상황에 맞는 선언문을 작성해 주셔야 합니다.
3. HTML영역
html태그 안의 lang이라는 속성은 이 html문서가 어떤 언어로 작성되어 졌는지 선언하여 브라우저가 인식할수 있도록 알려주는 부분입니다. 예시코드에서는 leng부분을 'ko'로 선언함으로서 한국어로 작성되어 있음을 알려주고 있습니다.
html태그 내부에는 다시 head태그와 body태그로 나뉘어져 있습니다. 우선 head태그부터 살펴보면 head태그 내에는 실질적으로 브라우져 상에서는 보여지지 않지만 문서의 기본정보 설정을 하는 meta태그 부분이나 현재 html문서의 제목 혹은 외부 css파일과 js파일을 연결하는 역할을 합니다. 아래의 코드를 통해 간단히 살펴보겠습니다.
<meta charset="UTF-8">
<meta name="keywords" content="" />
<meta name="title" content="" />
<meta name="Description" content="" />
<meta name="subject" content="" />
<meta name="Robots" content="ALL" />
<meta name="copyright" content="" />
<link rel="stylesheet" href="resources/css/styles.css">
<script src="resources/js/common.js" type="text/javascript"></script>
body태그는 실질적으로 브라우져상에 보여지는 영역 입니다. body영역은 특별히 어려운부분이 없으니 넘어가도록 하겠습니다.
댓글