개발노트

meta 태그 본문

Programming/HTML CSS

meta 태그

dev? 2022. 5. 25. 11:44
반응형

meta 태그

- 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는 데 사용

- <head>와 </head> 사이에 사용하는 특수 태그 

- 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 설명

 

→ 문서에 대한 설명하기 위해 사용하는 태그이다. 

 

 

속성

- http-equiv, name, content 3가지 속성

/* 웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용 가능 */
http-equiv="항목명"

/* meta 정보의 내용을 지정 */
content="정보값"

/* meta 정보의 이름 지정 (지정하지 않을 경우, http-equiv 와 같은 기능 */
name="정보 이름"

 

종류

한글 폰트 지정

<meta http-equiv="content-type" content="text/html; charset=euc-kr"> // 한글
<meta http-equiv="content-type" content="text/html; charset=utf-8">  // UTF-8

 

keywords 지정 

: 검색 엔진에 의해 검색되는 단어

- 콤마(,)를 제외한 최대 256자까지 지정 가능

<meta name="keywords" content="지정 키워드">

EX) 
<meta name="keywords" content="java, html, css">

 

description 지정

: 검색 결과에 표시되는 문자 

<meta name="description" content="검색엔진에 표시되는 홈페이지에 대한 설명">

EX) 
<meta name="description" content="개발노트 입니다.">

 

문서 이동 

: 홈페이지 접속 몇 초 후에 지정한 페이지로 이동

<meta http-equiv="refresh" content="초간격:url= 이동주소">

/* 초간격을 0으로 하여 접속됨과 동시에 지정 사이트로 이동 */
EX)
<meta http-equiv="refresh" content="0:url= test.html">

 

 

 

 

https://webclub.tistory.com/354

 

메타(meta)태그 정리

meta 태그 메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다. HTML 문서의 와 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문

webclub.tistory.com

 

반응형

'Programming > HTML CSS' 카테고리의 다른 글

a태그 작동 원리  (0) 2024.05.27
label for  (0) 2022.05.19
[HTML5] size / maxlength / minlength  (0) 2022.02.24
[반응형] 미디어 쿼리(Media Queries) &뷰포트(Viewport)  (0) 2020.04.28
주석  (0) 2020.04.27