HTML의 head는 페이지를 열 때 웹 브라우저에 표시되지 않습니다.
head는 <title>
, CSS의 링크
, 파비콘(favicon)
, 메타데이터(작성자, 중요한 키워드)
를 포함합니다.
Html HEAD 란?
본문에 표시되지 않지만 웹페이지의 중요한 정보를 담고 있는 곳 입니다.
제목달기
<title>
태그 안에 내용을 작성하면 웹브라우저 탭바에 해당 title 이 표시된다
<html>
<head>
<title>
HTML head 작성법
</title>
</head>
<body>
내용은 없지만 title 은 있어요
</body>
</html>
사이트의 북마크시에도 title 내용이 기본으로 제목으로 들어간다
meta 메타데이터
<meta>
에는 다양한 속성이 들어간다
문서 인코딩
charset
속성으로 문서 인코딩을 정할 수 있다.
<meta charset="utf-8">
저자와 설명 추가
<meta>
는 name
과 content
속성을 가지는 데 특이하게 속성 값으로
여러가지 meta 정보를 추가하는 데 사용한다.
<!-- 저자 추가시 name=author 를 입력한다 -->
<meta name="author" content="skyksit">
<!-- 설명 추가시 name=description 을 입력한다 -->
<meta name="description" content="skyksit.com is a blog about IT and ecommerce, frontend development, games and stocks.">
<title>
과 <meta name='description'>
정보는 검색엔진에서 검색시에 보여주는 기준값이 된다.
description 의 길이는 MS 는 25~160자
를 권장, 네이버는 80자 이하
를 권장 한다.
Open Graph Data
Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜이다.
Facebook 에 제공하는 메타 데이터 이다. 소셜에 링크될 때 해당 정보를 이용해서 보여준다.
<meta property="og:type" content="website">
<meta property="og:title" content="skyTechBlog – IT, eCommerce, Game Blog">
<meta property="og:url" content="https://skyksit.com/">
<meta property="og:site_name" content="SkyTechBlog">
<meta property="og:description" content="skyksit.com is a blog about IT and ecommerce, frontend development, games and stocks.">
<meta property="og:locale" content="ko_KR">
<meta property="og:image" content="https://skyksit.com/images/logo.png">
트위터용 meta
<meta property="twitter:card" content="summary">
<meta property="twitter:image" content="https://skyksit.com/images/logo.png">
사이트 아이콘 추가
.ico
,.gif
,.png
이미지 포멧으로 파비콘을 설정할 수 있다..ico
포멧으로 추가 할 경우 Internet Explorer 6 에서도 보인다.
<link rel="icon" href="/images/favicon.png">
다양한 크기의 단말기 환경이 생기면서 여러 사이즈의 아이콘을 설정 할 수 있다
<!-- 아이패드 레티나 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="favicon144.png">
<!-- 아이폰 레티나 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="favicon114.png">
<!-- 아이패드 -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="favicon72.png">
<!-- 일반 아이패드, 아이폰, 안드로이드폰 -->
<link rel="apple-touch-icon-precomposed" href="favicon57.png">
CSS, Javascript 추가하기
CSS 를 추가하는 <link>
는 항상 <head></head>
안에 있어야 한다.
Javascript 를 추가하는 <script>
는 <head>
안에 들어가지 않아도 된다.
<!-- CSS 추가 할 때 -->
<link rel="stylesheet" href="/css/default.css">
<!-- Javascript 추가 할 때 -->
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
문서의 기본언어 설정
문서의 기본언어를 설정한다.
언어코드 와 국가코드 를 참고해서 넣으면 된다.
국가코드는 생략 가능하다.
<html lang="ko_KR">
'IT > HTML' 카테고리의 다른 글
국가코드 (Country Code) (0) | 2022.06.28 |
---|---|
색상명 (Color Names) (0) | 2022.06.27 |
SEO(Search Engine Optimization) 요약 (0) | 2022.06.27 |
하이퍼링크(Hyperlink) 작성법 (0) | 2022.06.27 |
HTML TEXT 작성법 (0) | 2022.06.27 |
HTML 주요태그 (0) | 2022.06.27 |
HTML Cheatsheet (한장요약) (0) | 2022.06.27 |
HTML (0) | 2022.06.27 |