[HTML5] <head> 태그 : <title>, <meta>, <link>, <style>
<head>
문서의 머리를 나타내는 태그로, 주로 웹 페이지의 추가 정보를 입력한다.
브라우저 화면에 직접적으로 보이지 않고, 숨은 데이터를 정의하는 태그들이 들어간다.
<head> 태그 내부에 들어가는 대표적인 태그 목록은 다음과 같다.
<title>
<title></title> 태그는 웹 페이지의 제목을 나타내는 태그이다.
웹 페이지 본문에는 보이지 않고, 브라우저의 탭 등에서 확인 가능하다.
제목의 용도 뿐만 아니라, 검색 엔진 등에서 가장 크게 보여지는 텍스트이므로 페이지 특성을 드러내는 제목을 작성하는 것이 중요하다.
<!DOCTYPE html>
<html lang=“ko”>
<head>
<title>HTML5와 CSS3</title>
</head>
<body>
...
</body>
</html>
<meta>
<meta /> 태그는 웹 페이지의 보이지 않는 정보를 제공하는데 쓰이는 태그로 닫는 태그가 없는 태그이다.
페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있다.
<!DOCTYPE html>
<html lang=“ko”>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5와 CSS3</title>
</head>
<body>
...
</body>
</html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
문자 인코딩에 관련된 내용이다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Internet Explorer(IE) 10 이하 버전은 문서를 읽을 때 IE7 모드를 사용해서 웹페이지를 표시한다.
<meta> 태그를 이용하여 최신 엔진으로 페이지를 렌더링하도록 설정할 수 있다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width 속성은 뷰포트의 크기를 조정하며 CSS 픽셀들로 계산된 화면의 폭을 의미한다.
initial-scale 속성은 페이지가 처음 로드될 때 줌 레벨을 조정한다.
meta 태그에 대해서는 다음 링크에서 자세히 설명해주고 있다.
메타(meta)태그 정리
meta 태그 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다. HTML 문서의 와 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문
webclub.tistory.com
<link>
CSS 파일을 별도로 분리하여 저장한 뒤 HTML 문서 내에서 불러올 때 사용하는 태그로
문서 규격과 스타일의 분리를 위해 (작업의 분담) CSS를 별도의 파일로 분리하여 사용하는 것이 좋다.
<!DOCTYPE html>
<html lang=“ko”>
<head>
<link rel="stylesheet" href="../resource/common.css" type="text/css">
</head>
<body>
...
</body>
</html>
<style>
<style></style> 태그를 통해 HTML 문서 내부에 CSS 문법을 기술한다.
<!DOCTYPE html>
<html lang=“ko”>
<head>
<style>
.myInfo {color:red;}
</style>
</head>
<body>
...
</body>
</html>
'Front > HTML' 카테고리의 다른 글
| [HTML5] input 요소의 타입 완전 정복 (0) | 2020.08.19 |
|---|---|
| [HTML5] 글자태그 2 : <strong>, <b>, <i>, <small>, <sub>, <sup>, <ins>, <del> (0) | 2020.08.18 |
| [HTML5] 목록을 정의하는 태그 : <ul>, <ol>, <dl> (0) | 2020.08.18 |
| [HTML5] HTML 기초 (0) | 2020.08.18 |
| [HTML5] 글자 태그 1 : <h#>, <p>, <br/>, <a> (0) | 2020.08.18 |
댓글