2018. 5. 11. 15:23ㆍ클라이언트/HTML
<head>
head 요소의 정의는 '문서의 메타데이터 집합'입니다.
이 페이지의 제목이나 이 페이지가 검색엔진에 노출이 될 지 안될지,
이 페이지에 대한 소개 글 등등의 정보들이 메타데이터로 들어갑니다.
CSS 파일과 JavaScript 파일을 연결하는 부분들도 주로 이 head 요소 안에 위치합니다.
<spanindent:" font-family:="" "맑은="" 고딕",="" sans-serif;">head 태그의 요소</spanindent:">
누르면 이동됩니다.
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="소개 내용" />
|
|
1
|
<meta name="Keywords" content="키워드들의 나열" />
|
|
1
|
<meta name="robots" content="noindex, nofollow" />
|
cs |
사용법은 간단합니다. 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 |
이 문서도 긁지 않고, 링크도 무시함.
link
|
1
|
<link href="style.css" type="text/css" rel="stylesheet" />
|
cs |
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 : 출력할 화면의 가로 폭
cs height : 출력할 화면의 높이
cs
device-width : 장치 자체 화면의 너비
cs
device-height : 장치 자체 화면의 높이
cs
orientation : 화면을 가로로 넓게(landscape) 할지, 세로(portrait)로 할지 지정
cs