°³Ã¼ÀÇ À§ÂÊ, ¿À¸¥ÂÊ, ¾Æ·¡ÂÊ, ¿ÞÂÊ Å׵θ® ³Êºñ(µÎ²²)¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.

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

: (¼Ó¼º ¹®ÀÚ¿­)
½ºÅ¸ÀÏ ¼Ó¼ºÀº °³Ã¼ÀÇ À§ÂÊ, ¿À¸¥ÂÊ, ¾Æ·¡ÂÊ, ¿ÞÂÊ Å׵θ® ³Êºñ(µÎ²²)¸¦ ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

medium µðÆúÆ®À̸ç, Å׵θ®°¡ Áß°£ »óÅÂÀÌ´Ù.
thin Å׵θ®°¡ ¾ãÀº »óÅÂÀÌ´Ù.
thick Å׵θ®°¡ µÎ²¨¿î »óÅÂÀÌ´Ù.
(³Êºñ) ºÎµ¿¼Ò¼öÁ¡¼öÄ¡ ´ÙÀ½¿¡ cm, mm, in, pt, pc³ª px µî ±æÀÌ ´ÜÀ§°¡ µû¸£´Â Àý´ë ±æÀÌ, ȤÀº em or ex µîÀÇ ´ÜÀ§°¡ µû¸£´Â »ó´ë ±æÀÌÀÌ´Ù.

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

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

Ư±â

ÀÌ ¼Ó¼ºÀº ³×°¡Áö °ªÀ» Çѹø¿¡ ¼³Á¤Çϰųª ¹ÝȯÇÒ ¼ö ÀÖ´Â º¹ÇÕ Ãà¾à ¼Ó¼ºÀÌ´Ù.
³×°¡Áö ¼Ó¼ºÀÇ ¼ø¼­´Â top, right, botttom, leftÀÌ´Ù.

IE5.5¿¡¼­ ÀÌ ¼Ó¼ºÀº ÀζóÀÎ ¿¤·¹¸àÆ®¿¡ Àû¿ëµÈ´Ù. ÀÌÀü ¹öÀü¿¡¼­´Â ÀζóÀÎ ¿¤·¹¸àÆ®´Â position ¼Ó¼º°ªÀÌ absoluteÀ̰ųª ÀÌ ¼Ó¼ºÀ» ÀÌ¿ëÇÏ¿© ¹èÄ¡µÇ¾î¾ß ÇÑ´Ù. height³ª width ¼Ó¼ºÀÇ ¼³Á¤µÈ °ª¿¡ ÀÇÇÏ¿© ¿¤·¹¸àÆ®ÀÇ ¹èÄ¡°¡ °áÁ¤µÈ´Ù.

borderStyle ¼Ó¼ºÀÌ noneÀ¸·Î ¼³Á¤µÇ¾î ÀÖÀ¸¸é borderWidth ¼Ó¼ºÀº Ç¥ÇöµÇÁö ¾Ê´Â´Ù.

Àû¿ë
°³Ã¼scriptCSS IE ¹öÀü
ÂüÁ¶
border borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth

ÀÌ ¼Ó¼ºÀº CSS1(Cascading Style Sheets, Level 1)¿¡¼­ Á¤ÀǵǾú´Ù.



°á°ú Ç¥½Ãâ
<STYLE>
.border1Class { border:red;border-style:solid;border-width:10 }
.border2Class { border:red;border-style:solid dotted;border-width:10 20 }
.border3Class { border:red;border-style:solid dotted dashed ;border-width:10 20 30 }
.border4Class { border:red;border-style:solid dotted dashed inset ;border-width:10 20 30 40 }
.border5Class { border:thick dashed pink }
.noborderClass { border:none;border-width:red }
button {width:110;margin:2}
</STYLE>
<SCRIPT>
function showAll(){
  str='tdObj.className='+tdObj.className+'<BR>';
  str+='tdObj.currentStyle.borderWidth='+tdObj.currentStyle.borderWidth+'<BR>';
  str+='tdObj.currentStyle.borderStyle='+tdObj.currentStyle.borderStyle+'<BR>';
  str+='tdObj.currentStyle.borderColor='+tdObj.currentStyle.borderColor+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<TABLE border cellspacing=5 width=100%>
<TR>
<TD id="tdObj"><IMG src="../../gif/flower.jpg" width="300"></TD>
</TR>
</TABLE>
<BUTTON onclick="tdObj.className='border1Class';showAll()">border1Class</BUTTON>
<BUTTON onclick="tdObj.className='border2Class';showAll()">border2Class</BUTTON>
<BUTTON onclick="tdObj.className='border3Class';showAll()">border3Class</BUTTON><BR>
<BUTTON onclick="tdObj.className='border4Class';showAll()">border4Class</BUTTON>
<BUTTON onclick="tdObj.className='border5Class';showAll()">border5Class</BUTTON>
<BUTTON onclick="tdObj.className='noborderClass';showAll()">noborderClass</BUTTON>
<DIV id=showA>°á°ú Ç¥½Ãâ</DIV>