티스토리 뷰

IT 이야기/프로그래밍

[HTML 쉽게 이해하기 강좌] - <head> 태그에 대해서

하늘과 나b 2011. 12. 2. 10:25



HTML 쉽게 이해하기 강좌가 계속 진행중입니다. 많은 관심 부탁드립니다.
이번시간에는 <head> 태그에 대해서 알아보도록 하겠습니다.



<head> 태그에 대해서 알아볼까요?



전 시간에 HTML문서는
크게 head 부분과 body 부분으로 구성되어 있다는 설명을 드렸습니다.




이번 시간에는 <head> 태그에 대해서 설명드리려고 합니다.
<head>영역은 <head>로 시작해서 </head>로 끝이 나는데, 일반적으로 웹 문서의 내용이 아니라 웹 문서의 제목이나 머리말에 해당하는 정보를 입력합니다.

[알아두기] <head>에 대해서

<head>로 시작해서 </head>로 끝남
웹문서의 제목이나 머리말에 해당하는 정보를 입력합니다. 






head 태그 안에 들어가는 요소


head 태그 안에는 <title>태그, <meta> 태그, <link> 태그 등이 들어갈 수 있습니다.
이 태그들을 하나씩 알아보도록 하겠습니다




 <title> - 페이지의 제목 표시  <title> 태그는 페이지의 제목을 표시합니다 


<title>태그는 웹페이지의 제목을 표시하는 태그입니다. <title>태그는 HTML문서의 <head> 영역 안에 반드시 지정되어야 하며, 단 한번만 지정하면 됩니다.

<title> 태그 내에는 문자(텍스트)만 가능하며 이는 웹브라우저에 타이틀 바, 탭 등 창이름으로 사용됩니다. 그러므로 웹페이지의 내용을 대표할 수 있는 내용으로 간결하게 명확하게 작성해야 합니다.

 

[알아두기] <title> 태그

<title> 태그
    - 웹페이지의 제목을 표시하는 태그
    - <head> 영역 안에 반드시 지정되어야 함
    - 문서 내에서 한번만 지정



제 블로그를 예로 들어서 설명을 드리도록 하겠습니다.
제 블로그에 접속하면 아래와 같이 하늘과 나의 IT School이라고 보이는데 이것도 <title> 태그 안에 하늘과 나의 IT School이라는 내용을 넣어준 것입니다.





   
<html>
<head>하늘과 나의 IT School </head>
</html>

실제 소스를 보면 위와 같습니다.
메모장에 위와 같이 입력해서 저장한 후 실행해 보면 위의 그림과 같이 나옴을 볼 수 있습니다.
'백문이 불여일타' 라는 말이 있다고 합니다.
백번 듣는 것보다 직접 한번 쳐서 해보는 것이 낫다는 말이라고 합니다.


 <meta> <meta> 태그는 페이지에 대한 정보를 작성합니다 


<head> 안에 들어갈 수 있는 <meta> 요소는 HTML 페이지의 정보를 작성하는 태그입니다. 
이 <meta> 태그로 작성되는 정보는 사람을 위한 정보라기 보다는 프로그램이나 검색 엔진 등에 사용된다고 보시면 좋을 것 같습니다.

[알아두기] <meta> 요소
     HTML 페이지의 정보를 작성하는 태그 



이 <meta> 요소 중에도 필수적으로 써줘야 할 것이 있는데 MIME Type과 코드 세트를 지정하는 것인데요. 일반적으로 아래와 같이 작성해 줍니다.

<meta http-equiv="Content-Type" content="text/html; charsett=utf-8" />


일반적인 <meta> 요소는 name과 content 속성을 지정하여 사용하는데요.
아래와 같이 사용합니다.

[알아두기] <meta>요소의 사용법
 <meta name="name 속성" content="content 속성" />


 
다음은 많이 사용하는 <meta> 요소의 name 속성과 content 속성을 정리해 보았습니다.

 용도 속성(name)  값(value) 
요약 설명  description 페이지의 간략한 설명 
키워드 keyword  페이지의 키워드 
저작자  author  페이지의 작성자 
저작권 표시  copyright  저작권자 
연락처  reply-to  연락할 수 있는 e-mail 주소 
편집일  data  페이지가 최종 편집된 시간 
검색 로봇 제어  ROBOT  검색 로봇의 크롤링 허용 여부 
 


저작자표시

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[HTML 쉽게 이해하기 강좌] - DOCTYPE에 대해서  (0) 2011.12.05
[Javascript] getElementById 예제 - 링크 보이기/숨기기  (0) 2011.12.05
[C언어] 함수 rand(), srand() 쉽게 이해하기  (55) 2011.12.05
[Javascript] 홈페이지에 현재의 년월일을 이미지로 된 숫자로 표시하는 자바스크립트 소스  (1) 2011.12.03
[HTML 쉽게 이해하기 강좌] - <h1>~<h6> 태그에 대해서  (0) 2011.12.03
[HTML 쉽게 이해하기 강좌] - HTML 문서의 기본 구조  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌] - 주석문  (0) 2011.12.02
[HTML 쉽게 이해하기 강좌 #1] - HTML의 기본  (2) 2011.12.02
[HTML/CSS] 마우스 커서 모양(스타일) 바꾸기  (1) 2011.11.30
[강의] HTML5 그 두번째 이야기 - HTML5는 OOO가 다르다  (2) 2011.11.05
공유하기 링크
댓글