metadata 란?
데이터를 설명하는 데이터.
데이터를 위한 데이터라고 생각하면 됨
title
문서 제목 요소
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다.
텍스트만 포함할 수 있으며 태그를 포함하더라도 무시합니다.
title은 하나만 쓸 수 있습니다.
하나 혹은 두 개의 단어로만 제목을 구성하는걸 피하세요.
콘텐츠를 설명하는 문장을 넣거나, 사전과 참고 문서의 경우 용어와 정의를 짝지어 사용하세요.
명사로만 할 경우 광고페이지라고 인식하는 경우가 있기 때문..
meta
문서 레벨 메타데이터 요소
빈요소이다.
name
name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다.
name은 이름, content는 값을 담당합니다.
HTML 명세는 다음과 같은 표준 메타데이터 이름을 정의하고 있습니다.
- application-name : 웹 페이지에서 구동 중인 애플리케이션의 이름.
브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있습니다.
<title>요소 역시 보통 애플리케이션 이름을 포함하지만, application-name과는 달리 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있습니다.
2.author: 문서 저작자.
-
description: 페이지에 대한 짧고 정확한 요약.
Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 description 메타데이터를 사용합니다. -
generator: 페이지를 생성한 소프트웨어의 식별자.
-
keywords: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.
인스타 해쉬태그로 생각하면 됨. -
referrer : 다른 웹페이지로 이동할 때 남길 흔적을 어떻게 남길지에 대한 헤더
-
viewport : 뷰포트의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용합니다.
나열할 때 쉼표로 나열
width
양의 정수 또는 device-width
웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의합니다.
width=device-width : 웹페이지에 접속하는 기기의 가로와 실제 가로를 동일하게 할 때
initial-scale
0.0과 10.0 사이의 수 /
초기 비율.
장치 너비(세로 모드에서는 device-width, 가로 모드에서는 device-height)와 뷰포트 너비의 비율을 정의합니다.
1.0이 일반적임
user-scalable
yes 또는 no
no인 경우 사용자가 웹 페이지를 확대할 수 없습니다. 기본값은 yes입니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.
maximum-scale
0.0과 10.0 사이의 수
가능한 최대 확대 비율을 정의합니다. minimum-scale 이상이어야 하며, 미만으로 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.
minimum-scale
0.0과 10.0 사이의 수
가능한 최소 확대 비율을 정의합니다. maximum-scale 이하여야 하며, 초과한 값을 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.
user-scalable yes시 최대 최소 값
charset
페이지의 문자 인코딩을 선언합니다.
이 특성이 존재할 경우, 그 값은 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII 표현이어야 합니다.
link
외부 리소스 연결 요소
재 문서와 외부 리소스의 관계를 명시합니다.
<link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘("파비콘"과 홈 화면 아이콘) 연결 등 여러가지로 쓰일 수 있습니다.
파비콘
css 연결 시
<link href="style/main.css" rel="stylesheet">
- rel : 연결하려는 파일과 이 파일이 어떤 관계를 가지고 있는지 명시
사이트의 파비콘을 연결하려면 다음과 같이 사용합니다.
<link rel="icon" href="favicon.ico">
type
이 특성은 링크된 콘텐츠의 타입을 정의하는데 사용됩니다.
특성의 값은 text/html, text/css와 같은 MIME 타입이여야합니다.
이 특성은 링크된 스타일시트의 타입을 지정하는데 쓰이는것이 보통이며, text/css 값이 가장 흔합니다.
◎ MIME 타입
href로는 어떤 확장자의 어떤파일인지 인지하지 못함.
그걸 해석하게 해주는게 mime 타입이라고 함.
일반적인 구조 : type(대분류)/subtype(확장자)
style
스타일 정보 요소
문서나 문서 일부에 대한 스타일 정보를 포함합니다.
<style> 요소는 문서의<head> 안에 위치해야 합니다.
그러나, 일반적으로 스타일은 외부 스타일 시트에 작성하고, <link> 요소로 연결하는 편이 좋습니다.
script
스크립트 요소
데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 JavaScript 코드와 함께 씁니다.
다음 예제는 <script>요소를 사용해 외부 스크립트를 가져오는 법을 보입니다.
<script src="javascript.js"></script>
아래 코드는 <script> 요소 내부에 인라인 스크립트를 작성하는 예시입니다.
<script> alert("Hello World!"); </script>
script는 body에도 사용 가능하다.
head에 적게되면 읽어 나가며 시간이 소요 된 후 HTML 내용들이 뜨므로
body 마지막 부분에 넣는 것이 좋다.
