정보창고/블로그 정보

2.태그의 기본구조

풍란의 향기 2012. 2. 8. 12:59

제일 먼저 HTML 이라는 문서가 어떻게 구성이 되어 있는지 아주 간단하게 알아 보겠습니다.

<html>
<head>
<title> 웹 페이지의 제목 </title>
</head>
<body>

웹 페이지의 본문입니다.
</body>
</html>

맨 처음에 나오는 <html> 태그는 브라우저에게 이 문서가 HTML 문서임을 알려주는 것이므로 반드시 필요합니다. 마찬가지로 마지막에 </html> 이라는 태그가 있는데 이것은 브라우저에게 문서가 끝났음을 알려주는 태그입니다.

<head></head> 사이에는 문서의 제목을 정의하는 <title> 태그나 문서의 스타일을 정의해주는 <style> 태그를 정의해 주는 부분으로서 대부분 이곳에는 문서의 제목을 표시하는데 사용합니다.

<title> 태그는 설명했다시피 문서의 제목을 적어주는 곳이며적어주는 방법은 <title></title> 사이에 적당한 제목을 적어주면 됩니다.

<body> 태그는 문서의 본문을 정의해주는 부분입니다. 즉, <body> 로 정의해주면 브라우저에게 이곳부터 문서의 본문이라는 것을 알려주는 역할을 하는 것입니다.

그리고 참고적으로 태그에는 단독 태그와 복합 태그가 있는데 위의 경우에 나열한 태그들은 전부 복합 태그입니다. 다시 말해서 복합 태그라는 것은 그 태그가 사용될때 시작과 끝을 알려줄 필요가 있을때 사용하는 태그들입니다.

예를 들어보자면 <html> 태그 같은 경우는 브라우저에게 문서의 시작과 끝을 알려주어야 하므로 항상 <html></html>이 동시에 사용이 되어져야 합니다. 즉, "/ "(슬래시) 를 붙이게 되면 그 태그가 종료되었음을 알려주는 것입니다.

이와는 반대로 단독으로 태그가 사용되어 지는 경우가 있는데 나중에 배우게 되겠지만, 이미지를 삽입하고자 할때 사용되어 지는 태그인 <img> 같은 태그는 단독 태그 입니다.

즉, <img> 태그는 브라우저에게 이미지를 추가 하겠다는 것을 지정만 해주면 되므로 </img> 같은 태그가 필요가 없는 것입니다. 이렇듯 단독 태그와 복합 태그를 구분짓는 방법은 무작정 외우시면 머리만 복잡해 지므로 논리적으로 생각을 해보셔서 이해를 하시면 되겠습니다.

위에서 예로 든 문서는 HTML 에 충실하게 작성된 가장 기본적인 형태의 웹페이지이고, 앞으로 배워야 할것들은 저기에 어떠한 양념을 곁들여서 보기좋게 만드는냐 하는 것만을 배우면 되는 것입니다.

 태그에 기본적인 모양은 <태그명령어>하고픈 말</태그명령어> 이다. 단순히 <태그명령어> 만 있는 태그도 있으나 대부분의 태그는 <>내용</> 형식을 갖는다.  간단한 예를 들어보자^^
 

태그입력 출력
<marquee>마퀴태그</marquee> 마퀴태그
<b>글자굵게</b> 글자굵게
<center>중간에 위치</center>
중간에 위치
<font color="red">빨간글자</font> 빨간글자
<a href="http://blog.daum.net/jinojino/">막둥이네</a>

막둥이네

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