°³Ã¼ÀÇ À§ÂÊ Å׵θ®(border) ¼Ó¼ºµéÀ» º¹ÇÕ Ãà¾à ¼Ó¼ºÀ¸·Î ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
(³Êºñ) | width | borderTopWidth ¼Ó¼º¿¡¼ À¯È¿ÇÑ ¹è°æÀÇ À§Ä¡°ªÀÌ´Ù. |
(½ºÅ¸ÀÏ) | style | borderTopStyle ¼Ó¼º¿¡¼ À¯È¿ÇÑ ¹è°æÀÇ À§Ä¡°ªÀÌ´Ù. |
(»ö»ó) | color | borderTopColor ¼Ó¼º¿¡¼ À¯È¿ÇÑ ¹è°æÀÇ À§Ä¡°ªÀÌ´Ù. |
ÀÌ ¼Ó¼ºÀº Àбâ/¾²±âÀ̸ç, µðÆúÆ®°ªÀº medium noneÀÌ´Ù.
CSS(Cascading Style Sheets) ¾ÖÆ®¸®ºäÆ®´Â »ó¼ÓµÇÁö ¾Ê´Â´Ù.
borderTop ¼Ó¼ºÀº À§ÂÊ Å׵θ®(border)ÀÇ width, style°ú color °ªµéÀ» Çѹø¿¡ ¼³Á¤ÇÏ´Â º¹ÇÕ Ãà¾à ¼Ó¼ºÀÌ´Ù.
borderTop º¹ÇÕ Ãà¾à ¼Ó¼ºÀ¸·Î ¸ðµç °³º° Å׵θ® ¼Ó¼ºµéÀ» ÁöÁ¤ÇÏÁö ¾ÊÀ¸¸é ÁöÁ¤µÇÁö ¾ÊÀº ¼Ó¼º¿¡´Â µðÆúÆ®°ªÀÌ Àû¿ëµÈ´Ù. ¿¹¸¦µé¾î widthÀÇ µðÆúÆ®°ªÀº mediumÀÌ´Ù.
color°¡ ÁöÁ¤µÇÁö ¾ÊÀ¸¸é, ÅؽºÆ® »ö»óÀÌ Àû¿ëµÈ´Ù.
»ö»óÇ¥¸¦ ÂüÁ¶Ç϶ó.
IE5.5¿¡¼ ÀÌ ¼Ó¼ºÀº ÀζóÀÎ ¿¤·¹¸àÆ®¿¡ Àû¿ëµÈ´Ù. ÀÌÀü ¹öÀü¿¡¼´Â ÀζóÀÎ ¿¤·¹¸àÆ®´Â position ¼Ó¼º°ªÀÌ absoluteÀ̰ųª ÀÌ ¼Ó¼ºÀ» ÀÌ¿ëÇÏ¿© ¹èÄ¡µÇ¾î¾ß ÇÑ´Ù. height³ª width ¼Ó¼ºÀÇ ¼³Á¤µÈ °ª¿¡ ÀÇÇÏ¿© ¿¤·¹¸àÆ®ÀÇ ¹èÄ¡°¡ °áÁ¤µÈ´Ù.
°³Ã¼ | script | CSS | IE ¹öÀü |
---|
ÀÌ ¼Ó¼ºÀº CSS1(Cascading Style Sheets, Level 1)¿¡¼ Á¤ÀǵǾú´Ù.
<STYLE> .border1Class { border-top:10px groove pink } .border2Class { border-top:10px dotted pink } .border3Class { border-top:10px solid pink } .border4Class { border-top:10px double pink } .border5Class { border-top:10px inset pink } .noborderClass { border-top:none } button {width:110;margin:2} </STYLE> <SCRIPT> function showAll(){ str='tdObj.className='+tdObj.className+'<BR>'; str+='tdObj.currentStyle.borderTopWidth='+tdObj.currentStyle.borderTopWidth+'<BR>'; str+='tdObj.currentStyle.borderTopStyle='+tdObj.currentStyle.borderTopStyle+'<BR>'; str+='tdObj.currentStyle.borderTopColor='+tdObj.currentStyle.borderTopColor+'<BR>'; showA.innerHTML=str; } </SCRIPT> <TABLE border cellspacing=5> <TR> <TD id="tdObj"><IMG src="../../gif/flower.jpg" width="330"></TD> </TR> </TABLE> <BUTTON onclick="tdObj.className='noborderClass';showAll()">noborderClass</BUTTON> <BUTTON onclick="tdObj.className='border1Class';showAll()">border1Class</BUTTON> <BUTTON onclick="tdObj.className='border2Class';showAll()">border2Class</BUTTON><BR> <BUTTON onclick="tdObj.className='border3Class';showAll()">border3Class</BUTTON> <BUTTON onclick="tdObj.className='border4Class';showAll()">border4Class</BUTTON> <BUTTON onclick="tdObj.className='border5Class';showAll()">border5Class</BUTTON> <DIV id=showA>°á°ú Ç¥½Ãâ</DIV>