2. Head
HTML에서 head는 브라우저가 식별할 수 있는 메타데이터들을 가지고 있는 태그로서, 화면을 구성하지 않는다. 메타데이터는 title과 같은 페이지의 제목, CSS를 불러오기 위한 스타일 시트 링크, favicon, 그 외 작성자, 페이지의 대표 키워드와 같은 정보 들이 그 예시이다.
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>title
title 태그는 문서의 제목을 담고 있어, 문서를 대표하는 문구로 사용된다. 설정된 제목은 브라우저 탭명, 북마크를 위한 페이지명, 검색 결과 등으로 사용된다.
meta
meta 태그는 페이지의 데이터들을 설명하는 데이터를 담는다. 웹 서버, 브라우저 간 상호 교환되는 정보들을 표현한다.
charset
문서의 character 인코딩을 특정한다. 일반적으로 utf-8는 해당 웹 페이지에서 어떤 문자라도 취급할 수 있다는 것을 의미한다. 영어나 일본어 등 모두 character 로서 표현을 허용한다.
<meta charset="utf-8">만약, 라틴 알파벳을 사용하기 위해 ISO-8859-1 를 사용한다면, 한글은 엉망으로 인코딩되어 표시된다.
<p>utf-8이 아닌, ISO-8859-1로 설정하면 어떻게 되나요?</p>utf-8, utf-8이 아닌, ISO-8859-1로 설정하면 어떻게 되나요?
ISO-8859-1, utf-8ì�´ ì•„ë‹Œ, ISO-8859-1ë¡œ ì„¤ì •í•˜ë©´ 어떻게 ë�˜ë‚˜ìš”?name, content
name은 정보의 형태 값을 나타내며, content는 정보의 값을 지정한다.
<meta name="Keywords" content="대표 키워드1, 대표 키워드2, 대표 키워드3" />
<meta name="description" content="페이지를 대표하는 설명을 지정합니다.">mlRobots
Robots라는 name 정보 값을 통해 검색 로봇을 제어하기 위한 속성을 지정한다.
index, 해당 페이지 수집 대상 포함
follow, 해당 페이지 포함 링크되어 있는 대상 또한 수집 대상 포함
noindex, 해당 페이지 수집 대상 제외
nofollow, 해당 페이지 포함 링크되어 있는 대상 또한 수집 제외
all, 'index, follow'
None, 'noindex, nofollow'
<meta name="Robots" content="all" />og:
Open graph 프로토콜에서 수집할 수 있는 정보 또한 메타 태그를 통해 설정할 수 있다. 그 외 특정 플랫폼에서 사용되는 프로토콜에서 수집할 수 있는 정보 또한 제공할 수 있다.
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta property="og:title" content="Title here!">
<meta property="og:description" content="Description here!">
<meta property="og:image" content="Representative image here!">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="Domain here!">
<meta property="twitter:url" content="">
<meta name="twitter:title" content="Title here!">
<meta name="twitter:description" content="Description here!">
<meta name="twitter:image" content="representative image here!">viewport
브라우저의 뷰포트는 랜더링된 페이지와 크기가 다른 경우가 많다. 다양한 디바이스를 대응하기 위해 장치의 화면 크기와 동일하다는 값을 전달하여 모바일 최적화된 뷰포트를 제공하기 위해 일반적으로 사용된다.
<meta name="viewport" content="width=device-width, initial-scale=1" />http-equiv
해당 메타데이터 content 속성값에 대한 HTTP 해더를 제공한다. 해당 HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때만 의미를 갖는다.
HTML4에서는 웹 페이지의 문자열 인코딩 방식을 다음과 같이 명시하였다.
HTML 4.01 : <meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML5 : <meta charset="UTF-8">link
favicon
웹 사이트를 대표하는 커스텀 아이콘 레퍼런스를 메타데이터에 추가하고 특정 컨텐츠에서 보여지게 할 수 있다. 열린 페이지의 탭이나 북마크 패널 페이지에 아이콘을 보여줄 수 있다. 이를 favicon이라 한다.
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">일반적인 모던 브라우저에서 .gif, .png 포멧 또한 favicon으로 사용 가능하지만, .ico 포멧을 사용하면 구 브라우저에서도 보장받을 수 있다.
웹은 다양한 플랫폼과 디바이스에서 활용된다. 이에 따라 페비콘 또한 대응하여 지원할 수 있다. 가령 iPad 홈 화면에 웹 페이지가 저장될 떄 앱 터치 아이콘 또한 페비콘으로 제공할 수 있다.
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="">
<!-- basic favicon -->
<link rel="shortcut icon" href="">css
모던 웹 사이트는 많은 상호작용을 위해 자바스크립트가 필요하고, 스타일링을 위해 css가 사용된다. 모두 link 혹은 script 태그를 통해 일반적으로 적용된다.
rel을 통해 스타일시트임을 나타내고, 동시에 스타일 시트 파일의 경로를 포함하여 css를 불러와 내포하여 사용한다.
<link rel="stylesheet" href="my-css-file.css">Reference
Last updated