¹®¼­ °èÅëµµ»ó ´ÙÀ½¿¡ À§Ä¡ÇÑ °³Ã¼ÀÇ ¿À¸¥ÂÊ ¸ð¼­¸®¿¡¼­ ÇØ´ç °³Ã¼ÀÇ ¿À¸¥ÂÊ À§Ä¡±îÁöÀÇ °Å¸®¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.

Àμö
cssSelector : (½ºÅ¸ÀÏ ¼±ÅÃÀÚ)
¼Ó¼ºÀ» °¡Áú¼ö ÀÖ´Â ¿¤·¹¸àÆ®()³ª Ŭ¶ó½º(class) À̸§ ȤÀº ÀνÄÀÚ(id)ÀÌ´Ù.

: (¼Ó¼º ¹®ÀÚ¿­)
½ºÅ¸ÀÏ ¼Ó¼ºÀº ¹®¼­ °èÅëµµ»ó ´ÙÀ½¿¡ À§Ä¡ÇÑ °³Ã¼ÀÇ ¿À¸¥ÂÊ ¸ð¼­¸®¿¡¼­ ÇØ´ç °³Ã¼ÀÇ ¿À¸¥ÂÊ À§Ä¡±îÁöÀÇ °Å¸®¸¦ ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

auto µðÆúÆ®À̸ç, ÀϹÝÀûÀÎ HTML ÆäÀÌÁöÀÇ ·¹À̾ƿô»ó µðÆúÆ® À§Ä¡ÀÌ´Ù.
(±æÀÌ) ºÎµ¿¼Ò¼öÁ¡¼öÄ¡ ´ÙÀ½¿¡ cm, mm, in, pt, pc³ª px µî ±æÀÌ ´ÜÀ§°¡ µû¸£´Â Àý´ë ±æÀÌ, ȤÀº em or ex µîÀÇ ´ÜÀ§°¡ µû¸£´Â »ó´ë ±æÀÌÀÌ´Ù. CSS ±æÀÌ´ÜÀ§¸¦ ÂüÁ¶Ç϶ó.
(¹éºÐÀ²) Á¤¼ö°ª¿¡ ¹éºÐÀ² ±âÈ£(%)¸¦ ºÙÀÎ °ÍÀÌ´Ù. ÀÌ °ªÀº ¸ðü ³Êºñ¿¡ ´ëÇÑ ¹éºÐÀ²ÀÌ´Ù.

ÀÌ ¼Ó¼ºÀº currentStyle¿¡¼­´Â ÀбâÀü¿ëÀÌ°í, ±×¿ÜÀÇ °³Ã¼¿¡¼­´Â Àбâ/¾²±âÀ̸ç, µðÆúÆ®°ªÀº autoÀÌ´Ù.

CSS(Cascading Style Sheets) ¾ÖÆ®¸®ºäÆ®´Â »ó¼ÓµÇÁö ¾Ê´Â´Ù.

Ư±â

right ¾Ö¸£¸®ºäÆ®¸¦ »ç¿ëÇϱâ À§Çؼ­´Â position ¾ÖÆ®¸®ºäÆ®°¡ ¼³Á¤µÇ¾î ÀÖ¾î¾ß Çϸç, ±×·¸Áö ¾ÊÀ¸¸é right ¾ÖÆ®¸®ºäÆ®´Â ¹«½ÃµÈ´Ù.

right ¼Ó¼ºÀÇ °ªÀº ¹®ÀÚ¿­À̹ǷÎ, ÀÌ ¼Ó¼º°ªÀ» ½ºÅ©¸³Æ®ÀÇ °³Ã¼ÀÇ À§Ä¡ °è»ê¿¡ »ç¿ëÇÒ ¼ö ¾ø´Ù.
´ë½Å pixelRight ¼Ó¼ºÀ̳ª posRight ¼Ó¼ºÀ» »ç¿ëÇÏ¿©¾ß ÇÑ´Ù.

Àû¿ë
°³Ã¼scriptCSS IE ¹öÀü
ÂüÁ¶
pixelTop pixelBottom pixelLeft pixelRight posTop posBottom posLeft posRight
top bottom left right

ÀÌ ¼Ó¼ºÀº CSS2(Cascading Style Sheets Level 2)¿¡ Á¤ÀǵǾú´Ù.


position:relative; ¼³Á¤°ú right ¾ÖÆ®¸®ºäÆ®¸¦ ÀÌ¿ëÇÏ¿© À̹ÌÁö °³Ã¼ÀÇ À§Ä¡¸¦ Á¶Á¤ÇÑ´Ù.

<STYLE>.divObj button{width:80}</STYLE>
<DIV style="border:solid 1 red;width:250;margin-left:200"><IMG id=imgObj src=../../gif/tulip.gif style="position:relative;right:auto"></DIV>
<DIV class=divObj style=white-space:nowrap>
<BUTTON onclick="imgObj.style.right='-80px';">-80px</BUTTON>
<BUTTON onclick="imgObj.style.right='0';">0</BUTTON>
<BUTTON onclick="imgObj.style.right='4cm';">4cm</BUTTON>
<BUTTON onclick="imgObj.style.right='100px';">100px</BUTTON>
<BUTTON onclick="imgObj.style.right='10%';">10%</BUTTON>
<BUTTON onclick="imgObj.style.right='auto';">auto</BUTTON>
</DIV>