김루루의 개발일기
head 태그의 모든것/meta 태그 - HTML 0614 본문
head 태그 안에 들어가서 html문서에 중요한 메타 데이터를 표현하는 태그.
◎ Title 태그
검색 최적화에 매우 중요하다.
검색에 최적화 될 수 있게 title 잘쓰는 방법.
- 키워드만 나열은 하지 않는게 좋다.
- 페이지마다 그에 맞게 변경한다.
- 무엇에 관한 내용인지 함축적인 내용이 잘담겨있게 작성한다.
<title> 문서의 대 제목 </title>◎ LInk 태그
css 스타일시트를 html문서에 첨부할때 사용한다.
(웹폰트를 첨부할때도 사용함)
- [link : css + Tap] 태그 자동완성
<link rel="stylesheet" href="style.css">◎ style 태그
html문서 내에서 css코드를 작성할때 사용한다.
html문서 내에 특별한 이유가 아니면 스타일을 쓸필요는 없다.
<style>
//css 코드
</style>◎ script 태그
자바스크립트 파일을 첨부할때 사용한다.
<script src="자바스크립트파일 경로"></script>
<script>
/* 이렇게 html문서 body안에도
자바스크립트 코드를 쓸 수 있다.*/
</script>※ <script>태그를 <body>안에 넣는 이유는?
자바스크립트를 head에 적으면 자바스크립트가 먼저 다운로드 될때 까지 body에 있는 html태그들을 로드하지 못한다.
(= 느리게 로딩된다.)
◎meta 태그
title, link, style, script 등으로 표현 할 수 없는 데이터들을 표현할때 사용한다.
속성
- name : 메타데이터 종류
- content : 메타데이터 값
- [meta : vp + tap] 자동완성↓
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
/* viewport :
화면사이즈, 반응형 웹페이지 만들기 위해 필수.*/
/* width=device-width :
화면사이즈의 가로는 사용자 디바이스 가로에 맞춘다.*/
/* initial-scale=1.0 :
처음보여줄때 본래 사이즈에 맞게 1.0비율로 보여준다.*/
/* maximum-scale=1.0, minimum-scale=1.0 :
사용자의 웹페이지 확대나 축소에 제한을 둔다.*/
<meta name="author" content="김루루">
//저자 김루루
<meta name="keywords" content="키워드, 이것저것, 여러가지">
//키워드 나열할때
<meta name="discription" content="설명">
//웹페이지에 대한 설명
'프론트엔드 > HTML' 카테고리의 다른 글
| Doctype & Document Structure - HTML 0613 (0) | 2021.06.14 |
|---|---|
| 기타 태그(abbr/address/pre/code) - HTML 06 (0) | 2021.06.14 |
| Media 태그(audio태그/video태그/iframe태그) - HTML 0613 (0) | 2021.06.14 |
| Table태그(표) - HTML 0612 (0) | 2021.06.13 |
| Select태그 / Textarea태그/ button태그 - HTML 0612 (0) | 2021.06.13 |
'프론트엔드/HTML' Related Articles
more
Comments