[html 기초] head 에 들어가는 태그 (title, style, script, meta 태그)

[html 기초] HEAD 에 들어가는 태그 (title, style, script, meta 태그)

지난 편에서, HTML 기본 구조에 대해 알아보았는데

HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)

오늘 은 그 중 <head></head> 영역에 들어가는 태그에 대해 정리해 봤어요

미리 알고 넘어가야 할 사항이 있습니다~

HTML 핵심, 요소(Element)

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

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

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

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

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

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

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

표를 만드는 태그 table에,

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

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

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

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

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

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

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

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

사용 예:

지구별 안내서 홈페이지에

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

<title>실행 화면

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

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

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

style 은 3가지 방식으로 넣을 수가 있는데, <head> 사이에 오는 <style>태그는 아래 2번에 해당합니다.

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

지구별 안내서 홈페이지에

오신 것을 환영합니다
</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)

</head>
<body>

지구별 안내서 홈페이지에

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

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

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

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

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

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

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

지구별 안내서 홈페이지에

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

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

지구별 안내서 홈페이지에

오신 것을 환영합니다

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

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

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

예(test.js)

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

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

지구별 안내서 홈페이지에

오신 것을 환영합니다

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

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

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

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

사용 예: <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> 사이에만 옵니다.

사용 예:

정리하다 보니 설명이 길어졌는데요, 언제 시간이 되면 각각 코드의 속성에 대해서도 자세히 다뤄보겠습니다~

CSS란? (HTML과 CSS의 차이, CSS 작성법),

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리

[html 기초] 제목 태그 h1, h2, h3, h4, h5, h6

'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