1) <meta>
:<base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.
그러나, 많은 <메타> 기능이 더 이상 사용되지 않는다.
예를 들어, 다른 검색어에 대한 해당 페이지의 관련성을 확인하기 위해 검색 엔진의 키워드를 제공하기로 되어 있는 <meta> element 키워드 (<meta name="keywords" content="fill, in, your, keywords, here">)는 검색 엔진으로부터 무시된다. 스팸 발송자가 키워드 목록을 수백 개의 키워드로 채웠기 때문이다.
- name · content
name과 content 특성을 함께 사용하면 문서의 메타데이터를 '이름-값' 쌍으로 제공할 수 있습니다. name은 이름, content는 값을 담당합니다.
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications.">-
name
: 메타데이터 요소의 종류, 포함된 정보의 종류를 지정합니다. -
content
: 실제 메타데이터 content를 명시한다.
- charset
: charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 된다.
<meta charset="utf-8">2) <title>
: 브라우저 탭의 이름으로 보여지는 요소로, 북마크할 때 제목으로 추천되어 채워진다. 검색엔진에서 검색결과로서 맨위에 뜬다.
<title>Home Page</title>
3) Sitelink
Google에서는 MDN 웹 문서의 관련 하위 페이지가 메인 홈페이지 링크 아래에 나열되어 있다. 이를 사이트 링크라고 하며, Google의 웹 마스터 도구에서 구성할 수 있다. 이 하위 페이지들은 Google 검색 엔진에서 사이트의 검색 결과를 더 좋게 만드는 방법입니다.
4) Adding custom icon
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">title 옆에 보여지는 로고 이미지를 'favicon'이라고 한다. favicon의 표준 파일 형식은 square 모양의 .ico 파일이다. .png나 .gif도 사용할 수 있지만 호환성을 높이기 위해서는 표준을 따라야 한다.
(대부분의 브라우저는 .gif 또는 .png와 같은 일반적인 형식의 즐겨찾기를 지원하지만 ICO 형식을 사용하면 Internet Explorer 6까지 작동한다)
-
로고의 정사각형 이미지(최대 크기 제한은 없으나, 32x32 pixels 또는 16x16 pixels)를 만들어 .ico 파일로 변환한다. 이는 'Favicon.cc'이나 'Real Favicon Generator'와 같은 웹사이트나, 포토샵에서 할 수 있다.
-
다음 두 가지 방법으로 설정할 수 있다:
- 웹사이트의 root folder/directory (index.html 옆)에 'favicon.ico'라는 이름으로 위치시킨다.
또는
- 사이트에 있는 모든 .html 파일의
<head></head>태그 사이에 다음과 같이 연결한다.
어떤 웹사이트에서든 favicon을 보고 싶으면 www.url.com/favicon.ico이라고 쓰면 된다.
(예를 들어, naver의 favicon은 www.naver.com/favicon.ico이라고 치면 볼 수 있다.)
그러나 파일 크기 제한이 없어 생기는 브라우저 문제도 있습니다. 매우 큰 아이콘으로 브라우저를 쉽게 손상시킬 수 있다.
5) Applying CSS and JavaScript to HTML
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">6) Parsing
브라우저가 HTML 파일을 읽고 DOM(Document Object Model)의 구조를 만들어서 페이지의 구조를 분석/이해하는 것을 말한다.
HTML 파일을 브라우저가 이해할 수 있게 DOM 트리 구조로 만들어서 나중에 CSS와 병합되어 브라우저 페이지 위에 표시된다.
❗ 참고자료
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w
