head 태그에 있는 HTML 메타데이터
- head는
<title>같은 페이지나, CSS의 링크, 파비콘(favicon), 그리고 다른 메타데이터(작성자, 중요한 키워드와 같은 HTML에 대한 내용)를 포함.
HTML head란?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html><body>요소와 다르게, head의 내용는 페이지에 표시되지 않는다.- 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함하는 것이다.
제목 달기
<title>요소는 문서의 title을 추가하기 위해 사용될 수 있다.<h1>요소와 헷갈릴 수 있다.<h1>요소는 일반적으로 페이지당 한 번 씩 사용되는데, 페이지 내용물의 제목이나 뉴스의 헤드라인을 표시하기 위해서 페이지를 열 때 브라우저에 표시된다.<title>은 (문서의 컨텐츠가 아니라) HTML문서 전체의 타이틀 표현하기 위한 메타데이터이다.
메타데이터: 요소
데이터를 설명하는 데이터
<meta>요소를 이용하여 HTML에서 문서에 공식적으로 메타데이터를 적용
메타데이터 예
문서의 character 인코딩을 특정하기
<meta charset="utf-8">- 문서의 character—문서에서 허용하는 문자 집합(character set)— encoding에 대해서 간단히 표시
저자와 설명을 추가
많은 <meta> 요소가 name 과 content 속성을 갖는다.
name은 메타 요소가 어떤 정보의 형태를 갖고 있는지 알려줌content는 실제 메타데이터의 컨텐츠
→ 페이지에서 관리자를 정리하고 머릿말을 요약하는데 유용
<meta name="author" content="Chris Mills">
<meta name="description" content="The MDN 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.">Other types of metadata
Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜
<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">- Facebook에서 MDN에 링크를 하면, 이미지와 설명이 함께 나타난다. 사용자에게는 더 좋은 정보를 보여줄 수 있다.
맞춤 아이콘 추가하기
사이트 디자인을 좀 더 풍성하게 만들기 위해서 , 커스텀 아이콘 레퍼런스를 매타데이터에 추가하고 특정 콘텐츠에서 이것을 보여지게 할 수 있다
16 x 16 pixel icon!
- 사이트의 인덱스 페이지와 같은 디렉토리에 .ico 포멧의 파일을 저장
- 다음 줄을 HTML
<head>에 추가하여 favicon을 참조
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">요즘 많은 다른 아이콘 타입이 있다
<!-- third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
<!-- iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
<!-- first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
<!-- basic favicon -->
<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">HTML에 CSS 와 JavaScript 적용하기
- 모든 웹사이트는 상호작용 기능이 많은 영상 플레이어, 지도, 게임 등을 위해
JavaScript가 필요하고, 이것들을 더 멋져 보이게 하기 위해CSS가 사용된다.
<link> 요소와 <script> 요소를 사용하여 웹 페이지에 가장 일반적으로 적용된다.
<link>요소
- 항상 문서의 head 부분에 위치
- 두 가지 속성을 취하는데, rel="stylesheet", 즉 문서의 스타일 시트임을 나타냄과 동시에 스타일 시트 파일의 경로를 포함하는 href를 내포한다.
<link rel="stylesheet" href="my-css-file.css"><script>요소
- head에 들어갈 필요가 없다
</body>태그 바로 앞, 문서 본문의 맨 끝에 넣는 것이 좋으며, JavaScript를 적용하기 전에 모든 HTML 내용을 브라우저에서 읽었는지 확인하는 것이 좋다.- 액세스 과정에서 JavaScript가 아직 존재하지 않는 요소라고 판단하며 에러가 날 수 있다
<script src="my-js-file.js"></script>'WEB > HTML' 카테고리의 다른 글
| HTML - List (0) | 2022.02.21 |
|---|---|
| HTML 텍스트 기초 (0) | 2022.02.19 |
| HTML 문서의 구조 (0) | 2022.02.16 |
| 빈 요소(Empty elements)와 속성(Attributes) (0) | 2022.02.15 |
| 블럭 레벨 요소 vs 인라인 요소(Block versus inline elements) (0) | 2022.02.14 |