HEAD 에 들어가는 태그 (title, style, script, meta 태그)

개발/실전 2014. 3. 13. 16:58

HTML 핵심, 요소(Element)

 

html기초에서 html핵심은 요소(element)라고 했는데요

 

이 요소는 태그로 이루어져 있어요.

 

요소를 구체적으로 나누어 보면, 아래처럼 구성됩니다.

 

 

   

 <태그 속성="속성값">내용 </태그>

 

 <태그 속성='속성값'>내용 </태그>

 

 * 겹따옴포, 홑따옴표 모두 가능.

 

예 : <table width="100"> </table>

       표를 만드는 태그 table에,

       넓이를 지정하는 태그 속성 width,

       속성 값 100을 지정했습니다.

 

      <a href="right.htm">페이지 오른쪽</a>

       

 

 

 

 

 

 

head 에 들어가는 태그 (title, style,  script, meta 등)

 

                                                                                                                              

 

 <title> 문서의 제목을 넣는 태그

 

 

 


말 그대로 문서의 제목을 나타내 줍니다. 본문에는 나타나지 않습니다.

 

대신, 브라우저 툴바 상단이나, 검색할 때 이 title이 제목으로 나옵니다.

 

제목은, 하나 이상을 쓸 수 없어요..

 

<title> </title>은 <head> 영역에만 들어갈 수 있어요.

 

 

사용 예:

  

 <html>
 <head>
 <title>지구별 안내서</title>
 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

<title>실행 화면

(빨간 원으로 표시한 부분이 title 영역이 나오는 부분)

 

 

                           

 

<style>  style 정보(글꼴, 색상, 너비, 높이 등) 를 규정하는 태그

 

 

 

주로, css문서에서 사용 됨.

 

 

style 태그는 3가지 방식으로 넣을 수가 있어요.

 

 

1. Inline 스타일(style이 태그 속성처럼 사용된 예)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 </head>
 <body style="color:red;">

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

 

 

2. Internal 스타일(style이 태그처럼 사용된 예)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 <style type="text/css">
    body {color: red;}
  </style>

 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

 

3. External (외부로 연결해 사용된 예)

 

㉠확장자  .css로 저장 (예:test.css)


  body {color: red;}

 

 

㉡확장자 .htm으로 저장(예:main.htm)

 <html>
 <head>
 <title>지구별 안내서</title>
 <link rel="stylesheet" type="text/css" href="test.css" />

 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

 

<style>태그 실행 화면

 

 

 

 

<script> 자바스크립트 같은 다른 프로그래밍 언어를 연결시키는 태그

 

 

 

그래서, 이 스크립트를 브라우저에서 어떻게 번역해야 할지를 알려 줍니다.


<script>태그는 <head>영역과 <body>영역에 모두 올 수 있어요.

(다만 실행 순서의 차이가 있는데, 다른 자원이 모두 로드된 후 자바스크립트가 실행되길 바라면 </body> 바로 위에 위치시킴)

 

자바스크립트(Javascript)는 두 가지 방식으로 넣을 수가 있는데요.

 

1. html 문서에 자바스크립트 끼워넣기(head 영역 안에)

  

 <html>
 <head>
 <title>지구별 안내서</title>

<script type="text/javascript">

  alert('안녕하세요');
</script>
 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

 

 

html 문서에 자바스크립트 끼워넣기(body 영역 안에)

 <html>
 <head>
 <title>지구별 안내서</title>
 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다

<script type="text/javascript">

  alert('안녕하세요');
</script>
 </body>
 </html>

 

 

 

 

2. 외부로 자바스크립트 연결

 

㉠ 자바스크립트 파일을  확장자(.js)로 저장

    예(test.js)


  alert('안녕하세요?');

 

 

㉡ 확장자 .htm으로 저장(예: main.htm)

 <html>
 <head>
 <title>지구별 안내서</title>

 <script type="text/javascript" src="test.js"></script>
 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다

</script>
 </body>
 </html>

 

 

 

 <script> 태그 실행 화면

 

 

 

<link> 외부 자료를 연결시키는 태그

 

 

 

위 <style>에서 외부로 자바스크립트 연결 편에서 본 것처럼 link 태그는

대부분, style sheet를 연결시키기 위해 사용합니다.

 

<link> 태그는 <head>영역에만 올 수 있어요.

사용 예: <style>-external 참조.

 

 

 

 

 

<meta> 정보에 대한 정보를(metadata) 알려주는 태그

 

 

 

페이지에는 표시되지 않고, 브라우저와 검색엔진에게만 읽힙니다.

 

문서에 대한 설명이나, 검색 엔진 키워드, 저자, 다른 메타테이터 등을 표시합니다.

 

description : 문서에 대한 설명

keywords : 검색어  

charset  : character set의 약자로, 문서 부호처리 방식을 표시함.

                UTF-8 이 가장 일반적임

 

 

HTML4 : <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 라고 표시.
HTML5: <meta charset="UTF-8"> 라고 표시

 

 

meta 태그 위치는 항상 <head> 사이에만 옵니다.

 

사용 예:

 

 <head>
   <meta name="description" content="html 기초 강좌">
   <meta name="keywords" content="html, css">
   <meta name="author" content="지구별에">
   <meta charset="UTF-8">
 </head>

 

출처 : http://aboooks.tistory.com/42

 

'개발 > 실전' 카테고리의 다른 글

getAttribute  (0) 2014.03.17
자바스크립트 option  (0) 2014.03.14
자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체  (0) 2014.03.13
&nbsp &It &gy &amp &quot  (0) 2014.03.12
document.getElementById  (0) 2014.03.12
,

티스토리툴바