Head 태그
<head>태그는 문서정보(메타데이터)를 담고 있음
브라우저 화면에 직접적으로 보이지는 않지만, 숨은 데이터를 정의하는 태그들이 들어가 있음
head 안에 배치할 수 있는 요소
- <title>
- 브라우저의 제목 표시 줄이나 페이지 탭에 보이는 문서 제목을 정의, 텍스트만 포함 가능
<title>NAVER</title>- <base>
- 문서 안의 모든 상대 URL을 지정, 문서에는 하나의 <base>요소만 존재 가능
<base href="/assets/images/" />
- <link>
- 요소는 현재 문서와 외부 리소스의 관계 명시, <link>는 스타일 시트를 연결할 때 제일 많이 사용하지만, 사이트 아이콘(”파비콘”과 홈 화면 아이콘)연결 등 여러가지로 쓰일 수 있음
<!-- 파비콘 설정 -->
<link rel="shortcut icon" href="./favicon.ico" />
<!-- Style 시트 연결 -->
<link href="/style.css" rel="stylesheet">https://favicon.io/favicon-generator/
Favicon.io - The Ultimate Favicon Generator (Free)
With Favicon.io you can quickly generate a favicon for your website for free!
favicon.io
- <style>
- 스타일 규칙을 담고 있으
<style>
.title{
color: blue;
}
</style>- <meta>
- <base> <link> <script> <style> <title> 과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냄
<meta property="og:image" content="https://example.com/image.jpg">- <script>
- 데이터나 자바스크립트 코드를 웹 문서에 포함할 때 사용
<script src="javascript.js"></script>오픈그래프 Open Graph
콘텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정
기본적으로 웹에 설정해야하는 og메타 태그
<meta property="og: type" content="website">
<meta property="og: url" content="https://example.com/page.html">
<meta property="og: title" content="Content Title">
<meta property="og: image" content="https://example.com.image.jpg">
<meta property="og: description" content="Description Here">
<meta property="og: site_name" content="Site Name">
<meta property="og: locale" content="en_US">
<!-- 다음의 태그는 필수는 아지고, 포함하는 것을 추천 -->
<meta property="og: image:width" content="1200">
<meta property="og: image:height" content="630">'프론트엔드 > HTML' 카테고리의 다른 글
| Form 태그 (0) | 2022.11.18 |
|---|---|
| 이미지 & 멀티미디어 태그 (0) | 2022.11.18 |
| Block 레벨 요소와 Inline 레벨 요소 (0) | 2022.11.18 |
| Semantic태그 (0) | 2022.11.18 |
| Table태그 (0) | 2022.11.18 |
