HTML& CSS/HTML

고급 - head 엘레멘트들

본클라쓰 2009. 8. 3. 12:08

 

 <head>태그는 스크립트, 스타일시트, 메타 정보 제공 등을 제공하는데, 헤드 엘레멘트에는 <title>, <base>, <link>, <meta>, <script>, <style>을 추가할 수 있다.

 

 


1. 타이틀 엘레멘트(title elements)

 

<title>태그는 문서의 타이틀을 정의한다. 타이틀은 브라우저 툴바에 나타는 제목을 정의하고, 페이지의 타이틀을 나타내며 검색엔진(search-engine)에서 결과에 나타난다. 따라서 모든 HTML/XHTML 문서는 타이틀 엘레멘트를 필요로 한다.

 

<html>
<head>
 <title>문서의 타이틀</title>
</head>

<body>
문서의 내용...
</body>
</html>

 

 

 

2. base 엘레멘트

 

<base>태그는 링크의 기본 타겟이 되는 페이지를 지정할 때 사용된다.

 

<head>
<base href="http://host/" />
<base target="_blank" />
</head>


 

 

3. link 엘레멘트

 

<link> 태그는 문서와 외부 자원과의 관계를 정의한다. 보통 <link> 태그는 스타일시트에 링크를 사용된다.

 

<head>
<link rel="stylesheep" type="text/css" href="mystyle.css" />
</head>

 


 

4. style 엘레멘트


<style> 태그는 HTML 문서의 스타일 정보를 정의할 때 사용된다. 스타일 엘레멘트 안에 어떻게 HTML 엘레멘트가 보여질지를 지정할 수 있다.

 

<head>
<style type="text/css">
body {background-color: yellow}
p {color: blue}
</sytle>

 

 


5. meta 엘레멘트


<meta>태그는 HTML 문서의 메타 데이터(meta data)를 제공한다. 메타 데이터란 문서를 위한 정보를 말한다. <meta>태그에서 제공되는 정보는 페이지에 표시되지 않는다. 단지 머신을 위한 사용되는 정보이다. 전통적인 meta엘레멘트는 페이지 설명, 키워드, 문서의 작가, 최근 수정일 등 메타데이터를 작성하기 위해 사용된다.

 

페이지를 설명하기 위한 메타 엘레멘트는

<meta name="desctiption" content="Free Web tutorial on HTML, CSS, XML" />

 

페이지의 키워드를 정의한 메타 엘레멘트는

<meta name="keywords" content="HTML, CSS, XML" />

 

<meta name="description" content="웹 페이지 설명" />
<meta name="keywords" content="검색 키워드" />
<meta name="author" content="작성자" />
<meta http-equiv="Content-Type" content="text/html;charset=euc-kr" />

 

 

 

6. script 엘레멘트


<script> 태그는 자바스크립트같은 클라이언트-사이드 스크립를 정의할 때 사용된다.

 

<script type="text/javascript">
 코드

</script>