html 8 : 메타데이터 title, meta, link, MIME, style, script

메타데이터

- 데이터를 설명하는 데이터

- 검색 엔진이 제일 먼저 메타 데이터를 보고 정보를 분류해 검 색 결과를 노출함

 

title

- 탭 제목을 나타낼 수 있음

- 안쪽에 태그가 있더라도 무시함, 텍스트만 입력 가능

- head와 마찬가지로 하나의 문서에 하나만 입력

- 북마크(즐겨찾기)의 기본으로 들어감

- title을 잘 작성해야 검색결과 상위에 노출됨, 단어 설명은 광고로 인식하니 주의

<title>루키의 페이지입니다.</title>

 

meta - name 속성

- name, content를 함께 사용

- application-name : 웹페이지를 아우를 수 있는 하나의 제목 하나

- title은 웹페이지의 제목과 부가 설명이 함께 들어갈 수 있다는 점이 차이

- author : 문서 제작자

- description : 페이지에 대한 짧은 요약

- keyword : 해시태그같이 간략한 설명

- referrer : 어느 페이지에서 왔는지 기록을 남기는 방식

  <meta name="application-name" content="instagram">
  <title>instagram - feed</title>

 

Charset

- 문자 인코딩을 의미, 유니 코드가 전세계 언어를 지원함

- head 첫번째 태그나 title 전에 넣는 것을 추천

  <meta charset="UTF-8">

 

viewport

- 전체 브라우저 중 웹페이지를 볼 수 있는 영역

- 모바일에서 보이는 페이지의 비율 등을 조절

- width, height : device-width 너비나 높이를 기기의 가로나 세로와 동일하게 처리

- initial-scale : 1.0 실제 디바이스의 가로와 뷰포트의 비율을 설정할 때

- user scalable : yes/no 웹페이지를 확대할 수 있도록 허용

  <meta 
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

 

link

- 외부 리소스 연결

- css 스타일 시트를 연결할 때 가장 많이 쓰임, 사이트 아이콘(파비콘)을 추가할 때

- href : 이동하려는 경로 입력

- rel : 연결하려는 파일과 현재 파일이 어떤 관련이 있는지 명시

- type : 링크의 콘텐츠 타입을 정의해야 함, MIME 타입을 명시

  <link href="main.css" rel="stylesheet">
  <link rel="icon" href="favicon.ico">

 

MIME 타입

- 파일 경로를 해석하지 못하는 경우를 위해서 타입을 명시해줌

- 파일의 대분류/확장자 : text/css, image/gif 등

  <link href="main.css" rel="stylesheet" type="text/css">

 

style

- css 문법을 사용해서 스타일을 적용하기 위해 사용하는 태그

- link 태그를 이용해 css 파일을 불러오는게 좋지만 간단하게 연습하고 싶을 때 사용

- head 안에 위치

  <style>
    p {color: red;}
  </style>

 

script

- 외부의 java script를 연결하거나 내부에 직접 java script 문법을 사용할때 쓰임

- java script를 해석하는데 시간이 걸리기 때문에 맨 아래에 작성

- 메타 데이터나 구문 콘텐츠 둘 다 사용 가능

<script src="javascript.js"></script>
<script>
  alert("Hello World!");
</script>