HTML 헤드 부분의 마지막 자바스크립트와 CSS
HTML문서의 헤드(head) 부분에 코딩하는 자바스크립트, CSS가 있습니다. 자바스크립트는 HTML로만은 표현할 수 없는 다양한 액션을 제공합니다. 예를 들어 경고창을 띄운다던지, 레이어를 보기게, 안보이게 한다던지...
그리고 CSS는 쉽게 말씀을 드리면, 보기 좋지 않은 HTML문서를 이쁘게 디자인 할때 사용한다고 생각을 하시면 됩니다.
자바스크립트와 CSS가 반드시 <head></head> 안에 코딩이 되어야 하는 것은 아니지만, 일반적으로는 head 안에 기술이 됩니다. 그리고, 자바스크립트와 CSS는 사용의 강제성은 없으며, 사용을 해도 되며 사용을 하지 않아도 되지만, 어떤 웹페이지라도 자바스크립트와 CSS를 사용하지 않는 웹페이지는 거의 없습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML문서의 제목</title>
<meta charset="UTF-8">
... 생략 ....
<script>
자바스크립트 입력 부분
</script>
<style>
스타일 시트 입력 부분
</style>
</head>
<body>
본문 내용
</body>
</html>
<script></script>
자바스크립트(javascript)를 입력하는 부분입니다. 초창기의 자바스크립트의 경우에는 원하는 액션을 구성하기 위하여, 많은 코드를 입력을 했어야 했지만, 요즘은 jQuery, 프로토타임과 같은 라이브러리를 많이 사용함으로써 코딩도 상당히 줄었으며, 거의 jQuery와 같은 라이브러리를 많이 사용합니다.
<script>
alert("환영합니다."); // 웹브라우저에 경고창이 나타나며, 환영합니다 라는 글자가 나타납니다.
</script>
형식으로 사용을 합니다.
또한 자바스크립트의 코딩이 길어질 경우, 별도의 자바스크립트 파일을 만들어서 링크를 시킬수도 있습니다.
<head>
<script language="javascript" type="text/html" src="문서위치"></script>
<script src="문서위치">
</head>
예를 들어 qoop.js 라는 자바스크립트 파일의 경우에는 <script src="qoop.js"></script> 라고 코딩합니다.
타입과 랭귀지를 생략도 가능합니다. ( 자바스크립트의 확장자명은 .js 입니다. )
<style></style>
<style>과</style> 내에 코딩을 하면 됩니다.
<head>
<style>
* { font-family: 굴림; } // *는 문서 전체를 의미하며, 문서 전체의 폰트를 굴림체로 설정
</style>
</head>
스타일시트 또한 자바스크립트와 마찬가지로 별도의 CSS 파일을 생성하여 링크를 시킬수 있습니다.
<head>
<link rel="stylesheet" href="css 문서위치">
</head>
예를 들어 style.css라는 스타일시트 파일을 링크시킬 경우에는 <link rel="stylesheet" href="style.css"> 와 같이 합니다. ( 스타일시트의 확장자명은 .css 입니다. )
스타일시트를 HTML문서에서 사용하는 방법은 몇가지가 있습니다. 자세한 사항은 http://theqoop.tistory.com/11 를 참조하세요.
여기까지 완성이 되었다면, 중요한 헤드 부분의 그림은 다 그려진것 같습니다. 자바스크립트, CSS는 별도로 공부를 하셔야 합니다.
다음 시간 부터는 본격적으로 바디 <body></body> 를 진행하도록 하겠습니다.
'Web > Html' 카테고리의 다른 글
| [HTML5강좌] 레이아웃 설정하기 (layout) (2) | 2015.01.19 |
|---|---|
| [HTML5강좌] 본격적인 시작과 주석달기 (2) | 2015.01.17 |
| [HTML강좌] 헤드 메타태그 종합 name, content ... (0) | 2015.01.08 |
| [HTML강좌] 메타태그, 글자가 깨어진다면 Charset를 확인하라 (1) | 2015.01.05 |
| [HTML강좌] DOCTYPE 이란? (2) | 2015.01.04 |