본문으로 바로가기

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

category 웹코딩/HTML 2015.04.17 04:42

웹 문서의 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 요소는 기본 hreftarget 속성을 지정할 수 있는데, 이 속성은 문서 전체에 영향을 주기 때문에 브라우저가 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>

결과 :



댓글을 달아 주세요