1. 헤드 <head> 요소
헤드는 메타 데이터, 즉 데이터에 대한 데이터를 포함한다. <html>과 <body> 사이에 쓰인다. 메타 데이터는 화면에 표시되지 않으며, <title>, <style>, <meta>, <link>, <script>, <base>가 해당한다.
- 제목 <title> 요소
HTML 문서의 제목이다. 웹 브라우저 탭의 제목이거나 즐겨찾기에 포함되거나 검색엔진 결과에 나타나는 결과에 사용된다.
<head>
<title>This is a title</title>
</head>
- 스타일 <style> 요소
단일의 HTML 페이지에 사용되는 스타일 정보를 포함한다.
<style>
body {background-color: indigo;}
h1 {color: white;}
p {color: grey;}
</style>
- 링크 <link> 요소
외부의 다른 스타일 시트에 연결한다.
<link rel="stylesheet" href="mystyle.css">
- 메타 <meta> 요소
문자열, 페이지 요약, 키워드, 저자, 다른 메타 데이터 등을 포함한다.
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta>태그에서 viewpoint 요소를 지정하면 여러 크기의 장치 및 웹 페이지에서 화면을 볼 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- - viewpoint: 페이지 조절
- - width=device-width: 기기의 스크린 크기에 따라서 웹 페이지의 크기를 조정
- - initial-scale=1.0: 처음 웹 페이지에 화면이 뜰 때 초기 확대 정도를 설정
- 스크립트 <script> 요소
사용자 측면의 스크립트를 나타낸다. 더 자세한 정보는 다음의 링크를 더 확인해보자.
https://dowhateveryouwant1661.tistory.com/15
- 베이스 <base> 요소
링크가 되는 URL과 화면전환에 대한 정보를 포함한다.
<base href="https://www.w3schools.com/images/" target="_blank">
<html>, <head>, <body>를 생략해도 좋을까? 예/아니오로 선택하라면, 아니오. 써야하는 건 꼭 쓰면서 배우자.
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
HTML 컴퓨터 코드, 의미요소 (0) | 2020.03.28 |
---|---|
HTML 레이아웃, 반응형 웹 디자인 (0) | 2020.03.28 |
HTML 식별속성, 아이프레임, 자바스크립트, 파일경로 (0) | 2020.03.19 |
HTML 블록과 인라인 요소 (0) | 2020.03.18 |
HTML 표, 목록 (0) | 2020.03.18 |
댓글