1. HTML <head> Element
- <head> 엘리먼트는 메타데이터를 위한 컨테이너이고 <html> 태그와 <body> 태그 사이에 위치한다.
- HTML 메타데이터는 HTML 문서에 대한 데이터이고 브라우저 상에서는 보여지지 않는다.
- 메타데이터는 일반적으로 문서의 제목, 캐릭터셋, 스타일, 스크립트 그리고 다른 메타정보를 정의한다.
2. HTML <meta> Element
-> <head> 안에는 제목, 스타일, 스크립트 등 정보를 정의하지만 너무.. 기초적인 내용이라 meta에 대해 좀 더 정리해보도록한다.
- <meta> 엘리컨트는 케릭터셋, 페이지 설명, 키워드, 저자, 기타 메타데이터등 페이지의 정보에 대한 정보를 설명하기 위해 사용한다.
- 메타데이터는 브라우저가 컨텐츠를 어떻게 보여줄지 등 사용하는데 사용되거나, 키워드 등에 관련한 검색엔진에 의해 사용된다. (여기서 사용될 name, charset에 해당되는 값은 예약어이고 content에 사용되는 값은 사용자가 정의할 값이다.)
- character set : 케릭터셋을 정의한다. 예)<meata charset="UTF-8>
- description: 페이지의 설명을 넣는다. 검색엔진에서 사용될 값이므로 서비스를 잘 설명할 내용을 적으면 될 것이다. 예) <meta name="description" contenet="blar blar">
- keyword: 이 또한 검색엔진에서 사용될 값이므로 서비스를 대표할 수 있는 키워드를 적으면 된다. 예) <meta name="keywords" content="blar blar">
- author: 컨텐츠 작성자에 대한 정보를 볼 수 있게 한다. 예)<meta name="author" content="name blar">
- 일정시간 후 refresh 하게 내용을 정의할 수 있음.(초단위) 예) <meta http-equiv="refresh" content="30">
- ** meta에 기능들이 악용하는 사례가 생겨서 더 이상 사용되지 않을 수도 있다.
3. 다른 타입의 메타데이터
-> 대표적으로 Open Graph Data가 있는데, Facebook이 웹 사이트에 더 풍부한 메타데이터를 제공하기 위해 발명한 메타데이터 프로토콜이다. (https://ogp.me/)
예) Open Graph
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
<meta property="og:title" content="Mozilla Developer Network">예) Twitter
<meta name="twitter:title" content="Mozilla Developer Network">
4. 뷰 포트 세팅
-> HTML5에서 <meta> 태그를 통해 viewport를 통해 화면을 컨트롤 할 수 있도록 메서드를 소개했다. 뷰포트는 웹 페이지에서 사용자의 보여지는 영역이고 각 다양한 단말에 따라 다양하게 보여지게 한다.
- <meta name=""viewport" content="width=device-width, initial-scale=1.0"> 과 같이 사용 가능하다.
- 뷰포트 엘리먼트는 브라우저에게 페이지의 크기들을 어떻게 컨트롤할지 브라우저에게 지시를 내린다.
- initial-scale=1.0 부분은 페이지가 브라우저에 의해 로드 됐을 때 초기 줌 레벨을 세팅한다.
'Web Front-End > HTML&CSS' 카테고리의 다른 글
| CSS3 prefix (0) | 2020.07.17 |
|---|---|
| HTML 기본3 - 블록레벨(block) 요소와 인라인(inline) 요소 (0) | 2020.03.26 |
| HTML 기본2 - 기초 (0) | 2020.03.24 |
| HTML 기본1 - HTML 소개 (0) | 2020.03.23 |
