![](/bink.gif) |
|
| ![](/bink.gif) |
|
![](icon/private_name/1.gif) |
13³â Àü |
Position Property
À¥ ÀÛ¼ºÀÚÀÇ ¿À·£ °í¹ÎÁß¿¡ Çϳª°¡ Á¤È®ÇÑ À§Ä¡·Î ÆäÀÌÁöÀÇ ±¸¼ºÀ» ÇÏ´Â°Í À̾ú½À´Ï´Ù. ÀÌ°ÍÀ» À§Çؼ´Â Åõ¸íÀ̹ÌÁö °°Àº °ÍÀ¸·Î À¥ ºê¶ó¿ìÀú¿¡ µû¸¥ º¸Á¤À» ÇÏ¿© ÀÛ¼ºÇß½À´Ï´Ù. ±×·³¿¡µµ ºÒ±¸ÇÏ°í ¸¸Á·ÇÒ ¸¸ÇÑ ´ë¾ÈÀº ¾ø¾ú½À´Ï´Ù. position À¸·Î ÀÌ°ÍÀÌ °¡´ÉÇÕ´Ï´Ù. ÁöÁ¤ÇÏ´Â À§Ä¡¿¡ ¹®¼ÀÇ Æ¯Á¤ ¿ä¼Ò¸¦ ¹èÄ¡ÇÒ ¼ö ÀÖ½À´Ï´Ù. ±×¸®°í ÀÌ·± ¹èÄ¡¸¦ ÀÌÁßÀ¸·Î ¹èÄ¡ÇÒ ¼ö ÀÖ°í À̹ÌÁö À§¿¡ ±ÛÀÚ¸¦ ¿Ã·Á³õÀ» ¼öµµ ÀÖ½À´Ï´Ù. script·Î À̵éÀÇ º¸¿©ÁÖ°í °¨Ãß°í À̵¿½ÃÅ°°í µîÀÇ ´Ù¾çÇÑ È¿°ú¸¦ ³¾¼öµµ ÀÖ½À´Ï´Ù. Á¤È®ÇÑ ÆäÀÌÁö¸¦ Ãâ·ÂÇÒ ¼ö ÀÖ´Â CSSÀÇ °·ÂÇÑ ±â´ÉÁßÀÇ ÇϳªÀÔ´Ï´Ù.
À§Ä¡¸¦ ÁöÁ¤ÇÒ ¼ö ÀÖ´Â °ÍÀº ±ÛÀÚ, ¹®´Ü, À̹ÌÁö, 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ÀÇ ¹èÄ¡ÇÒ ¼ö ÀÖ½À´Ï´Ù.
|
|
̵̧ : 403 |
̵̧
¸ñ·Ï
|
|
| ![](/bink.gif) |
|