|
|
| |
·¹À̾îÀÇ »ó´ëÀ§Ä¡ ÁöÁ¤ ¹æ¹ý(position:absolute¿¡¼...) |
|
|
ȨÆäÀÌÁö |
20³â Àü
|
¼ºê¸Þ´º¿¡¼ âÀÇ Å©±â¿¡ µû¶ó ·¹À̾îÀÇ À§Ä¡°¡ ÁÖ¸Þ´º¿Í ÀÏÄ¡ÇÏÁö ¾Ê´Â °ÍÀ» ÇØ°áÇÏ´Â
¹æ¹ýÀ» ãÀ¸½Ã´Â ºÐÀÌ ¸¹À¸½Å °Í °°¾Æ ¹æ¹ýÀ» ¾Ë·Áµå¸®Áö¿ä..
¹æ¹ýÀº ¿©·¯°¡Áö°¡ ÀÖÁö¿ä...
ÁÖ¸Þ´º¸¦ ·¹À̾ ³Ö¾î¼ ÁÖ¸Þ´º ·¹À̾ ȸé Áß¾Ó¿¡ ¿À°Ô ÇÏ°í ³ª¸ÓÁö ¼ºê¸Þ´º¸¦
ÁÖ¸Þ´º ·¹À̾ÀÇ »ó´ëÀû À§Ä¡¿¡ µû¶ó À§Ä¡¸¦ °áÁ¤ÇÏ´Â ¹æ¹ý..
¾Æ´Ï¸é ÀÏÀÏÈ÷ ¼ºê·¹À̾îÀÇ À§Ä¡¸¦ »ó´ëÀûÀ¸·Î ÁöÁ¤ÇÏ´Â ¹æ¹ý µîµî..
ÀÌÁß¿¡ °£´ÜÈ÷ µÎ¹ø° ÀÏÀÏÈ÷ ÁöÁ¤ÇÏ´Â ¹æ¹ýÀ» Á»´õ °£´ÜÈ÷ ÇÏ´Â ¹æ¹ýÀ» ¾Ë·Áµå¸®¸é...
<style>
#Layer
{
position:absolute;
left:expression((document.body.clientWidth-this.style.width)/2-this.getAttribute("pos"));
}
</style>
ÀÏ´Ü ½ºÅ¸ÀÏ ½ÃÆ®¿¡¼ expression¸Þ½îµå·Î ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇÏ¿© ·¹À̾îÀÇ ÁÂÃø À§Ä¡¸¦
bodyű×, Áï ½ÇÁ¦¹®¼°¡ Ç¥½ÃµÈ ºÎºÐ ¸¸ÅÀÇ ³Êºñ¸¦ ÀÌ¿ëÇÏ¿© ȸé Áß¾ÓÀÇ À§Ä¡¸¦ ±¸ÇÕ´Ï´Ù.
º¸À̴ ȸéÀ» 1/2Çϸé Áß¾ÓÀÌ µÇ°ÚÁö¿ä..
(document.body.clientWidth-this.style.width)/2
À§¿Í °°ÀÌ ÇÏ´Â ÀÌÀ¯´Â ·¹À̾îÀÇ ³Êºñ¸¦ ȸé Å©±â¿¡¼ »©ÁÖ¾î¾ß ·¹À̾î ÁÂÃøÀÌ Áß¾ÓÀ¸·Î ºÎÅÍ
·¹ÀÌ¾î ³ÊºñÀÇ ¹Ý¸¸Å ¿ÞÂÊÀ¸·Î ´õ À̵¿µÇ¾î ȸé Á¤Áß¾Ó¿¡ ¿À±â¶§¹®ÀÌÁÒ..
±×¸®°í this.getAttribute("pos")´Â pos¶ó´Â »ç¿ëÀÚ ¼Ó¼º °ªÀ» ÀÐ¾î ¿À´Â °Ì´Ï´Ù.
·¹À̾´Ù µû·Î ¾ÆÀ̵𸦠ºÎ¿©ÇÒ ÇÊ¿ä¾øÀÌ ÇϳªÀÇ ¾ÆÀ̵ð·Î ÇÏ·Á°í »ç¿ëÇÏ´Â °ÔÁö¿ä..
±×·³ ½ÇÁ¦ ·¹À̾ Àû¿ëÇغ¸Áö¿ä..
¾Æ·¡Ã³·³ ±×³É ·¹À̾ ¸¸µå½Ã°í id¸¦ ¸ðµÎ µ¿ÀÏÇÏ°Ô Layer·Î ÁÝ´Ï´Ù.
pos´Â À§¿¡¼ ¸»¾¸µå¸° »ç¿ëÀÚ ¼Ó¼ºÀÔ´Ï´Ù.
ȸéÁß¾Ó¿¡¼ +°ªÀÌ¸é ¿ÞÂÊÀ¸·Î À̵¿½Ãų Çȼ¿°ªÀÌ°í -´Â ¿À¸¥ÂÊÀ¸·Î À̵¿½Ãų Çȼ¿°ªÀÌ µÇ´Â °ÍÀÌÁö¿ä.
±×·³ È®ÀÎÇѹø Çغ¸¼¼¿ä..
<div id=Layer pos=60>
¸Þ´º1
</div>
<div id=Layer pos=-30>
¸Þ´º2
</div>
<div id=Layer pos=0>
¸Þ´º3
</div>
<div id=Layer pos=100>
¸Þ´º4
</div>
¸Ó À̹ۿ¡ behavior¸¦ ÀÌ¿ëÇÏ´Â ¹æ¹ý(Ŭ·¡½º ÁöÁ¤¸¸À¸·Î ¼ºê¸Þ´º ±¸Çö°¡´É)µµ Àִµ¥..
Ãʺ¸ÀÚ¿¡°Ô´Â ¾î·Á¿ì´Ï À§¿¡ ¹æ¹ýÀ» ½áº¸½Ã°í Á»´õ °øºÎÇϽðí behavior¸¦ ÀÌ¿ëÇÑ ¹æ¹ýÀ»
»ç¿ëÇØ º¸½Ã´Â °Íµµ ÁÁÀ» µí Çϳ׿ä..
´Ü, À§ ¹æ¹ýÀº id°¡ ¸ðµÎ µ¿ÀÏÇϹǷΠmouseover/outÀ̺¥Æ® Çڵ鷯¸¦ Àû¿ëÇÒ¶§´Â ·¹À̾ ¹è¿·Î ÁöÁ¤Çϼż »ç¿ëÇÏ¼Å¾ß ÇÕ´Ï´Ù.
|
|
̵̧ : 467 |
̵̧
¸ñ·Ï
|
|
| |
|