고정 헤더 영역
상세 컨텐츠
본문
반응형
문서 형식 정의 태그(Document Type Definition Tag)
출력할 웹 페이지의 형식을 브라우저에게 전달하는 태그
대소문자를 구별하지 않으며 html 버전 등에 따라 작성하는 방법이 다르다.
<!-- 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> 내부에서 기술되어야 한다. (<!DOCTYPE>은 예외)
또한 Global Attribute를 지원한다. 가장 많이 사용되는 것에는 lang 정도가 있다.
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
</body>
</html>HEAD 태그
head 요소는 metadata를 포함하기 위한 요소로, 웹 페이지에 단 하나만 존재할 수 있다.
화면에 표시되지 않는 meta, title, style, link, script 등을 포함하고 있으며
이 외에 화면에 표시되는 요소에 대해서는 포함시킬 수 없다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
<style>
body {
background-color: yellow;
color: blue;
}
</style>
<link rel="stylesheet" href="style.css">
<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>
<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>- title 태그
- 문서의 제목을 정의하는 태그, 정의된 제목은 브라우저 탭을 통해 표시된다
- style 태그
- html 문서를 위한 style 정보를 정의한다(CSS 작성을 위한 태그)
- link 태그
- 외부에서 참조할 리소스와의 연계 정보를 정의한다
주로 css 파일 등이 이에 속한다.
- 외부에서 참조할 리소스와의 연계 정보를 정의한다
- script 태그
- 화면 상의 동작 등에 대한 내용을 JavaScript를 통해 정의한다.
src 속성을 사용해 외부 JavaScript 파일을 로드하는 것도 가능하다
- 화면 상의 동작 등에 대한 내용을 JavaScript를 통해 정의한다.
- meta 태그
<meta>: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN
HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
developer.mozilla.org
표준 메타데이터 이름 - HTML: Hypertext Markup Language | MDN
<meta> 요소는 name 특성을 메타데이터 이름으로, content 특성을 값으로 하여 문서 메타데이터를 이름-값 쌍의 형태로 제공할 때 사용할 수 있습니다.
developer.mozilla.org
BODY 태그
html 문서의 내용을 나타내며, 웹 페이지에 단 하나만 존재 할 수 있다.
<head>에 포함되는 metadata를 제외한 웹페이지 구성 요소 대부분이 <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>반응형
'Studying (Review) > HTML' 카테고리의 다른 글
| [Restart 프론트엔드 스터디] #3. 시맨틱 웹 (출처: poiemaweb) (0) | 2022.08.14 |
|---|---|
| [Restart 프론트엔드 스터디] #2. HTML5에 대하여 (출처: poimaweb) (0) | 2022.08.04 |
| [Restart 프론트엔드 스터디] #1. HTML의 정의와 역사, 기본구조 (0) | 2022.08.03 |
| [생활코딩] Web1 - HTML & Internet (#1) (0) | 2021.11.24 |
댓글 영역