1. 문서 형식 정의 tag
문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같다.
<!-- HTML5 -->
<!DOCTYPE html>2. html tag
html 태그는 모든 HTML 요소의 부모 요소이며 웹페이지에 단 하나만 존재한다. 즉, 모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다. 단 <!DOCTYPE>는 예외이다.
html 태그는 글로벌 어트리뷰트를 지원한다. 한국어를 주 언어로 하는 경우 lang="ko" 를 추가한다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
</body>
</html>3. head tag
-
메타데이터를 포함하기 위한 요소
-
웹페이지에 단 하나만 존재함.
-
메타데이터는 HTML 문서의 title, style, link, script에 대한 데이터로 화면에 표시되지 않음.
head 요소에는 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다.
3.1 title tag
타이틀 태그는 문서의 제목을 정하는 태그로 브라우저 탭에 나타낼 이름을 정한다.
<title>문서 제목</title>3.2 style tag
스타일 태그는 문서의 스타일 정보를 정의하는 태그로 CSS 문법에 맞춰 작성한다.
<style>
body {
background-color: yellow;
color: blue;
}
</style>3.3 link tag
링크태그는 외부 리소스와의 연계 정보를 정의하고 주로 HTML과 외부 CSS 파일을 연계에 사용된다.
<link rel="stylesheet" href="style.css">rel은 관계(relationship)를 뜻하며, 현재 문서와 연결한 아이템의 관계가 어떻게 되는지 설명한다.
3.4 script tag
script 요소에는 client-side JavaScript = (자바스크립트 문법) 를 정의한다.
<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>하지만 src 어트리뷰트를 사용하면 외부 JavaScript 파일을 로드할 수 있다.
<script src="main.js"></script>3.5 meta tag
meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
charset 어트리뷰트는 브라우저가 사용할 문자셋을 정의한다.
<meta charset="utf-8">4. body tag
body tag는 HTML 문서의 내용을 나타내며 웹페이지에 단 하나만 존재한다. 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 body 요소 내에 기술된다.
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>