레이어 상대적인 위치로 배치하기 | ../ |
position이 페이지에서 특정 요소를 배치하고 두 브라우저에서 공통으로 DHTML 효과를 내게할 수 있기 때문에 CSS-P로 사용하여 두 브라우저의 차이점을 극복해야 합니다. position에 지정할 수 있는 style 값도 여러가지가 있지만 absolute, relative 2개의 값을 사용할 수 있습니다. static, fixed 같은 다른 값은 사용효과가 나지 않기 때문입니다.
absolute는 상위에서 절대위치로 배치하는데 상위가 position을 지정한 택일 경우 그것이 상위가 되고 상위에 position을 지정한 택이 없다면 페이지인 <BODY> 택이 상위가 됩니다. relative는 상대적인 위치로 배치됩니다. 상위의 개념은 마찬가지입니다. 상위의 위치를 기준점으로 해서 페이지에 원래 있던 위치에서 지정한 left, top 값을 더해서 배치됩니다.
absolute, relative를 지정한 css-p에서도 nn4는 relative를 지정한 레이어에는 이벤트가 듣지않는 꽤 중대한 버그가 있습니다. 그래서 relative를 지정한 레이어는 페이지에서 배치할 수 있지 이벤트를 지정할 수 없습니다. 하지만 궁하면 통한다고 이 문제를 극복할 수 있는 몇 가지 해결책이 있습니다. 이 페이지에서는 이 문제를 다루겠습니다.
position: absolute는 절대적인 위치로 배치하는 값이지만 left, top 값을 지정하지 않으면 페이지에서 상대적인 위치로 배치됩니다.
<body> <table width=100 height=200> : : </table> <div id=D1 style="position: absolute> D1 레이어 내용 </div>으로 하면 "D1 레이어 내용"이 페이지에서 table 바로 아래에 옵니다. 즉, left, top 값을 지정하지 않으면 relative를 지정한 것과 비슷한 작동합니다. 이것은 ie4도 마찬가지 입니다. 그래서 특정 레이어를 페이지에서 다른 내용과 상대적인 위치로 배치할 수 있고 이벤트를 직접 지정할 수 있습니다. 절묘한 공통분모입니다.
근데, 이것도 table 같은 택 안에서는 이렇게 작동하지 않고 무조건 left:0, top:0 으로 지정됩니다. 그래서 table 같은 택안에서 레이어를 배치하기 위해서는 relative 를 지정할 수밖에 없습니다. 그럼, 이벤트를 지정할 수 없는데 무슨 ys담 이냐고요? ys담?? 넘어가죠..
relative를 지정한 레이어에 이벤트를 지정하기 위해서는 레이어 안에 링크같은 것으로 동작을 시키거나 아니면 다시 안에 absolute; 만을 지정한 레이어를 넣어주는 방법입니다. 그러면 비슷한 효과를 낼 수 있습니다.
<table> <tr> <td onMouseOver="ie4용 JavaScript 구문"> 내용 </td> </tr> </table>위의 방식처럼 ie4에서는 table 택의 tr, td 택에도 마우스 이벤트를 지정할 수 있습니다. 하지만 nn4에서는 css-p로 만이 이런 동작을 낼 수 있습니다. 이것을 같은 식으로 동작시키기 위해서는 아래로 사용할 수 있습니다. 다소 복잡하지만 같은 동작을 합니다. 아래는 위의 실행하기 예제에서 사용한 table입니다.
<TABLE border=1> <TR><td width=200> <div id=D1><div id=D4>레이어 1</div></div> </td></TR> <TR><td width=200> <div id=D2><div id=D5>레이어 2</div></div> </td></TR> <TR><td width=200> <div id=D3><div id=D6>레이어 3</div></div> </td></TR> </TABLE>table 안에 레이어를 두고 동작 시키기 위해서 두개의 레이어를 사용했는데 바깥에 있는 레이어는 relative로 배치를 하고 안에 있는 레이어에 이벤트를 지정하여 바탕색을 바꾸는 동작을 합니다. 지정한 style은 아래입니다.
#D1, #D2, #D3 { position: relative; width:200; height:20; }
#D4, #D5, #D6 { position: absolute; width:200; left:0; top:0}
각각의 레이어에게 relative, absolute로 지정합니다. width:200은 td 택에 지정한 것과 같은 크기를 지정하면
그 크기만큼 레이어가 적용됩니다. height는 ie4에서 td 택 안에서 공간을 확보합니다. 그리고 <body
onLoad="init()">로 이벤트를 지정합니다. 지정한 이벤트는 아래입니다.
function init() {
if(n4) {
document.D1.clip.right=200
document.D1.document.D4.clip.right=200
document.D2.clip.right=200
document.D2.document.D5.clip.right=200
document.D3.clip.right=200
document.D3.document.D6.clip.right=200
document.D1.document.D4.onmouseover = new Function("this.bgColor = 'aqua'")
document.D1.document.D4.onmouseout = new Function("this.bgColor = 'yellow'")
document.D2.document.D5.onmouseover = new Function("this.bgColor = 'aqua'")
document.D2.document.D5.onmouseout = new Function("this.bgColor = 'yellow'")
document.D3.document.D6.onmouseover = new Function("this.bgColor = 'aqua'")
document.D3.document.D6.onmouseout = new Function("this.bgColor = 'yellow'")
}
else if(e4) {
D4.onmouseover = new Function("this.style.backgroundColor = 'aqua'")
D4.onmouseout = new Function("this.style.backgroundColor = 'yellow'")
D5.onmouseover = new Function("this.style.backgroundColor = 'aqua'")
D5.onmouseout = new Function("this.style.backgroundColor = 'yellow'")
D6.onmouseover = new Function("this.style.backgroundColor = 'aqua'")
D6.onmouseout = new Function("this.style.backgroundColor = 'yellow'")
}
}
n4=(document.layers)?1:0
e4=(document.all)?1:0;
으로 각 position: absolute를 지정한 레이어에 이벤트를 지정합니다. nn4에서 clip.right를 준 이유는
레이어의 width 만으로는 지정한 크기로 되지 않고 clip을 같이 지정해야 원래의 크기가 나오기 때문에
넣어줍니다. ie4에서는 단순히 <td onmouseover="..." onmouseout="...">으로 지정하면
간단하지만 두 브라우저에서 같이 사용할려면 다소 복잡한 페이지가 됩니다.
이 페이지에서 중요한 것은 relative, absolute를 사용하는 방식입니다. 두 가지를 적절히 사용하면
nn4의 버그와 미약한 dhtml 지원을 ie4와도 같은 효과를 낼 수 있습니다.
--
낙서판의 질문을 받고 만든 페이지인데 별로 권하고 싶지않은 방법입니다. 엄청 복잡한 페이지가 되니까요.
아예 브라우저를 구분하여 따로 페이지를 만드는 것이 좋을 것입니다. 그래야 두 브라우저에서 css의 적용이
미세하게 차이가 나는 것을 극복할 수 있을 것입니다.