아마 이 글을 읽기 시작한 분이라면 아직까지 태그에 대해서 잘 모르거나 조금밖에 모르는 분일 겁니다.
태그란 게 도대체 뭔지 많이 궁금하셨을 텐데요.... 이제부터 자세히 알려드리죠^^ 시선 집중하세요^^

※ 태그(tag)란 무엇인가?

   먼저 여러분 HTML 이라고 들어보셨나요?  어떤 분들은 HTML = TAG 라고 이해를 하고 계신 분도  계실 텐데... 어찌 보면 그럴 수도 있겠지만 엄밀히 말해서 서로 같은 개념은 아니죠^^
일단 HTML 이란 "Hyper Text Markup Language" 의 약자입니다... 쉽게 말해서 홈페이지를 만드는 프로그래밍 언어라고 할 수 있습니다. 왠지 프로그래밍 언어라고 하니깐 어려워 보이죠?^^ 하지만 조금만 배워보면 너무너무 쉬운 것이랍니다. 그리고 태그(TAG)는 HTML 를 이루는 개개의 명령어죠. 이러한 TAG명령어들이 모여 HTML문서를 이룬답니다. 쉽게 설명하자면 여러분 가끔씩 보는 신문이 있잖아요? 신문이 뭔지는 아시겠죠^^; 신문이 종이로만 이루어지는 게 아니죠? 그 안에 글자와 사진, 한글, 영어 등이 조합 되서 하나의 신문이라는 게 만들어 지는 거죠. 태그도 마찬가지입니다. 먼저 태그명령어는 신문에서의 글자나 사진, 한글, 영어라고 할 수 있죠. 그리고 HTML문서는 글자와 사진, 한글, 영어가 조합된 신문의 한 페이지로 볼 수 있습니다. 그리고 이러한 신문 한 페이지들이 모여 전체 신문이 완성되는 것처럼 HTML문서가 여러 개가 모이면 하나의 홈페이지가 되는 겁니다. 이해 되시죠^^
※ 태그의 기본원리

태그의 기본원리는 간단합니다. <태그명령어>내용</태그명령어>☜이런 형태입니다. 가끔씩 이런 형태에 반항(?)하는 일부 태그명령어가 있긴 하지만 대부분의 태그명령어는 위에 처럼 형태를 가지고 실행됩니다.
간단한 예를 들자면 글자나 문단을 가운데로  정렬시켜주는 태그 명령어인 center 태그 명령어는  
내용☜이렇게 사용할 수 있죠. 그 결과는 .... 다음과 같이 가운데 정렬이 된답니다...

내용

예외적으로 기본원리에 반항하는 태그명령어가 있다고 제가 말씀 드렸는데..
,

, <meta>, <hr>등의 태그명령어들이 있습니다. 이것들은 모두다 단독으로 사용됩니다.^^

※ 태그의 종류
  
태그명령어의 종류는 그렇게 많지는 않습니다. 약....50~60개 정도 될려나??? 저 역시 몇 개나 되는 지는 세보지 않아서 잘 모르겠네요^^>혹...50~60 개라고 하니 넘 많은 게 아니냐? 그거 언제 다 외우냐?  하는 분들도 계실 텐데..... 절대 그런 걱정은 하지 않으셔도 됩니다. 많은 태그명령어 중에 주로 쓰이는 태그명령어는 20개 안팎이라고 할 수 있습니다^^ 크게 분류를 나누어 본다면 "문서지정", "목록정의", "링크관련", "테이블관련", "프레임관련", "사운드/이미지태그", "서식태그", 기타 등등 태그들이 있습니다.^^ 개개의 태그를 보시고 싶은 분은 [홈페이지 태그] 부분에 가보면 다 나와있답니다.
그리고 브라우저에 따라 "익스플러워 전용태그", "네스케이프 전용태그", "양쪽 다 적용되는 태그" 가 있습니다. 대부분의 태그는 양쪽 브라우저에 다 적용이 되는데 일부 태그들은 아직도 각각의 브라우저에서만 실행되는 게 있고... 근뎅...요즘은 익스플러워를 워낙 많이 쓰다 보니....네스케이프도 쓰긴 쓰는데...MS사의 끼워팔기 전략에 점차 입지가 좁아지고 있네요.....

※ 대화방 태그

채팅 많이 해보신 분들이라면 잘 아실 겁니다. 대화방에서도 태그가 사용됩니다...... 태그땜시 대화방측에서는 골머리를 썩이고 있지만 채팅을 하는 사람들측에서는 조금 더 채팅을 멋지게(?) 하고픈 욕구가 있기 때문에 많이 사용을 하고 있답니다. 주로 음악듣기, 그림 띄우기, 글자크기, 색, 움직임 등을 나타낼 수 있는 태그들이 사용된답니다. 그리고 일부지만 폭탄 태그란것두 있죠.....

※ 홈페이지 제작 태그

홈페이지를 만든다는 것은 HTML 규칙에 맞는 파일을 만든다는 뜻입니다. 옛날 호랑이가 도스 쓰던 시절에는 일일이 HTML 규칙을 외워서 작성해야 했지만, 요즘은 나모 웹 에디터나 프론트페이지같은 워드프로세서 방식의 웹 에디터가 있어서 초보도 홈페이지를 쉽게 작성할 수 있습니다. 그러나 기본적으로 HTML을 제대로 알지 못하면 한계가 있기 마련,  덧셈 뺄셈의 원리도 모르고 계산기부터 배운다면 어떻게 되겠습니까?
웹에디터가 편리한 것은 사실이지만 HTML의 동작원리를 모르면 갑작스레 발생하는 상황에 대처할 수가 없게 되죠. 게다가 HTML이 빠르게 발전해가고 있기 때문에 현재의 웹 에디터가 새로 나온 태그를 지원하지 못하는 경우도 생길수 있으므로 HTML을 직접 다룰 줄 알아야 합니다. 물론 모든 HTML 태그를 알 필요는 없고 차근차근 배우신다면 나중에는 다 숙지하실 수 있을 겁니다.
태그는 어디에 쓰이냐 하면은요? 웹 페이지(홈페이지)를 만들 때 사용합니다. 원래 목적도 웹 페이지를 만들기 위해서 만들어 졌구요...요즘도 역시 웹 페이지를 만드는 데 거의 사용됩니다. 이 태그란 게 잘만 사용하면 얼마든지 끝내주는 웹 페이지를 만들 수 있습니다. 아무리 초보라도 일주일만 배우면은 금방 배울 수 가 있고 명령어도 아주 단순하고 쉽습니다.  그런데 이게 최고에 단점이 일일이 명령어를 다 써주어야 한다는 겁니다. 웹 페이지를 하나만 만든 다면 괜찮은데 수십 개 혹은 수백개의 웹 페이지를 만들 땐 시간이 어마어마하게 걸린 답니다. 그리고 같은 명령어를 일일이 다 써주어야 하니깐 힘도 들겠고 같은 내용을 계속 쓰다 보면 엄청난 인내력이 필요하겠죠^^
그래서 소프트웨어적으로 단점을 보완하기 위해 생긴 게 웹 에디터입니다. 그냥 태그명령어를 써주는 게 아니라 워드식으로 원하는 글자나 이미지를 넣고 편집하는 식의 아주 편리한 프로그램이죠^^ 예를 들자면 가장 기본적인 에디터는 메모장이 되겠구요^^ 요즘 잘 나가는 게 나모웹이더군요 5.0 버전까지 나왔구요....마이크로 소프트사의 프론트페이지2000 도 쓸만하답니다. 나모웹 같은 경우 상용프로그램이라 돈을 주고 구입을 하셔야합니다. 프론트페이지2000 은 여러분이 윈도우를 쓰신다면 다 있을 거구요 단 오피스2000버전일 경우에만 말이죠^^ 기타 에디터로는 드림위버와 핫독 등이 있는데 보통 사람들이 많이 쓰는 게 나모웹, 프론트페이지 입니다. 요즘은 드림위버도 꽤 많이 쓰더군요^^ (필자는 프론트페이지2000을 사용하고 있답니다)

프로그램적으로 태그의 단점을 보완하기 위해 생긴 게 스타일시트 입니다. 스타일시트의 경우에는 제 홈페이지에 자세히 설명이 나와있는데 태그와 명령어가 거의 비슷해서 태그를 아는 사람이라면 스타일시트 역시 금방 배울 수 있습니다. 스타일시트는 태그가 가장 큰 단점인 단순노동 식의 작업을 css파일을 하나 만들어 거기에 전체적인 웹 페이지에 공통되는 사항을 적어주어 파일을 웹 페이지에 링크시키는 식으로 해서 한 개의 파일로 여러 개의 웹 페이지에 공통되는 효과를 낼 수 있습니다.

그리고 기타 태그에 단점으로는 너무 정적이라는 겁니다. 단지 이미지와 텍스트뿐만 있을 뿐이죠^^ 요즘 세상이 멀티미디어세상 인데 단순히 글자와 그림만 있다면 사람들이 읽기가 싫어지겠죠^^ 그래서 생긴 게 다이나믹 html, 자바 스크립트, 자바애플릿, cgi 등이 있습니다.

다이나믹html 의 경우는 필자도 아직 배워보질 않아서 잘은 모르지만 서버에 의지하거나 추가적인 프로그램에 의존하지 않으면서도 사용자가 반응할 수 있는 것으로서 html, css, 레이어, dom이 서로 합해져서 생긴 생성물로 스크립트 언어를 이용해 이것들을 사용자 임의대로 조절해 줄 수 있는 기술입니다

자바 스크립트와 자바애플릿의 경우에는 브라우저 자체적으로 동적인 효과를 낼 수 있는 기술입니다. 처음 배우시는 분이 시라면 좀 어려워서리 초보자들이 배우기가 힘이 듭니다. 대신 효과만큼은 다양하고 멋진 효과를 낼 수 있죠^^

그리고 마지막으로 cgi 의 경우에는 여러분이 웹 서핑을 하다 보면 게시판이나 방명록 등이 있잖아요^^ 그게 바로 cgi 를 이용해서 서버측과 클라이언트 측이 상호 대화를 할 수 있게 해주는 거죠^^ 홈페이지에 없어서는 안되는 거죠..하지만 이거 역시 초보분들은 배우시기가 까다롭답니다.

대충 태그와 기타 프로그래밍어 들을 살펴봤는데 웹 페이지를 만들기 위해서는 먼저 태그를 배우셔야 한다는 점을 말하기 위해서 설명을 드린 겁니다. 태그를 모르신다면 위에 설명한 프로그래밍어들은 당연히 배우실 수가 없습니다. 더하기 빼기 도 못하는 데  인수분해나 미적분 같은 걸 할 수가 없는 거와 마찬가지죠^^

그리고 요즘은 대화방에서도 태그를 많이 사용합니다. 원래의 목적은 아니지만 요즘 채팅이 네티즌에게 가장 인기가 있기 때문에 대화방에서 태그를 이용한 화려한 효과를 선보인다면 다른 사람들이 부러워 하겠죠^^ 하지만 그에 대한 부작용도 심해서 일부 몰지각한 사람들에 의해 태그가 오히려 채팅 방에 해가 되는 경우도 많습니다. 우선 태그를 많이 사용하면 채팅 방의 속도가 떨어집니다. 모뎀사용자의 경우라면 다운되는 경우까지 생기지요. 또한 태그와 자바를 이용한 "폭"이란 걸 만들어 다른 사람들에게 피해를 주는 경우가 많습니다. 퍽이란 애초 대화방에서 몹쓸 짓을 하는 사람을 내쫓기 위해 사용됬으나 워낙 퍼지다 보니 대화방이 혼란스럽게 되는 역효과를 내고 말았답니다. 폭에 대해서 서버측에서 주기적으로 대응을 하고 있으나 그때마다 신종 폭들이 개발(?)되어 많은 채터들을 괴롭히고 있습니다. 필자가 언제가 강조하는 거지만 " 폭 절대 남용하거나 과용하지 맙시다" 폭 없는 대화방을 위해서.........

앞에서 기본적인 원리에 대해서 간단하게 설명을 했지만 여기서 다시 설명을 하고자 한다. 그만큼 기본을 알아야 나중에 홈페이지 제작에 있어서나 대화방에서 실수를 범하지 않기 때문이다.
태그에 기본적인 모양은 <태그명령어>하고픈 말</태그명령어>이다. 단순히 <태그명령어>만 있는 태그도 있으나 대부분의 태그는 <>내용</>형식을 갖는다.  간단한 예를 들어보자^^
  
태그입력 출력
<marquee>태그매니아</marquee>태그매니아
태그매니아태그매니아

태그매니아태그매니아
태그매니아태그매니아
짜근넷짜근넷


위에서 보시다시피 먼저 태그는 <태그명령어>내용</태그명령어>☜이처럼 이루어지는 걸 볼 수 있다. 네번째 예를 보면 ☜이 부분에서 font 라는 태그에 color="red" 라는 것이 붙는데 이걸 태그에 속성이라고 한다. 단순히 태그명령어로 만으로는 효과적으로 표현할 수 없기 때문에 주로 사용되는 태그명령어에는 예외 없이 이러한 속성을 갖는다. 다섯번째 예에서 역시 href 라는 속성을 갖는다. 그리고 이러한 태그 역시 예외 없이 , 로서 끝맺음이 되는 것을 알 수 있다.  만약 태그 끝에 </태그명령어>를 붙여주지 않는다면 어떻게 될까? 가장 초보들이 잘 범하는 실수 중 하나인데 먼저 전제된 태그의 효과가 그 전제된 시점부터 웹 페이지의 마지막 부분까지 미치게 된다. 대화방의 경우는 font 태그는 상관없는데 그 외의 태그 같은 경우에는 대화방에서 당신이 나갈때까지 그 효과가 지속된다. 그러므로 대화방에 상당한 혼란을 줄게 된다. 그와 동시에 심하면 방장으로부터 강제퇴장을 당하는 사태도 벌어질 수도 있다.^^ 그러니 끝맺음을 꼭 해주자.....

그런데 이러한 태그에 기본원리를 무시하는 태그가 일부 있다. meta, hr, img, bgsound, embed 등의 태그는 혼자 단독으로 사용되는 태그들이다. 물론 속성이 없다는 이야기가 아니다. </태그명령어>가 필요 없다는 이야기이다.

자~~!! 이제 태그에 기본원리는 배웠다. 이제부턴 태그에 대해서 본격적으로 배워보자^^ 본격적인 건 필자의 홈페이지에서 분야별로 나누어서 태그에 대해 설명해 놓고 있다. 그곳을 이용하자^^

그런데 여기서 중요한 점이 하나 있다. 단계별 강좌를 보면서 꼭 기억하고 있어야 할 사항이 몇 가지 있다. 첫째...눈으로 보지만 말구 직접 태그연습장을 가지고 실제로 해보자.....눈으로 봐서는 이해가 안되지만 직접 해봄으로써 이해될 수 있는 것들이 많다. 둘째.... 모르면 물어보자....태그매니아 홈페이지 내에 있는 질문과 답변 게시판을 이용해라....이용하기 전에 자주 묻는 질문과 답변에서 반드시 자기가 찾고 있는 답이 있는지 확인해보고 없으면 질문하자.... 셋째.....태그매니아 홈페이지는 태그에 모든 것이 다 수록되있지 않다. 될 수 있는 대로 더 많은 정보를 제공할려고 노력은 하고 있으나 부족한 점이 아직도 많이 있다. 그러니 웹뿐만 아니라 책이나 학원에서 공부를 하자.....현실적으로 웹쪽으로 길을 가자고 하는 사람은 학원을 다니는 게 좋을 것이다. 그렇지 않고 취미 삼아 배우는 사람은 태그나 홈페이지 제작에 대한 다양한 책들을 찾아보고 배우길 바란다.    


예제 : http://www.eduitbank.ne.kr , http://www.itbank.ne.kr