°³Ã¼°¡ ¿ÞÂÊ, ¿À¸¥ÂÊ È¤Àº ¾çÂÊÀ¸·ÎÀÇ À¯µ¿ÇÏ¿© ´ÙÀ½ ÅؽºÆ®°¡ À¯µ¿°³Ã¼ µÚ¿¡ µð½ºÇ÷¹À̵Ǵ°¡¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.

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

: (¼Ó¼º ¹®ÀÚ¿­)
½ºÅ¸ÀÏ ¼Ó¼ºÀº °³Ã¼°¡ ¿ÞÂÊ, ¿À¸¥ÂÊ È¤Àº ¾çÂÊÀ¸·ÎÀÇ À¯µ¿ÇÏ¿© ´ÙÀ½ ÅؽºÆ®°¡ À¯µ¿°³Ã¼ µÚ¿¡ µð½ºÇ÷¹À̵Ǵ°¡¸¦ ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

none µðÆúÆ®À̸ç, ¾çÂÊ À¯µ¿°³Ã¼¸¦ Çã¿ëÇÑ´Ù.
left °³Ã¼°¡ À¯µ¿°³Ã¼ÀÇ ¿ÞÂÊ ¾Æ·¡·Î À̵¿µÈ´Ù.
right °³Ã¼°¡ À¯µ¿°³Ã¼ÀÇ ¿À¸¥ÂÊ ¾Æ·¡·Î À̵¿µÈ´Ù.
both °³Ã¼°¡ À¯µ¿°³Ã¼ ¾Æ·¡·Î À̵¿µÈ´Ù.

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

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

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

ÀÌ ¼Ó¼ºÀº (¿µ¹®)DOM1(Document Object Model Level 1)°ú CSS1(Cascading Style Sheets, Level 1)¿¡¼­ Á¤ÀǵǾú´Ù.


clear ¾ÖÆ®¸®ºäÆ® ¿¹Á¦.
°á°ú Ç¥½Ãâ
clear ¾ÖÆ®¸®ºäÆ® ¿¹Á¦.
°á°ú Ç¥½Ãâ
<STYLE>button{width:100}</STYLE>
<SCRIPT>
function show1All(){
  str='clear1Obj.style.clear='+clear1Obj.style.clear+'<BR>';
  showA.innerHTML=str;
}
function show2All(){
  str='clear2Obj.style.clear='+clear2Obj.style.clear+'<BR>';
  showB.innerHTML=str;
}
</SCRIPT>
<TABLE width=700 border>
<TR>
<TD colspan=2 style="border:solid 1 blue">
<IMG id="img1Obj" src="../../gif/flower.jpg" width="200" style="float:right">
<SPAN id="clear1Obj" style="clear:none;background:aff">clear ¾ÖÆ®¸®ºäÆ® ¿¹Á¦.</SPAN></TD>
</TR>
<TR>
<TD>
<BUTTON onclick="clear1Obj.style.clear='left';show1All()">clear=left</BUTTON>
<BUTTON onclick="clear1Obj.style.clear='right';show1All()">clear=right</BUTTON>
<BUTTON onclick="clear1Obj.style.clear='both';show1All()">clear=both</BUTTON>
<BUTTON onclick="clear1Obj.style.clear='none';show1All()">clear=none</BUTTON>
</TD>
<TD id=showA>°á°ú Ç¥½Ãâ</TD>
</TR>
<TR>
<TD colspan=2 style="border:solid 1 blue">
<IMG id="img2Obj" src="../../gif/flower1.jpg" width="200" style="float:left">
<SPAN id="clear2Obj" style="clear:none;background:aff">clear ¾ÖÆ®¸®ºäÆ® ¿¹Á¦.</SPAN></TD>
</TR>
<TR>
<TD>
<BUTTON onclick="clear2Obj.style.clear='left';show2All()">clear=left</BUTTON>
<BUTTON onclick="clear2Obj.style.clear='right';show2All()">clear=right</BUTTON>
<BUTTON onclick="clear2Obj.style.clear='both';show2All()">clear=both</BUTTON>
<BUTTON onclick="clear2Obj.style.clear='none';show2All()">clear=none</BUTTON>
</TD>
<TD id=showB>°á°ú Ç¥½Ãâ</TD>
</TR>
</TABLE>