Àß¶ó³½ Áö¿ªÀÇ °³Ã¼ ¿ÞÂÊ ÁÂÇ¥¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇÑ´Ù.

Àμö
: (¼Ó¼º ¹®ÀÚ¿­)
½ºÅ¸ÀÏ ¼Ó¼ºÀº Àß¶ó³½ Áö¿ªÀÇ °³Ã¼ ¿ÞÂÊ ÁÂÇ¥¸¦ Çȼ¿´ÜÀ§ÀÇ Á¤¼ö³ª À̸¦ ³ªÅ¸³»´Â ¹®ÀÚ¿­ÀÌ´Ù.

Àбâ Àü¿ëÀ¸·Î, µðÆúÆ®°ªÀº ¾ø´Ù.

auto °³Ã¼ÀÇ ¿ÞÂʺκÐÀÌ ¸ðµÎ Ç¥½ÃµÇ¸ç ¿ÞÂʺκÐÀÇ À߶󳻱Ⱑ ¾ø´Ù.
(ºÎµ¿¼Ò¼öÁ¡ ¼öÄ¡) ºÎµ¿¼Ò¼öÁ¡ ¼öÄ¡¿Í ±× Àý´ë´ÜÀ§(cm, mm, in, pt, pc, px)
ȤÀº »ó´ë´ÜÀ§(em, ex, %) ¹®ÀÚ¿­·Î ±¸¼ºµÈ´Ù.
Áö¿øµÇ´Â ±æÀÌ ´ÜÀ§µéÀº CSS ±æÀÌ´ÜÀ§¸¦ ÂüÁ¶Ç϶ó.
Àû¿ë
°³Ã¼scriptCSS IE ¹öÀü
ÂüÁ¶
clip clipBottom clipLeft clipRight clipTop

currentStyle. ¼Ó¼º ¿¹Á¦



°á°ú Ç¥½Ãâ
<STYLE>.butClass{width:150}</STYLE>
<SCRIPT>
size=100;
function setClip(job){
  if (job=='+'){
    if (size<290) size=size+10;
    else size=300;
  }
  if (job=='-'){
    if (size>10) size=size-10;
    else size=0;
  }
  imgObj.style.clip='rect(auto auto auto '+size+')';
  str='imgObj.style.clip='+imgObj.style.clip+'<BR>';
  str+='imgObj.currentStyle.clipTop='+imgObj.currentStyle.clipTop+'<BR>';
  str+='imgObj.currentStyle.clipBottom='+imgObj.currentStyle.clipBottom+'<BR>';
  str+='imgObj.currentStyle.clipLeft='+imgObj.currentStyle.clipLeft+'<BR>';
  str+='imgObj.currentStyle.clipRight='+imgObj.currentStyle.clipRight+'<BR>';
  showA.innerHTML=str;
}
</SCRIPT>
<IMG id="imgObj" src="../../gif/flower.jpg" width="300" style="position:absolute;left:430;clip:rect(auto auto auto 100)">
<IMG src="../../gif/flower.jpg" width="300"><BR>
<BUTTON onclick=setClip('+') class=butClass>clipLeftÁõ°¡</BUTTON>
<BUTTON onclick=setClip('-') class=butClass>clipLeft°¨¼Ò</BUTTON><BR>
<DIV id="showA" style="width:610;height:6.8em;border:solid 1 blue;padding:5">°á°ú Ç¥½Ãâ</DIV>