본문 바로가기

Web Programing Language/HTML

HTML의 기초 - 4 (<head> 태그의 사용)

 

오늘은 <head> 태그의 마지막 시간이 되겠습니다.

 

남은 것이

<script><style>

태그네요. 많은 분들이 앞으로 계속 사용하실 태그들입니다.

 

바로 시작할게용.

 

1. <script> 태그

 

<script> 태그는 접속자의 클라이언트에서 해석되는 언어들을 정의해 놓는 곳이라고 생각하시면 됩니다.

 

그럼 설명에 들어가기에 앞서 웹 프로그램을 구성하는 언어들에 대해서 설명하도록 하겠습니다.

 

웹 프로그램은 크게 두 가지로 나눌 수 있다고 생각합니다. 바로 클라이언트측 언어와 서버측 언어인데요.

 

서버측 언어는 웹 서버에서 해석이 되는 언어로 네트워크를 통해서 사용자에게 보내지기 전에 컴파일을 시켜 보내는 언어들입니다. 대표적으로 제가 사용하는 php, JSP, ASP 등등이 있겠구요. ㅎㅎㅎㅎㅎㅎㅎ

 

클라이언트측 언어는 서버에서 네트워크를 통해 전송 받은 코드를 사용자의 클라이언트에서 해석하는 언어들을 말합니다. 이런 언어들을 스크립트라고 부릅니다. ㅎㅎㅎㅎ 이름만 들어도 어떤 것인지 대충 감이 잡히시죠?

예. 바로 이런 스크립트 언어들을 기술하는 곳이 바로 <script> 태그 안입니다.

 

이 스크립트 태그는 홈페이지를 좀 더 유연하게 만들어주는 기능을 합니다.

즉, 어느 부분에 어떤 event(홈페이지 상에서 그림을 클릭한다든지 어느 단어에 마우스를 올린다든지 하는)가 발생할 경우 그에 대한 행동을 정의 하는 기능을 하지요 ㅎㅎㅎㅎ 아마도 이 부분은 전혀 무슨 말인지 이해가 되지 않으실 텐데요.... 음,,, 설명하는 저도 무슨 말인지 잘 모르겠네요 ㅎㅎㅎㅎㅎ

 

이 부분은 제가 script언어를 자바스크립트를 사용하니 그 부분에 대해서 연재 할 때 보여드리도록 할게요. ㅎㅎㅎㅎㅎㅎ

 

사용법만 알아보죠!!!   

<head>

     <script type="text/javascript">

         //필요한 내용 기술

     </script>

</head>

가 되겠습니다.

이 부분에서 type의 내용을 적지 않고

 

<script>

//필요한 내용 기술

</script>

 

사용 하더라도 프로그램은 이상 없이 작동합니다. 하지만, 굿 프로그램은 위의 것이라는 것 알아두세요. 알기로는 무슨 문제가 발생할 수 있다고 하는데, 저 같은 경우에는 그냥 무조건 위에 것으로 프로그래밍을 하기 때문에 그 문제를 본 적이 없네요. ㅎㅎㅎㅎㅎㅎㅎ

 

여기서 하나 더 알고 계셔야 할 것이 있습니다.

위의 <script> 태그를 <head>안에서 정의해야 한다고 나와 있지만,,,,

실은 본문 어디에서 작성하더라도 전혀 아무런 이상도 없습니다.

그저 음,,, 뭐라고 할까요. 중요한 것들을 <head> 태그 안에 작성하는 것은 프로그램의 가독성에 좋기 때문이라고 생각합니다!!!!!

자!! 생각해보죠. 만약 저 javascript 가 프로그램의 처음에도 있고, 중간도 있고, 끝에도 있다고 한다면, 그 프로그램은 정말 보기 힘든 프로그램일 겁니다. 물론 프로그램의 길이가 몇 백줄 단위라면 <script>를 ctrl+F로 찾아서 봐도 상관없지만,,,,,, 프로그램이 천 줄, 만 줄 단위가 넘어가게 된다면,,,,,

 

상상만 해도 힘들겠죠????? 물론, 웹 프로그램은 그렇게 긴 코드 길이를 작성하는 경우가 거의 없답니다. 오히려 길면 프로그램이 시작하는 시간이 매우 길어지기 때문에 베드 프로그래밍이라고 할 수 있습니다. ㅎㅎㅎㅎㅎ 제가 짠 것 중에 가장 긴 것도 천 줄을 겨우 넘긴 정도니까요 ㅎㅎㅎㅎ

 

이 것은 프로그램이 여러 개의 웹 페이지로 나눠져 있기 때문입니다. ㅎㅎㅎㅎ 한 곳에 프로그램이 몰려서 코딩 되어있을 필요가 없는 거죠. ㅎㅎㅎㅎㅎ 아마 제가 짰다는 가장 긴 것도 프로그램 전체를 합쳐 놓으면 만 줄은 가뿐히 넘길걸요?? 프로그램 전체 크기가 20Mb 가 넘었었으니까요. 흠...... 어쨌든 <script> 태그는 그냥 저런 경우 쓰는 것이고요. 매우 쉬운 내용입니다. (하하하하하, 쉽지 않게 설명해 놨지만 여러분은 쉽게 아셨다고 생각해용 ㅎㅎㅎ)

 

2. <style> 태그

 

<style> 태그는 쉽게 설명을 끝 낼 수 있겠네요. ㅎㅎㅎㅎ 1번의 script 태그와 거의 비슷한 내용이기 때문입니다.

 

위의 script 태그가 사용자가 정의한 프로그램을 넣는 곳이라면, 이 style 태그는 사용자가 정의한 스타일을 넣는 곳입니다.

스타일이라는 것이 어렵게 생각하면 어렵지만 쉽게 생각하면 정말 쉬운데요.

예를 들어서 <a>1235</a> 이렇게 html을 작성하면 접속자에게는 1235 이렇게 나옵니다. 근데 저 <style> 태그 안에서 스타일 시트를 작성하여 1235 이렇게 나오게 만들 수도 있고, 테이블의 줄 표시를 원하는 것으로 바꿀 수도 있습니다.

말 그대로 스타일, 디자인을 정의하는 곳이라고 생각하시면 됩니다.

이 부분은 css라는 언어를 사용하므로, css 카테고리에서 자세히 설명하도록 하겠습니다!!!!!

 

 

이상으로, <head> 태그의 내용을 모두 설명하였습니다.

<head> 태그는 문자 그대로 html의 머리에 해당합니다. 그래서 매우 중요하고, 쉽게 생각할 수 없는 내용들이 매우 많이 있습니다.

제가 <head>부터 설명을 한 것은 <head> 태그의 쓰임새만 어느 정도 알고 있어도, 홈페이지를 작성하는 것은 무리가 없기 때문이라고 생각해서입니다.

 

요새는 홈페이지를 프로그래밍 부분을 제외하고 나모 웹에디터, 드림위버 등을 사용해서 제작하는 경우가 많습니다.

물론 저의 경우도 위 프로그램들을 사용해서 홈페이지를 작성하는 것이 가장 편한 방법이라고 생각은 합니다.

하지만, 본인이 직접 메모장을 켜놓고 홈페이지를 만들 수 없다면, 그 것은 진정한 웹 프로그래머가 아니라고 생각하기 때문에 저는 나모 웹에디터나 드림 위버를 사용하는 팁에 대해서는 설명을 드리지 않을 것입니다.

,,,,, 제가 절대 한 번도 써 본적 없어서 그러는 것은 아니구요. ㅎㅎㅎㅎㅎ

실은 써본 적 없습니다!!! 너무 어렵더라고요 쓰려니까 ㅋㅋㅋㅋ 제 스타일은 아무래도 메모장인 것 같아요 ㅋㅋㅋㅋㅋㅋ

 

지금 까지 나온 내용은 이해하기도 어렵고 재미없는 부분이었는데요. 다음부터는 조금 더 쉽고 재미있는 내용이 나올테니 재밌게들 읽어주세요 ㅎㅎㅎㅎ 그럼!! 안녕!!또 봐용 ㅎㅎ

 

여러분의 댓글은 제게 매우 큰 힘이 됩니다!!!!