rt °³Ã¼¿¡ ÀÇÇÏ¿© ÁöÁ¤µÈ ·çºñ ÅؽºÆ®ÀÇ À§Ä¡¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.

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

: (¼Ó¼º ¹®ÀÚ¿­)
½ºÅ¸ÀÏ ¼Ó¼ºÀº rt °³Ã¼¿¡ ÀÇÇÏ¿© ÁöÁ¤µÈ ·çºñ ÅؽºÆ®ÀÇ À§Ä¡¸¦ ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

auto µðÆúÆ®À̸ç, ·çºñ ÅؽºÆ®ÀÇ Á¤·Ä¹æ½ÄÀ» ºê¶ó¿ìÀú°¡ °áÁ¤ÇÑ´Ù. ¾Æ½Ã¾Æ Ç¥À½¹®ÀÚ(ideographic)ÀÇ °æ¿ì distribute-space ¸ðµå·Î, ¿µ¹® ¾ËÆĺªÀÇ °æ¿ì center ¸ðµå°¡ ÃßõµÈ´Ù.
left ·çºñ ÅؽºÆ®°¡ ¿ÞÂÊ¿¡ Á¤·ÄµÈ´Ù.
center ·çºñ ÅؽºÆ®°¡ Áß¾Ó¿¡ Á¤·ÄµÈ´Ù.
º£À̽º°¡ ·çºñ ÅؽºÆ®º¸´Ù Á¼À¸¸é, º£À̽º°¡ ·çºñ ÅؽºÆ® ÆøÀÇ Áß¾Ó¿¡ Á¤·ÄµÈ´Ù.
right ·çºñ ÅؽºÆ®°¡ ¿À¸¥ÂÊ¿¡ Á¤·ÄµÈ´Ù.
distribute-letter ·çºñ ÅؽºÆ® ³Êºñ°¡ º£À̽º ³Êºñº¸´Ù Á¼À¸¸é ·çºñ ÅؽºÆ®´Â ·çºñ º£À̽º ³Êºñ¿¡ °í¸£°Ô ºÐÆ÷µÈ´Ù. ¸¸ÀÏ ·çºñ ÅؽºÆ® ³Êºñ°¡ ´õ ³Ð°Å³ª °°À¸¸é ·çºñ º£À̽º°¡ ·çºñ ÅؽºÆ® ³ÊºñÀÇ Áß¾Ó¿¡ Á¤·ÄµÈ´Ù.
distribute-space ·çºñ ÅؽºÆ® ³Êºñ°¡ º£À̽º ³Êºñº¸´Ù Á¼À¸¸é ·çºñ ÅؽºÆ®´Â ·çºñ º£À̽º ³Êºñ¿¡ °í¸£°Ô ºÐÆ÷µÈ´Ù. ¸¸ÀÏ ·çºñ ÅؽºÆ® ³Êºñ°¡ ´õ ³Ð°Å³ª °°À¸¸é ·çºñ º£À̽º°¡ ·çºñ ÅؽºÆ® ³ÊºñÀÇ Áß¾Ó¿¡ Á¤·ÄµÈ´Ù.
line-edge ·çºñ ÅؽºÆ®°¡ ÁÙ ¸ð¼­¸®¿¡ ÀÎÁ¢ÇÏÁö ¾ÊÀ¸¸é ·çºñ ÅؽºÆ®´Â Áß¾Ó¿¡ Á¤·ÄµÈ´Ù. ÁÙ¿¡ ÀÎÁ¢ÇÏ¸é ·çºñ ÅؽºÆ®ÀÇ »çÀ̵å´Â ·çºñ º£ÀÌÆ®ÀÇ »çÀ̵å¿Í ¸ÂÃçÁø´Ù.

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

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

Ư±â

rubyAlign ¼Ó¼ºÀº ruby °³Ã¼¿¡¼­ ¼³Á¤ÇÏ°í rt °³Ã¼¿¡¼­ Á¤ÀÇÇÑ ·çºñ ÅؽºÆ®ÀÇ À§Ä¡¸¦ ÁöÁ¤ÇÑ´Ù.

Àû¿ë
°³Ã¼scriptCSS IE ¹öÀü
ÂüÁ¶
rubyAlign rubyPosition rubyOverhang

ÀÌ ¼Ó¼ºÀº (¿µ¹®)CSS3(Cascading Style Sheets Level 3)¿¡¼­ Á¤ÀǵǾú´Ù.


Ruby base (·çºñ º£À̽º). Ruby text. (·çºñ ÅؽºÆ®)

rubyObj.style.rubyAlign=
<RUBY id=rubyObj style="ruby-align:center;color:blue">
Ruby base.
<RT style="color:red">Ruby text.</RT></RUBY>
<P>
<BUTTON onclick="rubyObj.style.rubyAlign='auto';showA.innerText=rubyObj.style.rubyAlign">auto</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='center';showA.innerText=rubyObj.style.rubyAlign">center</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='left';showA.innerText=rubyObj.style.rubyAlign">left</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='right';showA.innerText=rubyObj.style.rubyAlign">right</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='distribute-letter';showA.innerText=rubyObj.style.rubyAlign">distribute-letter</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='distribute-space';showA.innerText=rubyObj.style.rubyAlign">distribute-space</BUTTON>
<BUTTON onclick="rubyObj.style.rubyAlign='line-edge';showA.innerText=rubyObj.style.rubyAlign">line-edge</BUTTON>
</P>
<DIV>rubyObj.style.rubyAlign=<SPAN id=showA style="color:blue"></SPAN></DIV>