Style 요소 다루기
../

1 / 2 / 3

어떤 이미지에 마우스를 올리면 다른 이미지를 바꾸는 것은 예전에 많이 보았을 것입니다. 링크 택 안에 이미지를 두고 링크의 이벤트인 mouseover, mouseout 로 이미지를 바꾸어 줄수 있습니다.

DHTML을 사용한다면 이미지 뿐만이 아니라 글자의 모양, 색, 그리고 block의 바탕색등을 바꿀수 있어 더 재미있는 효과를 낼수 있습니다. 이벤트도 mousedown, mouseup 같은 것이 많이 늘어서 더 다양한 효과를 낼수 있습니다.

이런 변화하는 동작을 하기 위해서 사용하는 방법은 style을 지정한 택의 style 값을 바꾸어 주는 것으로 할 수 있습니다. style은 기존의 HTML 택의 양식을 지정하는 것인데, 이 택에 지정한 style은 모두 Document Object Model(DOM)의 구조에 포함이 됩니다. Script로 이들의 DOM을 접근하고 제어할 수 있습니다. 다만, ie4, nn4에서 DOM의 구조가 많이 차이가 납니다. 

<div id=M1 style="position:absolute; width:300px; border: outset 4px blue;"
>MOUSEOVE, MOUSEOUT</div>
	
<script>
if(document.layers) {
  document.M1.onmouseover = new Function("this.bgColor = 'red'")
  document.M1.onmouseout = new Function("this.bgColor = 'aqua'")
}
else if(document.all) {
  document.all.M1.onmouseover = new Function("this.style.backgroundColor = 'red'")
  document.all.M1.onmouseout = new Function("this.style.backgroundColor = 'aqua'")
}
</script>
MOUSEOVER, MOUSEOUT



위의 border가 있는 css-p 레이어에게 마우스를 올리고 치우면 레이어의 바탕색이 바뀝니다. position:absolute 를 지정한 레이어의 이벤트 mouseover, mouseout로 레이어의 바탕색을 바꾸어서 이런 동작을 합니다.

nn4, ie4에서는 block의 바탕색을 지정시 background-color 요소로 지정합니다. 하지만, 이것이 DOM의 구조에서는 ie4는 backgroundColor로 nn4에서는 bgColor로 이름 지어져 있습니다. 보통 style에 지정한 요소가 DOM의 이름을 가지는 구조는 dash(-)를 빼고 다음의 요소 이름을 대문자로 하여 각 DOM의 이름을 가집니다. 이것이 일반적인 구조고 W3C의 권고 사항도 마찬가지입니다. 하지만, nn4에서는 CSS를 지원하기 시작한 때부터 <LAYER>란 택을 같이 사용하기 시작했습니다. 이 <LAYER> 택은 nn4에서만 지원하는 확장택입니다. 이 택에 bgcolor란 속성이 레이어의 바탕색을 지정하는 요소입니다. 그리고 nn4는 DOM의 구조를 이 택의 속성으로 nn4에서 사용하기 시작했습니다. 

<LAYER name="M1" bgColor = "red">...</LAYER>
이런 역사(?)가 있기 때문에 ie4의 backgroundColor, nn4의 bgColor 같은 다른 이름의 DOM 요소가 생기게 되었습니다. 그리고 nn4에서는 모든 DHTML 동작을 이 <LAYER> 택에 집중했습니다. <LAYER> 택과 같은 개념의 position CSS요소를 지정한 CSS-P를 사용하여 모든 DHTML 효과를 사용할 수 있게 제한 하였습니다. 반면에, ie4에서는 css-p 뿐만이 아니고 모든 택의 style을 다룰수 있게 했습니다. 그래서 ie4에서는 위의 레이어의 position 요소를 넣지 않아도 잘 동작합니다. 
<div id=M1 style="width:300px; border: outset 4px blue;"
>MOUSEOVE, MOUSEOUT</div>
style에서 position:absolute; 를 빼주어도 ie4에서는 위의 방식과 같은 동작을 합니다. 반면에 nn4는 <LAYER> 택과 같은 동작을 하는 position:absolute; 를 지정한 css-p로 사용해야만 JavaScript 1.2에서 추가된 이벤트를 사용하고, DOM의 구조를 접근할 수 있습니다.

제 페이지 "DHTML" 처음 페이지 맨 아래에 보면 아래의 말을 적어 놓았습니다. 

DHTML = CSS-P + JavaScript 1.2
작년(98년) 5월 쯤에 뉴스넷 han.comp.www.authoring 그룹에서 이런 토론을 한적이 있었는데 그때 이렇게 적어 놓았습니다. 그리고 아직도 이것을 바꾸지 않고 있습니다. 사실은 틀린말입니다. (이 대목에서 누군가 불만이 많을줄 압니다. :)

정확히 적는다면 DHTML = HTML + CSS + Script 라고 해야할 것입니다. HTML은 웹 페이지에 사용하는 언어기 때문에 별 문제가 없지만 Script는 VBscript, JScript, JavaScript를 예로 들 수 있습니다. 하지만, VBscript, JScript는 ie에서만 지원하는 script언어이고 nn, ie 둘다 지원하는 script는 JavaScript입니다. 그리고 CSS를 CSS-P로 적은 것은 위에서 말한 것처럼 nn4는 <LAYER> 택과 같은 동작을 하는 CSS-P로만이 DHTML로 접근할 수 있기 때문이었습니다. 무엇이 표준인가..? 이것이 궁금하지는 않죠? 저도 마찬가지입니다.

1 / 2 / 3



T O P