Front/HTML

[HTML5] <head> 태그 : <title>, <meta>, <link>, <style>

헹창 2020. 8. 18.

[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>

페이지의 설명 요약, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 제공할 수 있다.

<!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 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>

<!DOCTYPE html>
<html lang=“ko”>
<head>
	<style>
		.myInfo {color:red;}
	</style>
</head>
<body>
	...
</body>
</html>

728x90

저작자표시 비영리 변경금지

'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

[HTML5] <head> 태그 : <title>, <meta>, <link>, <style>