본문 바로가기

클라이언트/HTML

HEAD


<head>


head 요소의 정의는 '문서의 메타데이터 집합'입니다.


이 페이지의 제목이나 이 페이지가 검색엔진에 노출이 될 지 안될지,


이 페이지에 대한 소개 글 등등의 정보들이 메타데이터로 들어갑니다.


CSS 파일과 JavaScript 파일을 연결하는 부분들도 주로 이 head 요소 안에 위치합니다.



head 태그의 요소

title  /  meta  /  link

누르면 이동됩니다.


title

문서의 제목을 적을 수 있는 태그입니다. 아래와 같이 작성되며 text만 입력 가능합니다.


1
<title>개발공발 :: title입니다</title>
cs


다음과 같이 웹 사이트 제목에 나타납니다.



meta

메타 태그는 스스로 닫는 태그이므로 다음과 같이 작성됩니다.


1
<meta 속성="속성값" />
cs


1
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
cs


위의 메타(charset)는 현재 페이지의 인코딩에 관한 정보를 담고 있습니다.


저 메타는 현재 페이지의 인코딩이 utf-8 방식으로 작성이 되었다는 뜻으로, 브라우저가 이 메타를 읽고 글자를 올바르게 랜더링 합니다. 



1
<meta name="Description" content="소개 내용" />

cs


위의 디스크립션(Description) 메타는 현재 페이지에 대한 설명을 담고 있으며, 이 정보는 주로 검색엔진이 확인합니다.

구글의 경우 페이지 제목 아래로 페이지를 소개하는 내용을 주로 이 메타 정보를 이용합니다.

글자 수는 160자 이내로 작성하시길 권장합니다.


1
<meta name="Keywords" content="키워드들의 나열" />

cs


위의 키워드(Keywords)메타는 페이지에 대한 주요 키워드들을 담고 있으며, 이 정보 역시 검색엔진이 확인하는 정보입니다.

페이지에 관련 있는 키워드들을 적어놓으면 검색엔진이 저장해놓았다가 해당 관련 검색어가 나왔을 때에 보다 잘 찾아줍니다.

content 속성에 작성하며, 콤마(,)를 구분 자로 사용합니다.
ex): 홈페이지, 웹 제작, 웹 기초 ...

워드의 개수는 200개 미만으로 제한을 두시고 한 30개 정도가 적당합니다.

하게 많을 경우 검색엔진에서 스팸과 같이 인식하여 더 하위에 노출될 수 있습니다.


1
<meta name="robots" content="noindex, nofollow" />
cs


이 메타는 이 페이지를 검색엔진이 수집을 할 지 안 할지를 정하는 정보입니다.

위와 같이 content 값을 'noindex, nofollow'로 줄 경우, 검색엔진은 여러분의 페이지를 색인 하지 않습니다.

때문에 검색엔진에 노출되지도 않습니다.

검색되지 않는 사적인 페이지를 만들고 싶으실 때 사용하시면 유용합니다.

사용법은 간단합니다. robots 메타 태그의 'content' 'index'이면 그 페이지는 긁어 갑니다.


'content' 'follow'면 그 페이지에 나온 모든 링크를 찾아 가서 링크된 문서도 긁어 갑니다.


'noindex'면 그 페이지는 긁어가지 않습니다. 'nofollow'면 링크를 확인해서 긁어가는 것을 건너 뜁니다.


즉, 다음과 같은 네 가지의 조합이 나옵니다. 목적에 맞게 사용하면 됩니다.


1
<meta name="robots" content="index,follow" /> 
cs
이 문서도 긁어가고 링크된 문서도 긁어감.

1
<meta name="robots" content="noindex,follow" /> 
cs
이 문서는 긁어가지 말고 링크된 문서만 긁어감.

1
<meta name="robots" content="index,nofollow" /> 
cs
이 문서는 긁어가되, 링크는 무시함.

1
<meta name="robots" content="noindex,nofollow" />
cs

이 문서도 긁지 않고, 링크도 무시함.




1
<link href="style.css" type="text/css" rel="stylesheet" />
cs

주로 css파일을 html 파일과 연계하는데 사용하는 태그입니다.

href 

href는 파일의 주소를 담는 속성입니다.

href="속성값" 형식으로 사용됩니다.

type'과 'rel'을 적어주는 이유는이 link 요소의 쓰임새가 css파일 연결 외에도 다른 외부요소를 연결하는 데에도 쓰이기 때문입니다. 
ex)폰트 링크

type 

연결 문서의 MIME 유형 (href 속성이 설정될 때만 사용 합니다.) 을 담는 속성입니다.

*MIME(Multipurpose Internet Mail Extensions) 원래는 전자 메일 전송을 위한 인터넷 표준이었으나.
현재는 웹에서 내용 유형(content type)을 말할 때 자주 쓰입니다.


CSS파일의 경우 : text/css

JS 파일의 경우 : text/javascript

XML 파일의 경우 : application/xml


media


연결 문서가 표시될 장치나 미디어 유형을 담는 속성입니다.


1
<link href="style.css" type="text/css" rel="stylesheet" media="print" />
cs



장치 유형과 연산자 등의 속성 값이 들어가는데


장치 유형


all : 기본값, 모든 유형의 장치에 알맞음

tv : 텔레비전 유형의 장치

screen : 컴퓨터 화면, 태블릿, 스마트폰 화면

print : 프린트 미리보기와 인쇄 페이지 모드

speech 페이지를 읽어주는 스크린 리더


연산자


and / not / or


속성값


min-, max- 접두어와 함께 사용합니다.


width : 출력할 화면의 가로 폭


1
media="screen and(min-width:320px)"
cs

height : 출력할 화면의 높이


1
media="screen and(max-height:700px)"
cs

device-width : 장치 자체 화면의 너비


1
media="screen and(device-width:500px)"
cs


device-height : 장치 자체 화면의 높이


1
media="screen and(device-height:500px)"
cs


orientation : 화면을 가로로 넓게(landscape) 할지, 세로(portrait)로 할지 지정


1
media="all and (orientation : landscape)"
cs


'클라이언트 > HTML' 카테고리의 다른 글

HEAD  (0) 2018.05.11
HTML  (0) 2018.05.11