DIV ¿µ¿ªÀÇ À§Ä¡ ÁöÁ¤ÇÏ´Â ¹æ¹ý°ú ½ºÅ©·Ñ - Àý´ëÀ§Ä¡(absolute), »ó´ëÀ§Ä¡(relative), °íÁ¤À§Ä¡(fixed) |
|
|
 |
9³â Àü |
¿µ¿ª1 : Position: fixed
ÀÌ°÷Àº DIV¿µ¿ªÀ̸ç, À§Ä¡¼Ó¼ºÀ» °íÁ¤À§Ä¡(Fixed, left, top)·Î ÁÖ¾ú´Ù.
âÀÌ ½ºÅ©·ÑµÇ¾îµµ ÀÌ ¿µ¿ªÀº °°ÀÌ ½ºÅ©·ÑµÇÁö ¾Ê°í °íÁ¤µÇ¾î ÀÖ´Ù.
Çȼ¿(px)ÀÇ ±âÁØÁ¡Àº âÀÇ ¿ÞÂÊ À§ ²ÀÁöÁ¡°ú DIV¿µ¿ªÀÇ ¿ÞÂÊ À§ ²ÀÁöÁ¡ÀÌ´Ù.
<div style="position: fixed;left: 220x;top: 200px;"></div>
¿µ¿ª2 : Position: fixed
ÀÌ°÷Àº DIV¿µ¿ªÀ̸ç, À§Ä¡¼Ó¼ºÀ» °íÁ¤À§Ä¡(Fixed, right, bottom)·Î ÁÖ¾ú´Ù.
âÀÌ ½ºÅ©·ÑµÇ¾îµµ ÀÌ ¿µ¿ªÀº °°ÀÌ ½ºÅ©·ÑµÇÁö ¾Ê°í °íÁ¤µÇ¾î ÀÖ´Ù.
Çȼ¿ÀÇ ±âÁØÁ¡Àº âÀÇ ¿À¸¥ÂÊ ¾Æ·¡ ²ÀÁöÁ¡°ú DIV¿µ¿ªÀÇ ¿À¸¥ÂÊ ¾Æ·¡ ²ÀÁöÁ¡ÀÌ´Ù.
<div style="position: fixed;right: 20px;bottom:20px;"></div>
¿µ¿ª3 : Position: absolute
ÀÌ°÷Àº DIV¿µ¿ªÀ̸ç, À§Ä¡¼Ó¼ºÀ» Àý´ëÀ§Ä¡(Absolute, left, top)·Î ÁÖ¾ú´Ù. âÀÌ ½ºÅ©·ÑµÇ¸é ÀÌ ¿µ¿ªµµ °°ÀÌ ½ºÅ©·ÑµÈ´Ù.
Çȼ¿(px)ÀÇ ±âÁØÁ¡Àº ÆäÀÌÁöÀÇ ¿ÞÂÊ À§ ²ÀÁöÁ¡°ú DIV¿µ¿ªÀÇ ¿ÞÂÊ À§ ²ÀÁöÁ¡ÀÌ´Ù.
<div style="position: absolute; left: 210px; top: 100px;"></div>
¿µ¿ª4 : Position: relative
ÀÌ°÷Àº DIV¿µ¿ªÀ̸ç, À§Ä¡¼Ó¼ºÀ» »ó´ëÀ§Ä¡(Relative, left, top)·Î ÁÖ¾ú´Ù. âÀÌ ½ºÅ©·ÑµÇ¸é ÀÌ ¿µ¿ªµµ °°ÀÌ ½ºÅ©·ÑµÈ´Ù.
Çȼ¿(px)ÀÇ ±âÁØÁ¡Àº <div>űװ¡ ÀÖ´Â ¹Ù·Î ±× ÁöÁ¡°ú DIV¿µ¿ªÀÇ ¿ÞÂÊ À§ ²ÀÁöÁ¡ÀÌ´Ù.
<div style="position: relative; left: 210px; top: 400px;"></div> |
|
̵̧ : 475 |
̵̧
¸ñ·Ï
|
|