[html 기초] HEAD 에 들어가는 태그 (title, style, script, meta 태그)
지난 편에서, HTML 기본 구조에 대해 알아보았는데
HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)
오늘 은 그 중 <head></head> 영역에 들어가는 태그에 대해 정리해 봤어요
미리 알고 넘어가야 할 사항이 있습니다~
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> 지구별 안내서 홈페이지에 오신 것을 환영합니다 |
<title>실행 화면
(빨간 원으로 표시한 부분이 title 영역이 나오는 부분)
<style> style 정보(글꼴, 색상, 너비, 높이 등) 를 규정하는 태그 |
주로, css문서에서 사용 됨.
style 은 3가지 방식으로 넣을 수가 있는데, <head> 사이에 오는 <style>태그는 아래 2번에 해당합니다.
1. Inline 스타일(style이 태그 속성처럼 사용된 예)
<html> 지구별 안내서 홈페이지에 오신 것을 환영합니다 |
2. Internal 스타일(style태그로 삽입)
<html> </head> 지구별 안내서 홈페이지에 오신 것을 환영합니다 |
3. External (외부로 연결해 사용된 예)
㉠확장자 .css로 저장 (예:test.css)
|
㉡확장자 .htm으로 저장(예:main.htm)
<html> </head> 지구별 안내서 홈페이지에 오신 것을 환영합니다 |
<style>태그 실행 화면
<script> 자바스크립트 같은 다른 프로그래밍 언어를 연결시키는 태그 |
그래서, 이 스크립트를 브라우저에서 어떻게 번역해야 할지를 알려 줍니다.
<script>태그는 <head>영역과 <body>영역에 모두 올 수 있어요.
(다만 실행 순서의 차이가 있는데, 다른 자원이 모두 로드된 후 자바스크립트가 실행되길 바라면 </body> 바로 위에 위치시킴)
자바스크립트(Javascript)는 두 가지 방식으로 넣을 수가 있는데요.
1. html 문서에 자바스크립트 끼워넣기(head 영역 안에)
<html> <script type="text/javascript"> alert('안녕하세요'); 지구별 안내서 홈페이지에 오신 것을 환영합니다 |
html 문서에 자바스크립트 끼워넣기(body 영역 안에)
<html> 지구별 안내서 홈페이지에 오신 것을 환영합니다 <script type="text/javascript"> alert('안녕하세요'); |
2. 외부로 자바스크립트 연결
㉠ 자바스크립트 파일을 확장자(.js)로 저장
예(test.js)
|
㉡ 확장자 .htm으로 저장(예: main.htm)
<html> <script type="text/javascript" src="test.js"></script> 지구별 안내서 홈페이지에 오신 것을 환영합니다 </script> |
<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> |
정리하다 보니 설명이 길어졌는데요, 언제 시간이 되면 각각 코드의 속성에 대해서도 자세히 다뤄보겠습니다~
CSS란? (HTML과 CSS의 차이, CSS 작성법),
table 태그, tr 태그, th 태그, td 태그와 table 속성 정리
'html' 카테고리의 다른 글
table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 (7) | 2014.03.05 |
---|---|
html, css, javascript 주석 처리 방법 (2) | 2014.02.26 |
HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법) (1) | 2014.02.20 |
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML) (0) | 2014.02.20 |
HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이) (4) | 2014.02.18 |
댓글