📌<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>첫번째 예제</h1>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>두번째 예제</h1>
</body>
</html>기본적으로 HTML 5를 사용하지만, HTML 4.01을 선택해서 파일을 만들어보도록 하자.
그러면 두 개의 파일의 DOCTYPE이 다른 것을 확인할 수 있다.
문서 유형
DTD 언어로 작성된 <!DOCTYPE html>는 문서 유형을 의미한다.
이 문서를 읽는 브라우저에게 해당 문서가 어떤 문서인지 알려주는 역할을 한다.
HTML 언어에서는 선언문이라고 보면 된다.
📌<html> </html>
<html>을 시작 태그, </html>을 끝 태그라고 부른다. 이 사이에 기능을 구현한다.
HTML에서 이러한 태그를 정식적으로는 엘리먼트라고 부르며, 태그는 트리구조(계층구조)로 되어 있다.
그리고 메모리에 로딩된 트리 구조를 DOM이라고 부른다.
<html>은 문서 전체를 감싸고 있어, 루트 태그라고 부른다.
<html> 태그는 스스로 하는 일은 없지만 문서 컨테이너의 틀 역할을 하므로 없으면 코드에 오류가 발생한다.
📌<head> </head>
<head>는 문서의 머리말 역할을 한다.
페이지에 대한 여러 가지 정보를 기술한다.
<head>
<meta charset="UTF-8">
<meta name="author" content="홍길동"><!-- 작성한 개발자 -->
<meta name="generator" content="Eclipse 2022.03"><!-- 개발 도구 -->
<meta name="keysords" content="HTML,head태그,수업예제"><!-- 키워드 -->
<meta name="desciption" content="HTML 수업 예제입니다."><!-- 설명 -->
<!--
<meta http-equiv="refresh" content="10;url=https://www.naver.com">
-->
<title>Insert title here</title>
</head>
<head>에는 개발자의 이름, 개발 도구 등의 데이터가 들어간다.
이전에는 메타 데이터를 작성하는 직업이 따로 있을 정도로 중요한 작업이었다.
이를 어떻게 활용하느냐는 제3의 문제이다.
<meta charset="UTF-8">
브라우저에게 이 문서를 UTF-8로 읽으라는 의미이다.
<meta http-equiv="refresh" content="10;url=https://www.naver.com">
10초 뒤에 다음의 url로 이동하라는 의미이다.
<head> 자식 태그
1. <meta>
페이지에 대한 여러가지 정보를 기술한다.
2. <title>
<title>수업 예제</title>문서 제목을 기술한다.
제목 표시줄(탭)에 표시된다.
⭐<title>의 사용⭐
a. 문서의 제목으로 사용
b. 검색 엔진의 수집 대상 + 검색 결과의 제목으로 사용
c. 북마크 제목으로 사용
📌<body> </body>
<body>는 문서의 본문 역할을 하며, 화면에 출력되는 모든 내용을 가지는 컨테이너이다.
쌍태그, 혼합형으로 사람에게 전달할 내용(출력할 내용)을 작성한다.
<body> 속성
1. bgcolor (background color)
<body bgcolor="gray"><body bgcolor="#000000">
bgcolor는 문서 배경색을 의미한다.
2. background (background image)
<body background="images/zara.jpg">
background는 문서 배경이미지를 의미한다.
[HTML] HTML 색상 표현 방법
💡HTML 색상 표현 방법 1. 색상명 HTML Color Names W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more
isaac-christian.tistory.com
HTML 색상 표현 방법에 대해서는 위 글을 참고하도록 하자.
