<tag>에 관하여
문서의 머리이자 HTML의 목적을 나나태는 태그 - head
-요약설명
- head 요소: 브라우저 화면에는 직접적으로 보이지 않으나 검색엔진의 주체이며, 인터넷으로 검색시 표시되는 정보들을 포함하고 있습니다.
- meta 요소: 문서 그 자체를 설명하는 태그이며, 해당 문서가 어떤 내용을 담고있는지 안내를 해주는 또는 저자와 키워드가 무엇인가 등을 안내해주는 특성을 담고 있습니다.
-심화설명
·head 요소 / 표기법: <head></head>
head태그는 문자 그대로 문서의 "머리"입니다. <html></html>태그의 자식요소로 <body></body>태그에 포함하지 않고 동일한 위치에서 사용합니다. head태그 요소는 문서의 메타데이터의 집합이며 메타방식 검색엔진에서 사용 되고 인식될 주요 데이터의 집합체라고 보시면 됩니다. 페이지의 제목(title)이나 소개, 노출의 여부 또는 다른 파일들의 link, 또는 style태그의 명시, script파일의 로드 등 이 부분들이 head 요소 안에 위치하고 있습니다.
head 태그의 경우 다음과 같은 태그들을 포함하고 있습니다.
head 태그 내 포함 요소 |
설명 |
<title></title> |
웹 페이지에는 보이지 않으며 브라우저 상단의 탭 등에서 사이트 이름을 나타냅니다. |
<meta> |
페이지의 설명, 핵심 키워드, 제작자, 크롤링 정책 등 수많은 정보를 나타 낼 수 있습니다. |
<link> |
CSS를 별도의 파일로 저장 후 HTML 문서 내에서 불러올 수 있습니다. |
<style></style> |
HTML 내에서 CSS를 적용할때 사용할 수 있는 태그입니다. |
<script><script> |
자바스크립트와 같은 계열의 프로그래밍 언어를 사용하거나 연결할 수 있는 태그입니다. |
<noscript></noscript> | 페이지에 있는 스트립트 타입이 지원되지 않거나, 브라우저에서 스크립팅이 꺼져있는 경우에 실행 될 html 구획을 정의하는 태그입니다. |
<base> | 모든 상대 url들의 기준 url을 나타냅니다. 한마디로 url 베이스캠프라고 정의하면 됩니다. 경로설정이나 a태그에서 아무것도 안썻을시 base태그가 적용된 링크로 이동하게 됩니다. |
-title 요소
웹 페이지에선 나타나진 않지만 브라우저 상단의 탭에서 보이는 사이트의 이름을 나타냅니다. 웹 검색엔진에서 검색 될 때 중요한 자료로 쓰인다고 알려져 있으며, h1~h6과도 긴밀한 관계가 있다고 알려져 있습니다.
예제:
<html>
<head>
<title>안녕하세요</title>
</head>
<body>
</body>
</html>
<title></title> 안에 안녕하세요 라는 글을 넣었을 경우에는, 탭에 표시가 되는 동시에 작업 표시줄에도 표시되며, 웹페이지를 즐겨찾기에 추가하거나 파일로 저장될 시 기본으로 정해지는 이름으로 됩니다. 또한 검색엔진이 웹페이지의 내용을 판단할 때 활용 될 수 있습니다.
또한, title태그를 입력하지 않을 경우에는 현재 페이지 파일의 url경로만이 나오게 되며, 브라우저에서는 HTML문서로 인식하지 않습니다.
참고사진:
이런식으로 페이지 상단에 "안녕하세요" 글씨로 탭이 표시된걸 확인할 수 있습니다.
하나 이상은 사용할 수 없으며 <head></head>태그 사이에서 <title>태그의 요소가 "텍스트" 일때만 동작합니다.
또한, 특수문자를 넣는것을 자제하는것이 좋습니다. 웹 표준성이나 접근성에 따라 시각장애인의 경우 스크린리더를 통해 페이지의 내용을 음성으로 듣습니다. 스크린리더는 ＃＃＃안녕하세요＃＃＃ 이렇게 title이 들어가 있을때 샵샵샵 안녕하세요 샵샵샵 이렇게 읽어주시 때문에 시각장애인들이 놀라거나 바로 사이트를 꺼버릴수 있는 일이 생길 수도 있습니다.
그렇게 때문에 title의 페이지 제목은 명료하게 적어주는 것이 좋습니다.
보통은 페이지의 정보와 : 페이지의 이름 이런식으로 title에 넣는 편입니다.
·meta요소 / 표기법 <meta /> (단일 태그로 닫힘 태그가 없습니다.)
<meta />태그는 metadata를 제공하는 역할을 합니다. 쉽게 말해, 사이트 자체에 대한 정보나, 저작자, 문서의 언어, 등을 표현하는 머리말과 목차 같은 특성을 포함하고 있는것을 말합니다. 클라이언트나 개발자가 보는 웹 화면상에서는 별 다르게 표시되는 것이 없지만, 검색 엔진이나 브라우저에게 정보를 제공하기 위해 주로 사용 됩니다. meta 태그는 일반적으로 name과 value의 구성으로 사용 됩니다.
-meta태그의 구성요소
1. http-equiv ="항목명"
2. content = "정보값"
3. name = "정보 이름"
4. property
예제:
<!DOCTYPE html>
<html>
<head>
<title>meta태그</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript, jQuery">
<meta name="description" content="html, css, javascript, jquery 복습사이트">
<meta name="author" content="리치 벤베스">
</head>
<body>
<h1>안녕하세요. 벤베스 박사입니다. </h1>
</body>
</html>
위의 예제에서 보면 name과 content로 나뉘어진것을 볼 수 있습니다. <meta />태그는 단일 태그로 열고 닫힘인 일반적인 태그가 아니라 하나의 태그에서 닫히는 구조를 갖고 있습니다.
-charset 속성
<meta />태그에서 기본적으로 사용되는 속성은 charset입니다. <head><head/>태그 사이에 위치하게 되며 역시나 <meta/>태그의 속성으로 사용됩니다. charset은 인코딩 타입을 지정하기 위해 사용되는데, 이는 웹페이지에서 사용하는 언어를 지정하는 것입니다. 영어로 지정할 수 있고, 한글로 지정할 수 있고 각국의 나라의 언어로 지정할 수도 있습니다. 하지만 세계 는 다양한 언어가 있고 브라우저마다 기본적으로 내제하고 있는 언어가 다르기 때문에 기본언어를 한글로 지정한 브라우저에서 영어권 나라 브라우저에서 페이지를 로딩할시 한글로 출력 되는 것이 아니라 한글이 깨져서 나오게 됩니다. 그리하여 세계 각국 공용인 유니코드 기반 "UTF-8" 언어를 많이 사용하게 됩니다.
※인코딩이란 데이터를 부호화 하는것을 인코딩(encoding)이라 칭하고 부호화된 데이터를 부화화되기 전으로 돌리는 것을 디코딩(decoding)이라 합니다. 즉, 문자, 기호, 숫자 데이터를 부호화하는 것이 인코딩이고, 부호화된 문자, 기호, 숫자 데이터를 부호화호기 전으로 돌리는 것을 디코딩이라고 칭합니다.
지구상에는 수 많은 문자와 기호를 원활하게 인코딩하는 방식이 세계 각국 공용언어를 기반으로 만든 UTF-8이라는 인코딩 방식인 것입니다. "charset" 이란 "character set" 문자셋 의 줄임말입니다. 문자를 인코딩하여 세팅해준다는 의미에서 줄임말이라고 보시면 쉽게 이해가 가실것이라고 생각됩니다.
예제:
<meta charset="UTF-8">
-name 속성
name의 경우 문서의 데이터를 설정하며 뒤 따라 나오는 content에 대한 제목이라고 할 수 있습니다.
또한, name이 설정된 경우는 문서 레벨의 메타데이터로 전체 페이지에 적용됩니다.
예제:
<meta name="author" content="리치 벤베스">
예제에서 보면 알 수 있듯이, 리치 벤베스라는 컨텐츠는 author, 즉, 저자라고 할 수 있는 안내 입니다.
name의 종류
키워드 | 설명 |
keywords |
문서에 대한 핵심어를 쉼표로 분리하여 표시합니다. |
description |
문서에 대한 설명, 검색 엔진은 검색 결과와 함께 description에 기재된 설명을 브라우저상에 노출시킵니다. 현재 권장된 사항은 15자~45자내외 입니다. (페이지마다 다르게 간결하고 명확하게 해주는게 좋습니다. ) / 수정할 시 바로 웹 페이지에 반영되지 않으며, 주기적으로 업데이트가 되는 시점 이후에 반영이 된다고 합니다. |
author |
저자 이름의 이름을 사용됩니다. |
generator |
그 문서를 생성하기 위해 사용된 소프트웨어를 표시합니다. |
application-name |
문서를 표시하는 웹 어플리케이션 이름을 표시하기 위해 사용됩니다. |
copyright | 저작권자를 표시합니다. |
data | 페이지가 최종 편집된 시간을 나타냅니다. |
robots | 검색 로봇의 크롤링 허용 여부를 설정할수 있습니다. |
reply-to | 연락할 수 있는 e-mail주소를 나타냅니다. |
referrer | 웹 브라우저로 월드 와이드 웹을 서핑할 때, 하이퍼링크를 통해서 각각의 사이트로 방문시 남는 흔적을 확인할 수 있습니다. |
-content 속성
name 속성의 값에 대한 정보와 설정된 정보에 따라 검색엔진에서 요약된 내용을 노출하게 하여 클라이언트에게 검색에 유용한 정보를 제공합니다. http-equiv와 더불어 연간된 정보를 안내해 줍니다.
에제:
<meta name="author" content="오리">
<meta name="keywords" content="HTML, CSS, JavaScript, jQuery">
<meta name="description" content="html, css, javascript, jquery 복습사이트">
<meta http-equiv="content-language" content="ko"> // 현재 폐기되었기 때문에 사용하면 안됩니다.
<meta http-equiv="refresh" content="3">
1.첫번 째 meta태그의 content의 오리가 해당 페이지의 저자인것을 나타내고 있습니다.
2.두번 째 meta태그는 해당 페이지의 HTML, CSS, JavaScript, jQuery가 검색 할때의 키워드 임을 알 수 있습니다.
3.세번 째 meta태그는 페이지를 검색했을때 사이트 아래 [html, css, javascript, jquery 복습사이트]라고 나오는 설명입니다.
4.네번 째 meta태그는 기본언어를 설정해주는 것입니다. 즉, 한국인을 위한 사이트 이지만, 영어로된 문서가 올라온다고 해서 한글로 바꿔주지는 않는 것입니다. 기본언어를 설정해 줌으로써 해당페이지의 언어뿐만 아니라 여러가지 미디어타입에도 적용이 됩니다. 또한 html상위 태그로 "<html lang=en>" 이런식 으로 들어간것을 본적이 있으실 겁니다. lang은 meta태그의 content-language 보다 우선순위가 높으며 마찬가지로 기본 사용자언어를 설정해 주는것입니다. // body나 html 전역에 lang을 사용해야 합니다.
5.다섯번 째 meta태그는 해당 페이지를 3초마다 새로고침 하게끔 설정해주는 것입니다.
-http-equiv 속성
http-equiv 속성은 전처리 구문 지시자로 "웹 브라우저에게" 정보를 전달하기 위해 사용됩니다. meta요소에서 정의된 명령(사항)을 먼저 실행한 다음에 페이지를 로딩합니다. 이를 프라그마 디렉티브(pragma directive)라고 합니다. 웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때 의미를 갖습니다. HTML 응답했을때 http-equiv가 실행되는 구조입니다.
키워드 |
설명 |
content-language |
전처리될 기본 언어를 지정할 수 있습니다. 선언하지 않을 경우 기본언어가 존재하지 않는것으로 브라우저가 인식하게 됩니다. |
content-type |
이 속성은 문자 인코딩을 선언합니다. content속성의 문자열 "text/html"와 아스키, 대문자 구별없이 일치해야 합니다. 그 후에 리터럴 문자열 charset이 따라와야 하고 문자 인코딩에 해당하는 네임이 있어야 합니다. XML에서는 http-equiv속성을 사용할 수 있습니다. // 폐기되었습니다. charset으로 사용해야합니다. |
default-style |
대체 스타일시트 집합의 이름을 설정합니다. |
refresh |
리다이렉트와 같이 페이지를 지정한 시간마다 새로고침을 할 수 있게해줍니다. 이 값은 유요한 정수로만 구성되어야 하며, 새로고침되기 까지의 시간을 초단위로 나타냅니다. |
set-cookie |
http쿠키를 설정할 수 있습니다. 이 속성은 올바르지 못하기 때문에 실제 http해드를 사용해야 합니다. |
<meta http-equiv="refresh" content="10, https://www.google.com">
위의 예제의 경우 10초마다 새로고침이 된 후에 https://www.google.com 사이트로 이동하게 됩니다. content 앞에는 새로고침될 초수를 입력하고 콤마(,) 뒤에 이동할 url을 입력해주시면 이동하게 됩니다.
-robots
1. All(Default): 'index, follow'를 기본값으로 지정해 놓은 상태입니다.
2. index : 로봇이 페이지를 수집 대상으로 인식합니다.
3. Follow : 로봇이 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 인식합니다.
4. None : 'noindex, nofollow'를 지정한 것과 같습니다.
5. Noindex : 로봇이 페이지를 수집 대상에서 제외합니다.
6. Nofollow : 로봇이 페이지를 포함해 링크가 걸린 곳을 수집대상에서 제외합니다.
7. Noodp :
8. Noarchive : 검색 엔진이 페이지의 컨텐츠를 캐싱하는것을 막습니다.
9. Nosnippet :
10. Noimageindex
11. Noydir :
12. Nocache :
<meta name="robots" content="index">
-referrer 속성
해당 웹페이지로 들어오기 위해 클릭한 경로를 참조 주소를 전송하게 되고 기록하게 됩니다. 쉽게말해 방문 경로를 확인할 수 있는 는 <meta>태그 "name"의 속성입니다.
-property 속성
요즘은 페이스북, 카카오톡, 트위터 등에 링크를 공유하게 되면 그 링크대신 사진과 글귀가 나오게합니다. 가장 흔히 사이트를 카카오톡에 보내면 글의 사진이 뜬다는것이 예시입니다. 각 회사마다 이를 이용하기 위해 meta tag를 정의하여 사용하고 있습니다. 현재 open graph(og:)는 카카오톡, 페이스북 등을 이를 사용하고 있습니다.
// 카카오톡, 페이스북으로 확인할때 나타내는 정보입니다.
*open graph tag 사용
<meta property="og:title" content="리치 벤베스의 실험실">
// 이미지 및에 뜨는 제목
<meta property="og:type" content="article">
<meta property="og:url" content="http://richvenveis.tistory.com">
<meta property="og:image" content="">
// 링크 확인시 보이는 이미지이며 사이즈는 800x400을 준수합니다.
<meta property="og:description" content="">
// 이미지 밑에뜨는 제목 옆에나오는 설명, 설명이 길게 나오지 않으므로 앞쪽에 중요한 내용을 넣어두어야 합니다.
<meta property="og:locale" content="">
<meta property="og:image:width" content="">
<meta property="og:image:height" content="">
*twiiter tag 사용
<meta name="twitter:title" content="summary">
<meta name="twitter:url" content="summary">
<meta name="twitter:description" content="summary">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="summary">
-viewport
컴퓨터, 노트북, 태블릿, 휴대폰 등 각 디바이스 별 해상도가 모두 다릅니다. 화면이 작은 휴대폰이나 태블릿에서 PC와같은 픽셀로 웹 페이지가 표시된다면, 글자가 매우 작아 확대하여 보거나 편의성이 매우 불편할 것입니다. 대다수의 사람들이 스마트포으로 검색을 주를 이루는 현 시대에 이는 큰 재앙일 것입니다. 그리하여 등장한 웹 페이지 반응형 웹페이지이며, 반응형 웹페이지에서 필수적인 요소가 바로 <meta>태그의 viewport속성 입니다. content의 값은 (,)로 표시합니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximun-scale=1,">
왼쪽 : viewport 미적용 모바일 모습 / 오른쪽: viewport 적용 모바일 모습
width(뷰포트 너비) : 양수 값 또는 device-width(디바이스의 넓이) 리터럴 값이 들어갑니다. viewport의 width를 픽셀 값으로 정의합니다.
height(뷰포트 높이) : 양수 또는 device-height(디바이스의 높이) 리터럴 값이 들어갑니다. viewport의 height를 픽셀 값으로 정의합니다.
initial-scale(초기 확대/축소 값) : 0.0 ~ 10.0중의 하나의 값이 들어갑니다. device-width와 alndscape 모드에서의 device-height와 viewport 사이즈 간의 비율을 정의합니다. // 2로하면 초기값이 2배로 커집니다.
maximun-scale(최대 확대/축소 값) : 0.0 ~ 10.0중의 하나의 값이 들어갑니다. zoom의 최대치를 정의합니다. 이 값은 maximum-scale보다 크거나 같아야 하고, behavior가 정의되면 안됩니다.
minimum-scale(최소 확대/축소 값) : 0.0 ~ 10.0중의 하나의 값이 들어갑니다. zoom의 최대치를 정의합니다. 이 값은 maximum-scale보다 작거나 같아야 하고, behavior가 정의되면 안됩니다.
user-scalable(확대/축소 가능 여부) : boolean 값 (yes or no) : 기본값(Default)은 yes라 줌(확대)을 사용할 수 있습니다. no로 설정할 시 줌을 사용할 수 없습니다.
예제
※특징:
예시:
'Rich Venveis의 연구노트 > HTML' 카테고리의 다른 글
| [HTML][tag] div (0) | 2018.03.15 |
|---|---|
| [HTML][tag] link (0) | 2018.03.11 |
| <tag> a, em, strong, h1~h6, ul, ol, li (0) | 2018.02.26 |
| HTML5 시멘틱태그 (0) | 2018.02.26 |
| HTML이란? (0) | 2018.02.26 |