/ HTML

왠지 알고싶지 않은 META DATA

META DATA

우리는 HTML문서에서 “body”에 들어가는 내용은 우리가 보는 문서에 나타나는 것이며
그리고 “head”에 들어가는 내용은 우리 눈에는 보이지 않는 브라우저의 정보이다.

처음 html 문서를 시작할때 ! 를 입력하게 된다면

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

이렇게 html문서의 기본틀을 볼 수 있다. 이때 “head”에 들어가는 meta 혹은 title 과 같은 눈에 보이지 않는 정보들을 “META DATA”라고 부른다.

이 메타데이터를 쉽게 설명하자면 “데이터를 설명해주는 데이터” 라고 이해하면 될 것 같다.
가령 우리가 책을 보면 저자, 출판사, 발행일과 같은 내용을 메타 데이터로 볼 수 있다.

title

<title>Document</title>

이 title은 뜻 그대로 이 문서의 제목이다. 이 제목은 홈페이지 이름 캡쳐 위의 “Daum, Naver, GitHub”와 같이 제목으로 표시된다.
이 title은 “head”태그 안에 딱 한번만 들어갈 수 있으며 문자열만 입력할 수 있다.
만약 페이지를 즐겨찾기나 북마크를 해도 title에 작성된 제목으로 저장된다.

meta

meta태그는 빈요소로 내용을 가질 수 없음으로 속성에 정보를 나열해야한다. meta태그 안에 들어갈 수 있는 속성들을 살펴보자
name - name은 content라는 특성과 함께 짝을 이뤄 사용해야하며 name은 이름, content는 값을 담당한다. 👉표준메타데이터 이름 앞의 링크에는 표준으로 name에 들어갈수 있는 이름을 설명하여 주지만 모두 사용해야만 하는 것은 아니다.

name = “veiwport” : 모바일 뷰보트의 초기 사이즈에 대한 힌트

charset - 페이지의 문자 인코딩을 선언해준다. 이 특성은 무조건 ASCII표현 이어야하며 head의 첫번째 태그로 넣는것을 권장한다. ex) utf-8 : 한국어

href(경로) 속성과 rel(relationship{관계}) 속성과 함께쓰며 가장 많이 쓰이는 예시로

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

를 볼 수 있다. rel에는 stylesheet 외에도 “icon” 등 다양한 값들이 있다.,
👉더 많은 속성 알아보기

MIME 타입

위에서 봤던 link에는 ‘rel’과 ‘href’ 말고도 type이라는 속성이 존재한다.
html의 link는 href로 불러온 경로에서 파일을 불러오는것 뿐 그 파일에 대한 정보를 알수는 없는데 이때 그 파일에 대한 설명을 type 속성으로 설명해준다고 생각하면된다.
👉 MIME TYPE 알아보기

style

이전에 link에서 자주쓰는 예시로 css파일을 불러오는 예시를 들었는데 그렇게 하지 않고 html head태그 안에 style을 작성할 수 있다. 이렇게도 적용할 수 있다고만 알고있자.

script

이 태그를 사용하여 아래처럼 외부에서 자바스크립트 파일을 불러올수있다.

<script src ="main.js"></script>

style 태그와 마찬가지로 html파일 내에서도 스크립트를 작성할 수 있는데 이것도 알고만 있자.
또한 이 태그는 꼭 head태그 안에만 있어야 하는것은 아니다. 보통 이 태그는 body의 마지막에 넣어주는데 그 이유는 html과 css가 모두 업로드 된 뒤에 스크립트를 적용시키기 위함이다.