HTML HEAD
head의 내용는 페이지에 표시되지 않습니다. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함합니다. 여기서 메타데이터란 데이터를 설명하는 데이터입니다. html의 메타데이터는 html문서를 설명하는 데이터가 메타데이터이며, 그 내용들이 head부분에 들어가 있는 것입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>1. <title> : 문서 제목 요소
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다. 또한 하나의 head태그에는 title이 하나만 존재를 해야합니다.
title에 적은 내용이 웹페이지 제목으로 들어가게 됩니다. 또한 북마크(즐겨찾기)를 하게 되면 즐겨찾기를 하는 기본 제목으로 title이 들어가게 됩니다.
페이지 제목과 SEO
페이지 제목은 SEO에 큰 영향을 줍니다. 보통, 짧고 일반적인 이름보다 길고 상세한 제목이 더 좋은 성과를 내곤 합니다. 검색 엔진 (en-US)이 결과 페이지의 순서를 결정하는 구성 요소 중 하나가 페이지 제목의 내용이기 때문입니다. 또한, 검색 결과에서 잠재적 독자의 주목을 끌 수 있는 최초 "훅"이 바로 제목입니다.
- 하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하는 것이 좋습니다. 길지 않더라도 페이지를 설명할 수 있는 단어를 자세하면서 간략하게 구성하는 것이 좋습니다.
2. <meta> : 문서 레벨 메타데이터 요소
메타 태그는 빈요소이기 때문에 내용을 가질 수 없습니다. 그렇기에 속성을 이용해서 문서를 작성할 수 있습니다. 만약 메타태그의 문서정보가 여러개라면 하나의 메타태그에 여러개의 정보를 작성하는 것이 아니라 메타태그 자체를 여러개 작성해서 문서의 정보를 나열하는 것이 좋습니다.
2-1 name속성
name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. name은 이름, content는 값을 담당합니다.
<meta name="" content="" />HTML은 표준 메타데이터 이름을 정의하고 있습니다.
- application-name: 웹 페이지에서 구동 중인 애플리케이션의 이름.
- author: 문서 저작자.
- description: 페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 description 메타데이터를 사용합니다.
- generator: 페이지를 생성한 소프트웨어의 식별자.
- keywords: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.
- referrer: 문서에서 시작하는 요청의 HTTP Referer 헤더를 통제합니다.
2-2 charset속성
페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII 표현이어야 합니다. 이 정보는 head에 첫 번째 정보로 넣거나 title앞에 정의를 하는 것을 권장합니다.
2-3 viewport
뷰포트의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">content="width=device-width": 웹페이지를 접속하는 기기의 너비와 브라우저 너비를 동일하게 합니다. 보통 width를 설정하면 height가 따라오기 때문에 height를 작성하지 않는 경우가 많습니다.initial-scale: 초기 비율을 이야기하며 실제 디바이스의 너비와 가로너비의 비율을 정의하는데 사용합니다.user-scalable: 모바일 웹페이지에서 손가락두개를 이용해서 확대를 하는 것을 사용할 것(yes)인지 아닌지(no)를 설정합니다. maximum-scale과 minimum-scale을 이용해 최대 확대비율과 최소 축소비율을 설정할 수 있습니다.
3. <link> : 외부 리소스 연결 요소
현재 문서와 외부 리소스의 관계를 명시합니다. css스타일 시트와 파비콘을 연결할 때 많이 쓰입니다.
만약, 다른 파일을 불러오는 경우 파일이 어떤 타입인지를 type속성을 이용해 명시해줘야합니다.
<link href="main.css" rel="stylesheet">
<link rel="icon" href="favicon.ico"><link rel="apple-touch-icon-precomposed" sizes="114x114"
href="apple-icon-114.png" type="image/png">type속성
링크된 콘텐츠의 타입을 정의하는데 사용됩니다. 특성의 값은 text/html, text/css와 같은 MIME 타입이여야합니다. 이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.
4. MIME타입
오디오나 비디오, 링크태그를 이용해서 외부에서 파일을 불러오는 경우 문자열로 경로를 입력하게 되는데, HTML은 단순히 파일의 위치를 불러올 뿐인지 어떤 확장자를 가지고 있는 어떤 파일인지를 분석하지는 않습니다. 그렇기 떄문에 어떤 파일인지 알기 위해서 type속성을 이용해 명시를 해줍니다. 이렇게 파일 경로를 해석하지 못하는 경우를 위해서 type을 명시해주는 것을 MIME타입이라고 합니다.
type/subtype위와 같이 /를 이용해 작성을 하게 됩니다. 앞쪽에는 text나 img처럼 파일의 배분율을 작성하고 뒤쪽에는 확장자를 작성합니다.
가독성을 위해서 소문자로 많이 작성을 합니다.
text/plain
text/html
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream
...5. <style> : 스타일 정보 요소
문서나 문서 일부에 대한 스타일 정보를 포함합니다. 외부의 링크를 연결해서 css파일을 불러올 수도 있지만, 외부의 파일을 별도로 만들지 않아도 style태그를 이용해 문서에 스타일을 적용할 수 있습니다. 물론 외부에서 파일을 불러와 사용하는 것을 권장하고 있습니다.
<style>
p { color: red; }
</style>style태그를 여러개 사용할 수 있지만 같은 부분의 경우 뒤쪽 style이 앞쪽을 덮었씁니다.
6. <script> : 스크립트 요소
style태그는 html 내부에 직접 css를 작성해 이용을 했습니다. script태그는 css처럼 인라인으로 스크립트를 작성할 수 있도록도 해주고 외부의 스크립트 파일도 불러올 수 있습니다. 보통 자바스크립트를 많이 이용합니다.
//외부 스크립트 가져오는 경우
<script src="javascript.js"><script>
<script>
alert("Hello World");
</script>