[HTML] head 태그, body 태그

WEB/HTML

[HTML] head 태그, body 태그

developer of the night sky 2023. 9. 19. 17:24

🔻head 태그🔻

1. <meta>

페이지에 대한 여러가지 정보를 기술한다.

2. <title>

문서 제목
탭에 있는 제목 표시줄에 나타난다.
문서의 제목으로 사용된다.
검색 엔진의 수집 대상이 되어 검색 결과의 제목으로 사용된다.
즐겨찾기 시 북마크의 제목으로도 사용된다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="author" content="홍길동"> <!-- 작성한 개발자 정보 -->
		<meta name="generator" content="Eclipse 2022.03"> <!-- 개발 도구 -->
		
		<meta name="keywords" content="HTML, head태그, 수업예제"> <!-- 키워드 -->
		<meta name="description" content="HTML 수업예제입니다."> <!-- 설명 -->
		
	<!-- 	<meta http-equiv="refresh" content="1;url=http://naver.com"> -->
		
		
		<title>수업 예제</title>
	</head>
	<body>
	</body>
</html>

🔻body 태그🔻

문서의 본문 역할
사람에게 전달할 내용(출력할 내용)을 작성한다.
출력정보

<body> 속성

1. bgcolor

background color
문서 배경색

- HTML 색상 표현 방법

1. 색상명
- Named Color
- Well-known Color
- 미리 약속된 140가지 색상명을 사용한다.(웹 색상)
- https://www.w3schools.com/tags/ref_colornames.asp

2. RGB
- RED + GREEN + BLUE
- 각 색상의 단계인 256단계(0~255)로 표현
- 256 * 256 * 256 = 16,777,216 색상 제공
- #000000(검정색) ~ #FFFFFF(흰색)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body bgcolor="green">	<!-- 색상명 -->

	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body bgcolor="#fad6d6">

	</body>
</html>

2. background

배경이미지

html 폴더에서 images 하위 폴더 생성

imgaes 폴더에 이미지 넣기

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>
	<body background="images/dog.jpg">

	</body>
</html>