WEBDIR :: HEAD(문서 머리) 영역

웹 문서의 head 영역에 대한 설명과 안쪽에 포함할 수 있는 요소들에 대하여 자세히 알아봅니다. 총 3장으로 구성되었으니 참고하세요.

HEAD 요소

HTML <head> 요소는 문서의 메타데이터 모음을 표현한다. 여기에는 스크립트와 스타일시트를 정의하거나 링크를 거는 것이 포함된다.

<head>
  ...
</head>

대부분의 브라우저는 마크업상으로 head 태그가 생략되었더라도 head 요소를 자동으로 구성해준다. 몇몇의 브라우저들은 이를 지원하지 않는다(안드로이드 <= 1.6, 아이폰 <= 3.1.3, 노키아 90, 오페라 <= 9.27, 사파리 <= 3.2.1).

사용될 수 있는 요소로는 <title>, <base>, <link>, <style>, <meta>, <script>, <noscript>, <command> 이다.

TITLE 요소

<title> 요소는 문서 제목을 표시하기 위한 요소이다. 중복 지정은 허용되지 않으며, 만일 title 요소가 없더라도 브라우저는 HTML 문서의 파일명을 보여주거나 "제목 없음"으로 적당히 처리한다. 문서의 제목은 검색엔진최적화(SEO)와 밀접한 연관이 있다.

문서 제목은 내용을 대표할 수 있어야 한다.
가능한한 짧고 간결해야 한다.
문서의 식별용도로 사용할 수 있어야 한다.

<head>
  <title>문서 제목</title>
</head>

검색엔진은 문서의 제목(title)과 Meta 태그의 내용, 본문의 첫 100~150자등을 토대로 검색어와 비교하여 검색결과를 출력한다.

BASE 요소

<base> 요소는 문서의 기준 URL을 표시한다. 문서 내에는 여러 개의 링크가 제공될 수 있는데, 이 링크들이 같은 위치를 참조하고 있다면 base 요소를 통해 기준 URL을 지정하여 본문 영역의 링크들을 상대 링크로 표현할 수 있다.

상대 링크로 작성하면 매번 전체 경로로 작성하지 않아도 되기 때문에 그 만큼 코드가 간결해지고 문서의 파일 크기도 줄어든다.
링크가 다른 서버에 있는 문서를 참조할 경우에도 유용하다.
하나의 문서에 한번만 사용가능하다.

<head>
  <title>문서 제목</title>
  <base href="http://www.example.com/info/">
</head>

base 요소는 기본 href와 target 속성을 지정할 수 있는데, 이 속성은 문서 전체에 영향을 주기 때문에 브라우저가 title 요소를 처리한 다음 곧바로 base 요소를 처리할 수 있도록 문서 머리의 앞부분에 두는 것이 원칙이다.

META 요소

메타요소는 HEAD(문서 머리) 영역 #2 - META 요소로 대체합니다.

LINK 요소

링크요소는 HEAD(문서 머리) 영역 #3 - LINK 요소로 대체합니다.

STYLE 요소

<style> 요소는 스타일 정보를 표시한다. 스타일 정보는 콘텐츠를 어떻게 표현할 것인지에 대한 정보를 담고 있는데, 이러한 정보를 포함하고 있는 문서를 스타일시트라고 부른다. 이 스타일시트는 문서 전반에 대한 표현 정보를 담고 있기 때문에 문서 머리에서 제공해야 하며 필요에 따라 한 문서 내에서 여러 번 사용할 수 있다.

<head>
  <style>
  body {font-family: 'Malgun Gothic'}
  h1 {font-family: '필기체'; font-weight: bolder; color: #4183C4;}   
  </style>
</head>

style 요소와 script 요소들의 type 속성을 생략해도 브라우저들은 이것들을 스타일시트와 자바스크립트라고 처리한다.

scoped 속성

HTML5에서 새롭게 추가된 scoped 속성은 한정된 스타일(scoped style)을 지정한다. 기본적으로 스타일시트는 문서 전체에 걸쳐 적용되지만, 이 속성은 특정 요소에만 제한적으로 스타일을 적용할 수 있다. 해당 요소가 부모 요소인 경우 자식 요소에도 같은 스타일이 적용되며, 이 속성을 지정하지 않으면 지정된 스타일이 문서 전체에 적용된다.

<article>
  <h1>Style Scoped</h1>
  <p>The scoped attribute for the style element will eventually....</p>
  <section>
    <style scoped>
      p { color: red; }
    </style>
    <h2>How does it work?</h2>
    <p>Pellentesque habitant morbi tristique senectus et netus...</p>
  </section>
</article>

결과 :

'웹코딩 > HTML' 카테고리의 다른 글

HEAD(문서 머리) 영역 #3 - LINK 요소 (0)	2015.04.17
HEAD(문서 머리) 영역 #2 - META 요소 (1)	2015.04.17
네임스페이스와 휴먼랭귀지, manifest (0)	2015.04.17
DOCTYPE(문서형 정의) 선언 (0)	2015.04.17
HTML 기초(개요, 역사, 요소) (0)	2015.04.17

WEBDIR

HEAD(문서 머리) 영역 - TITLE, BASE, STYLE