조회 : 152

살로메님이 물으셨던-div태그에 대해서...


BY 태그도우미 2000-06-12

화려한 태그의 극치.(div 와 span 태그)

div와 span 태그는 예전에는 별로 사용되지 않은 태그입니다.
이유는 다른 태그로 대체할 수 있거나 사용하지 않았을 때와 차이가 없기 때문이죠.
한마디로 별로 인기가 없었던 태그들입니다...
그런데 최근 스타일시트를 이용한 DHTML 기법이 각광받음에 따라 주가가 치솟고 있죠...

1. DIV

div태그는 p태그처럼 문단을 나눠줍니다.
한 줄 내림(LineSkip)후에 빈 줄이 추가되지 않는 점을 제외하면
거의 기능면에서 흡사하다고 할 수 있죠.
(div)와 (/div)사이에는 거의 모든 HTML태그가 사용될 수 있습니다.

스타일 시트와 함께 DHTML 기법을 구현하기 위해서 주로 사용되죠.
아래는 div태그가 스타일시트, 자바스크립트와 어울려 사용된 한 예입니다.
넷스케잎과 익스플로러의 DHTML객체모형에 차이가 있기 때문에
익스플로러에서만 적용되지만, 왜 div을 사용하는 가에 대한 해답이 되리라 생각합니다.

예제---------------

<html> <br><head> <br><title>연습할 제목</title> <br></head> <br><body> <br><div style="font size:16"onMouseOver="this.style.fontSize=24"onMouseOut="this.style.fontSize=16"> <br>이곳에 커서를 가져오면? <br></div> <br></body> <br></html>


*div태그는 HTML의 기본형식에서 <body></body>사이에 들어갑니다.

예제결과커서를 가져가보세요!------------


연습할 제목


이곳에 커서를 가져오면?




* 위의 예제는 마우스를 글자 위에 올리면 글자크기를 24픽셀로 내리면 16픽셀로 만들어 주는 것입니다.
onMouseOver(Out)은 마우스를 올렸을 때(내렸을 때)
이를 처리해 주는 이벤트핸들러인데...
넷스케잎의 경우는 a, area, layer태그에서만 사용될 수 있으나
익스플로러에서는 div를 포함한 대부분의 태그에서 사용될
수 있습니다.

2. SPAN

span 태그는 "텅빈태그"라고 불리는 것으로... 일반적인
html용법으로만 사용한다면 말 그대로 아무런 의미를 가지
지 않습니다. 사용하거나 하지 않거나 차이가 없다는 것이
죠.

그렇지만 span도 div과 마찬가지로 스타일시트와 결합되면
막강한 위력을 발휘합니다. div과는 달리 라인을 분리하지
않는 곳에 사용한다는 점을 제외하면 사용법은 거의 동일하
다고 생각하면 됩니다. div의 사촌쯤 되는 셈이죠. 따라서
별도의 예제는 준비하지 않았습니다. 앞의 div 예제에서
div를 span으로 바꿔보도록 하세요.