¹®¼ °èÅëµµ»ó ´ÙÀ½¿¡ À§Ä¡ÇÑ °³Ã¼ÀÇ ¿ÞÂÊ ¸ð¼¸®¿¡¼ ÇØ´ç °³Ã¼ÀÇ ¿ÞÂÊ À§Ä¡±îÁöÀÇ °Å¸®¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
auto | µðÆúÆ®À̸ç, ÀϹÝÀûÀÎ HTML ÆäÀÌÁöÀÇ ·¹À̾ƿô»ó µðÆúÆ® À§Ä¡ÀÌ´Ù. |
(±æÀÌ) | ºÎµ¿¼Ò¼öÁ¡¼öÄ¡ ´ÙÀ½¿¡ cm, mm, in, pt, pc³ª px µî ±æÀÌ ´ÜÀ§°¡ µû¸£´Â Àý´ë ±æÀÌ, ȤÀº em or ex µîÀÇ ´ÜÀ§°¡ µû¸£´Â »ó´ë ±æÀÌÀÌ´Ù. CSS ±æÀÌ´ÜÀ§¸¦ ÂüÁ¶Ç϶ó. |
(¹éºÐÀ²) | Á¤¼ö°ª¿¡ ¹éºÐÀ² ±âÈ£(%)¸¦ ºÙÀÎ °ÍÀÌ´Ù. ÀÌ °ªÀº ¸ðü ³Êºñ¿¡ ´ëÇÑ ¹éºÐÀ²ÀÌ´Ù. |
ÀÌ ¼Ó¼ºÀº currentStyle¿¡¼´Â ÀбâÀü¿ëÀÌ°í, ±×¿ÜÀÇ °³Ã¼¿¡¼´Â Àбâ/¾²±âÀ̸ç, µðÆúÆ®°ªÀº autoÀÌ´Ù.
CSS(Cascading Style Sheets) ¾ÖÆ®¸®ºäÆ®´Â »ó¼ÓµÇÁö ¾Ê´Â´Ù.
left ¾Ö¸£¸®ºäÆ®¸¦ »ç¿ëÇϱâ À§Çؼ´Â position ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇ¾î ÀÖ¾î¾ß Çϸç, ±×·¸Áö ¾ÊÀ¸¸é left ¾ÖÆ®¸®ºäÆ®´Â ¹«½ÃµÈ´Ù.
left ¼Ó¼ºÀÇ °ªÀº ¹®ÀÚ¿À̹ǷÎ, ÀÌ ¼Ó¼º°ªÀ» ½ºÅ©¸³Æ®ÀÇ °³Ã¼ÀÇ À§Ä¡ °è»ê¿¡ »ç¿ëÇÒ ¼ö ¾ø´Ù.
´ë½Å pixelLeft ¼Ó¼ºÀ̳ª posLeft ¼Ó¼ºÀ» »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.
°³Ã¼ | script | CSS | IE ¹öÀü |
---|
ÀÌ ¼Ó¼ºÀº CSS2(Cascading Style Sheets Level 2)¿¡ Á¤ÀǵǾú´Ù.
position:relative; ¼³Á¤°ú left ¾ÖÆ®¸®ºäÆ®¸¦ ÀÌ¿ëÇÏ¿© À̹ÌÁö °³Ã¼ÀÇ À§Ä¡¸¦ Á¶Á¤ÇÑ´Ù.
<STYLE>.divObj button{width:80}</STYLE> <DIV style="border:solid 1 red;width:480"><IMG id=imgObj src=../../gif/tulip.gif style="position:relative;left:100"></DIV> <DIV class=divObj style=white-space:nowrap> <BUTTON onclick="imgObj.style.left='-30px';">-30px</BUTTON> <BUTTON onclick="imgObj.style.left='0';">0</BUTTON> <BUTTON onclick="imgObj.style.left='4cm';">4cm</BUTTON> <BUTTON onclick="imgObj.style.left='200px';">200px</BUTTON> <BUTTON onclick="imgObj.style.left='80%';">80%</BUTTON> <BUTTON onclick="imgObj.style.left='auto';">auto</BUTTON> </DIV>