티스토리 뷰



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  검색 로봇의 크롤링 허용 여부 
 


댓글