위치를 지정할 수 있는 것은 글자, 문단, 이미지, form, Applet, Plug-in등 모든 것입니다. 근데, W3C 문서에는 모든 택에 지정할 수 있다고 하지만 브라우저에 따라서 지정할 수 있는 택의 종류가 제한적이고 서로 다른 종류의 택을 사용합니다. nn4, ie4의 두 브라우저에는 아래의 택을 사용할 수 있습니다.
| ie4에서 사용할 수 있는 택입니다.
APPLET BUTTON DIV EMBED FIELDSET HR IFRAME IMG INPUT MARQUEE OBJECT SELECT SPAN TABLE TEXTAREA |
| nn4에서 사용할 수 있는 택입니다.
ADDRESS B BIG BLOCKQUOTE CENTER CITE CODE DIR DIV DL EM FONT H1 H2 H3 H4 H5 H6 I KBD MENU OL P PRE S SAMP SMALL SPAN STRIKE STRONG SUB SUP TABLE TD TH TT U UL (A는 좌표는 지정되나 링크가 작동하지 않음.) |
ie4와 nn4가 서로 다른 택에 position을 지정할 수 있습니다. 각 브라우저가 지원하지 않는 택에 position을 지정하기 위해서는 지원하지 않는 택을 같이 지원하는 택 안에 넣어주면 됩니다. 위의 공통으로 사용가능한 <DIV>, <SPAN>은 HTML4.0에 추가된 택으로 <B> 처럼 글자를 굵게하는 택 자체의 기능이 없는 다른 택을 여러개 포함할 수 있는 택입니다. <DIV>는 block 택으로 <SPAN>은 inline 택으로 사용됩니다.
이 2개의 택에 다른 택을 넣고 2개의 택에 style을 지정하면 position 뿐만이 아니고 모든 style을 지정할 수 있습니다. 그래서 style을 사용하기 위해서는 <DIV>, <SPAN> 2개의 택만으로도 전체 페이지를 만들수가 있습니다.
nn4에서는 <IMG>택에 지정할 수 없으므로 같이 지원하는 <SPAN> 택에 넣어주면 됩니다.
<SPAN style="position: absolute; left:10px; top:10px"><IMG src="image.gif"></SPAN>
position 요소와 같이 사용해야 하는 요소는 z-index, top, right, bottom, left 입니다. position 요소는 기본적으로 block, inline 같은 모든 택에게 지정할 수 있기 때문에 position을 지정하고 visibility, clip, background, width 같은 요소를 같이 지정하여 더 재미있는 것을 만들 수 있습니다.
z-index를 사용하여 여러층으로 구현할 수 있고 visibility로 감추고 보이고할 수 있고 JavaScript를 사용하여 좌표, z-index 층, visibility로 보이고 감추고 등의 DHTML 기능을 낼 수 있습니다.
position 요소에 지정할 수 있는 값은 아래의 4가지입니다.
- static
- relative
- absolute
- fixed
|
static
|
기본값으로 페이지를 작성한 위치에 위치합니다. 이것을 지정시 left, top는 듣지 않습니다.
|
relative
|
static과 비슷하게 작성한 위치에 있지만 left, top으로 작성한 위치에서 좌표를 지정할 수 있습니다.
span { position: relative; top: -10px }로 하면 SPAN 택을 10px 만큼 위로
이동시킵니다. 그래서 줄에서 약간 위로 올라온 글이 됩니다. 좌표를 지정한 택의 내용은 페이지 본문 위에 옵니다. 그래서, 밑에 있는 다른
내용이 보이지 않을 수 있기 때문에 알맞은 좌표값을 지정해야 합니다. |
absolute
|
절대 좌표로 위치 시킵니다. 자신의 상위의 왼쪽 위 꼭지점이 left:0px, top:0px의 좌표입니다.
#abs { position: absolute; left:200px; top:100px }로 지정하면 "#abs" ID
속성을 지정한 택은 페이지 오른쪽으로 200px 아래로 100px만큼 이동하여 위치합니다.
position: absolute;를 지정한 택의 좌표값은 상위 안에서 위치합니다. 다른 css 요소의 상위와는 다르게 position: absolute;나 position: relative; 를 지정한 택만이 상위가 됩니다. 이 상위에서 부터 좌표값을 지정합니다. 만약, position: absolute;나 position: relative; 를 지정한 택이 상위에 없다면 상위는 페이지, 즉 BODY가 됩니다.
<HTML>
<HEAD>
<TITLE>position에서의 좌표 이해</TITLE>
</HEAD>
<BODY>
<DIV id="div1">
<P id="p1">p1 택의 내용입니다..
<SPAN id="span1">span1 택의 내용 입니다.</SPAN>
</P>
</DIV>
</BODY>
</HTML>
위의 예에서 id="span1" 으로 "span1"이라는 이름을 가지고 있는 <SPAN> 택의 상위는 "p1" 입니다. #span1 { position: absolute; left: 100px; top: 100px }
"span1" 이름의 id를 가지고 있는 <SPAN> 택에게 position:absolute; 를 지정했습니다. 그래서
상위에서 position:absolute 나 position:relative; 를 지정한 택이 있다면 그것이 <SPAN>의 상위가
됩니다. position:static은 상위가 되지 않습니다.
<SPAN>위의 <P>나 <DIV>가 position:absolute 나 position:relative;이 없기 때문에 <SPAN> 의 상위는 페이지 즉, body가 됩니다. 그래서 "span1 택의 내용 입니다." 가 페이지에서 left:100px; top:100px;의 위치에서 시작합니다.
#div1 { position: absolute; left: 50px; top: 50px }
#span1 { position: absolute; left: 100px; top: 100px }
style을 위와 같이 span1과 div1 에게 모두 지정하면 이제 <SPAN> 택의 상위는 id="div1"
<DIV> 택이 됩니다. 즉, span1 은 "div1" <DIV> 택안에서 left:100px, top:100px 의
좌표에 위치합니다. 그래서 페이지 전체에서 보면 상위 "div1" 의 left:50px, top:50px 와 함께 실제 페이지에서는
left:150px, top:150px 에서 보이게 됩니다.
다른 값과는 다르게 이 값을 지정하면 페이지의 공간을 확보하지 않아서 다른 내용의 위에 위치합니다. 그래서 밑이 내용이 보이지 않을 수
있습니다. 좌표값을 알맞게 지정해야 합니다.
|
fixed
|
프레임 페이지처럼 페이지 scroll에 상관없이 고정시킵니다. nn4, ie4에서 지원하지 않습니다.
#fix { position: fixed; left:50%; top: 0px }로 하면 수평으로 페이지 절반, 가장 위에
위치 시킵니다. 그리고 페이지 scroll bar로 페이지를 움직여도 이것은 움직이지 않고 고정되어 있습니다. |
position과 margin,
float
|
position을 지정한 택에도 border, padding 그리고 상위와의 거리를 두는 margin 값이 듣기 때문에 이들의 값도 좌표값에 더해집니다.
#D1 { position:absolute; margin-left:100; top:0; left:100; }으로 하면
200px의 위치에 있습니다. 하나의 택에는 잘 작동하지만 position을 지정한 택이 position을 지정한 택을 가지고 있을 때,
nn4에서 상위의 margin 값이 하위에게 듣지 않습니다. #D1 { position:relative; margin-left:50%}
#D2 { position:absolute; left:50px; }
<div id=D1>D1
<div id=D2>
D2
</div>
</div>
로 하면 상위 "D1" ID를 가진 div 택은 페이지 넓이 절반의 좌표로 이동하고 하위 div인 "D2" 가 절반에서 오른쪽으로
50px만큼 더 이동합니다. 하지만, nn4에서는 상위의 margin이 듣지 않습니다. 그래서 넓이가 400px 크기의 페이지라면 ie4에서는
D2가 left 좌표 250px에 있고 nn4는 50px에 있습니다.
그리고 position과 float를 같이 지정시 다른 값은 float가 듣지만 position:absolute; 를 지정하면 float는
듣지 않습니다. 오로지 자신의 좌표값으로만 위치합니다.
|
nn4에서 창 크기 변경
|
nn4에서 position을 지정한 페이지를 창의 크기를 변경하면 잘못된 형식으로 나옵니다.
window.onmove = new Function("setTimeout('self.location.reload()', 2000)")
나
window.onresize = new Function("setTimeout('self.location.reload()', 2000)")
의 JavaScript 코드를 넣어주면 원래의 구성을 복구 합니다. onresize 이벤트는 페이지의 크기에 따라서 오작동하는 경우가
있기 때문에 onmove 이벤트가 안전합니다. |
Tip 1
|
position:absolute; 를 지정하고 left, top을 기본값인 'auto'를 지정하면 ie4에서는 작성한 위치에 위치하고 nn4는 0px로 지정합니다. left, top을 아예 지정하지 않으면 'auto'로 작동하지 않고 두 브라우저에서 position: relative; 를 지정한 것과 비슷한 작동을 합니다.
#D1 { position: absolute; }left, top을 지정하지 않고 position:absolute; 만
지정하면 페이지에서 상대적인 배치가 됩니다. 그래서 position: relative; 로 지정한 것과 같은 좌표로 나옵니다. 다만,
absolute는 다른 본문의 내용의 위에 옵니다. 이것은 <br> 로 적당히 조절을 하면 됩니다.
이것의 좋은점은 nn4같은 경우 position: relative; 를 지정한 css-p는 mouseover, mouseout 같은 이벤트가 듣지않는 JavaScript 버그가 있는데 position: absolute로 이벤트를 지정할 수 있고 상대적인 배치를 하기 때문에 다른 페이지의 본문과 알맞은 위치로 css-p의 배치할 수 있습니다.
출처 : http://user.chollian.net/~spacekan/css/positionRef.htm
티스토리 스킨을 바꾸고 이것저것을 수정하려고 하니...
예전같지 않아서 뭐가 뭔지 생소한 부분이 너무 많다는...-_-;;