°³Ã¼ÀÇ ¿ÞÂÊ Å׵θ®(border) ½ºÅ¸ÀÏ Çü½ÄÀ» ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
none | µðÆúÆ®À̸ç, ÁöÁ¤µÈ borderWidth¿¡ °ü°è¾øÀÌ Å׵θ®°¡ ±×·ÁÁöÁö ¾Ê´Â´Ù. | |
dotted | Å׵θ®°¡ Á¡¼±À¸·Î ±×·ÁÁø´Ù. | ÀÌ °ªÀº IE4.01¿¡¼ Macintosh Ç÷¡Æ®Æû¿¡, IE5.5¿¡¼ Windows¿¡ Àû¿ëµÈ´Ù. Macintosh Ç÷¡Æ®Æû°ú Windows ÀÌÀü Explorer ¹öÀü¿¡¼´Â solid·Î Ç¥ÇöµÈ´Ù. |
dashed | Å׵θ®°¡ ±äÁ¡¼±(dash; '-')À¸·Î ±×·ÁÁø´Ù. | |
solid | Å׵θ®°¡ ½Ç¼±À¸·Î ±×·ÁÁø´Ù. | |
double | Å׵θ®°¡ ÀÌÁß ½ÇÀüÀ¸·Î ±×·ÁÁø´Ù. µÎ ½ÇÀü°ú ±× »çÀÌÀÇ °ø°£ÀÇ ÇÕÀº borderWidth °ª°ú °°´Ù. ÀÌ °ªÀ¸·Î ÀÌÁß ½Ç¼ºÀ» Ç¥ÇöÇϱâ À§Çؼ´Â borderWidth °ªÀÌ 3px ÀÌ»óÀ̾î¾ß ÇÑ´Ù. | |
groove | Å׵θ®°¡ ÁöÁ¤µÈ »ö»ó°ª¿¡µû¶ó 3-D ȨÆÄÀÓ(groove)À¸·Î ±×·ÁÁø´Ù. ÀÌ °ªÀ» Á¦´ë·Î Ç¥ÇöÇϱâ À§Çؼ´Â °³Ã¼ÀÇ borderWidth ¼Ó¼ºÀ» ¼³Á¤ÇÏ¿©¾ß ÇÑ´Ù. | |
ridge | Å׵θ®°¡ ÁöÁ¤µÈ »ö»ó°ª¿¡µû¶ó 3-D Áß¾ÓÀÌ Æ¢¾î³ª¿È(ridge)À¸·Î ±×·ÁÁø´Ù. | |
inset | Å׵θ®°¡ ÁöÁ¤µÈ »ö»ó°ª¿¡µû¶ó 3-D Æ¢¾îµé¾î°¨(inset)À¸·Î ±×·ÁÁø´Ù. | |
window-inset | Å׵θ®°¡ inset¿Í µ¿ÀÏÇÏ°Ô ±×·ÁÁö°í, Ãß°¡ÀûÀ¸·Î ¿ÜºÎ¿¡ ÁöÁ¤µÈ »ö»ó°ª¿¡µû¶ó ´ÜÀÏ ¼±ÀÌ ±×·ÁÁø´Ù. | |
outset | Å׵θ®°¡ ÁöÁ¤µÈ »ö»ó°ª¿¡µû¶ó 3-D Æ¢¾î³ª¿È(outset)À¸·Î ±×·ÁÁø´Ù. |
ÀÌ ¼Ó¼ºÀº currentStyle¿¡¼´Â ÀбâÀü¿ëÀÌ°í, ±×¿ÜÀÇ °³Ã¼¿¡¼´Â Àбâ/¾²±âÀ̸ç, µðÆúÆ®°ªÀº noneÀÌ´Ù.
CSS(Cascading Style Sheets) ¾ÖÆ®¸®ºäÆ®´Â »ó¼ÓµÇÁö ¾Ê´Â´Ù.
IE5.5¿¡¼´Â, ÀÌ ¼Ó¼ºÀÌ ÀζóÀÎ ¿¤·¹¸àÆ®¿¡µµ Àû¿ëµÈ´Ù. ÀÌÀü ¹öÀü¿¡¼´Â ÀζóÀÎ ¿¤·¹¸àÆ®´Â position ¼Ó¼º°ªÀÌ absoluteÀ̰ųª ÀÌ ¼Ó¼ºÀ» ÀÌ¿ëÇÏ¿© ¹èÄ¡µÇ¾î¾ß ÇÑ´Ù. height³ª width ¼Ó¼ºÀÇ ¼³Á¤µÈ °ª¿¡ ÀÇÇÏ¿© ¿¤·¹¸àÆ®ÀÇ ¹èÄ¡°¡ °áÁ¤µÈ´Ù.
ÀÌ ¼Ó¼ºÀÌ Ç¥ÇöµÇ±â À§Çؼ´Â borderWidth ¼Ó¼º°ªÀÌ 0 ÀÌ»óÀ¸·Î ¼³Á¤µÇ¾î¾ß ÇÑ´Ù.
°³Ã¼ | script | CSS | IE ¹öÀü |
---|
ÀÌ ¼Ó¼ºÀº CSS2(Cascading Style Sheets Level 2)¿¡ Á¤ÀǵǾú´Ù.
<STYLE> .border1Class { border-left:10px groove pink } .border2Class { border-left:10px dotted pink } .border3Class { border-left:10px solid pink } .border4Class { border-left:10px double pink } .border5Class { border-left:10px inset pink } .noborderClass { border-left:none } button {width:110;margin:2} </STYLE> <SCRIPT> function showAll(){ str='tdObj.className='+tdObj.className+'<BR>'; str+='tdObj.currentStyle.borderLeftWidth='+tdObj.currentStyle.borderLeftWidth+'<BR>'; str+='tdObj.currentStyle.borderLeftStyle='+tdObj.currentStyle.borderLeftStyle+'<BR>'; str+='tdObj.currentStyle.borderLeftColor='+tdObj.currentStyle.borderLeftColor+'<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>