■문서 형식 정의
- 문서 형식 정의(Document Type Definition, DTD) 태그
- 출력할 웹 페이지의 형식을 브라우저에게 전달한다.
- 문서의 최상위에 위치해야 한다.
- 대소문자를 구별하지 않는다.
- 문서별 기술 양식
- HTML5
<!DOCTYPE html>-
- HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">-
- XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">■html 태그
- 모든 HTML 요소의 부모 요소이다.
- 웹페이지에 단 하나만 존재한다.
- 모든 자식 요소는 html 요소의 자식 요소이며, html 요소 내부에 기술해야 한다.
- 단, 문서 형식 정의 태그(DTD Tag)는 예외이다.
<!DOCTYPE HTML>
<!-- html은 글로벌 속성을 지원한다. -->
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
</body>
</html>■head 태그
- 메타데이터를 포함하기 위한 요소이다.
- 메타데이터는 HTML 문서의 타이틀, 스타일, 링크, 스크립트에 대한 데이터이다.
- 메타데이터는 화면에 표시되지 않는다.
- 웹페이지에 단 하나만 존재한다.
- 메타데이터 이외의 화면에 표시되는 일체의 요소를 포함시킬 수 없다.
◆head 태그 - title 태그
- 문서의 제목을 정의한다.
- 정의된 제목은 브라우저의 탭에 표시된다.
<!DOCTYPE html>
<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>◆head 태그 - style 태그
- HTML 문서를 위한 스타일 정보를 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<style>
body {
background-color: yellow;
color: blue;
}
</style>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
◆head 태그 - link 태그
- 외부 리소스와의 연계 정보를 정의한다.
- 주로 HTML과 외부 CSS 파일, 스크립트 파일과의 연계에 사용된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<link rel="stylesheet" href="style.css">
<link rel="script" href="script.js">
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>◆head 태그 - script 태그
- 클라이언트 측의 자바스크립트 코드를 정의한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
document.addEventListener('click', function() {
alert('Clicked!');
});
</script
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>- src 속성을 사용하면, 외부 자바스크립트 파일을 로드할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="main.js"></script>
</head>
<body>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
</html>◆head 태그 - meta 태그
- 설명, 키워드들, 저자, 기타 등등의 메타데이터 정의에 사용된다.
- 메타데이터는 브라우저, 검색엔진 등에 의해 사용된다.
- charset 속성은 브라우저가 사용할 문자셋을 정의한다.
- 검색엔진 최적화를 위해, 검색엔진이 사용할 키워드들을 정의한다.
<meta name="keywords" content="HTML, CSS, XML. XHTML, JavaScript">- 웹페이지의 설명을 정의한다.
<meta name="description" content="Web tutorials on HTML and CSS">- 웹페이지의 저자를 명기한다.
<meta name="author" content="John Doe">- 웹페이지를 30초마다 새로고침 한다.
<meta http-equiv="refresh" content="30">■body 태그
- HTML 문서의 내용을 나타낸다.
- 웹페이지에 단 하나만 존재한다.
- 메타데이터를 제외한 웹페이지를 구성하는 대부분의 요소가 기술된다.
출처: https://poiemaweb.com/html5-tag-basic
HTML5 Tag - Basic | PoiemaWeb
문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며 대소문자를 구별하지 않는다. 문서별 기술 양식은 아래와 같
poiemaweb.com
반응형