°³Ã¼ÀÇ ³»¿ëÀÌ °³Ã¼ÀÇ ³Êºñ³ª ³ôÀ̸¦ ÃʰúÇÏ¸é ¾î¶»°Ô ó¸®ÇÒ °ÍÀΰ¡¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
| visible | µðÆúÆ®À̸ç, ³»¿ëÀÌ À߸®Áö ¾Ê°í, ½ºÅ©·Ñ¹Ù°¡ »ý±âÁö ¾Ê´Â´Ù. |
| scroll | ³»¿ëÀÌ À߸®°í, °³Ã¼ÀÇ Å©±â°¡ ³»¿ëÀÇ Å©±â¸¦ ÃʰúÇÏÁö ¾Ê´õ¶óµµ, ½ºÅ©·Ñ¹Ù°¡ »ý±ä´Ù, |
| hidden | °³Ã¼ÀÇ Å©±â°¡ ³»¿ëÀÇ Å©±â¸¦ ÃʰúÇÏ¸é °¨ÃçÁø°í º¸ÀÌÁö ¾Ê´Â´Ù. |
| auto | ÇÊ¿äÇÑ °æ¿ì¿¡¸¸ ÀÚµ¿ÀûÀ¸·Î ³»¿ëÀÌ À߸®°í, ½ºÅ©·Ñ¹Ù°¡ »ý±ä´Ù, |
ÀÌ ¼Ó¼ºÀº currentStyle¿¡¼´Â ÀбâÀü¿ëÀ̰í, ±×¿ÜÀÇ °³Ã¼¿¡¼´Â Àбâ/¾²±âÀ̸ç, µðÆúÆ®°ªÀº TEXTAREA¿¡¼ autoÀ̰í, ±×¿ÜÀÇ °³Ã¼¿¡¼´Â ¸ðµÎ visibleÀÌ´Ù.
CSS(Cascading Style Sheets) ¾ÖÆ®¸®ºäÆ®´Â »ó¼ÓµÇÁö ¾Ê´Â´Ù.
IE6¿¡¼ !DOCTYPE ¼Ó¼º¿¡ ±Ô°Ý¿¡ ºÎÇÕÇÏ´Â ¼³Á¤À» Çϸé, ÀÌ ¼Ó¼ºÀº html °³Ã¼¿¡ Àû¿ëµÈ´Ù.
ÀüÇüÀûÀÎ Àüü ¹®¼ body ¿¤·¹¸àÆ®ÀÇ µðÆúÆ®°ªÀº autoÀÌ´Ù.
textArea °Ôü¿¡ overflow ¼Ó¼ºÀ» hiddenÀ¸·Î ¼³Á¤ÇÏ¸é ½ºÅ©·Ñ¹Ù°¡ °¨ÃçÁø´Ù.
overflow ¼Ó¼ºÀ» visible·Î ¼³Á¤Çϸé, ±× °³Ã¼¸¦ Æ÷ÇÔÇÏ´Â windowÀ̳ª frameÀÇ Å©±â¿¡ ¸ÂÃç ³»¿ëÀÌ À߸°´Ù.
| °³Ã¼ | script | CSS | IE ¹öÀü |
|---|
ÀÌ ¼Ó¼ºÀº CSS2(Cascading Style Sheets Level 2)¿¡ Á¤ÀǵǾú´Ù.
overflow ¼Ó¼ºÀ» ¼±ÅÃÇØ º¸¶ó.
<SCRIPT>
function showAll(selText){
divObj.style.overflow=showA.innerHTML=selText;
}
</SCRIPT>
<DIV id=divObj style="width:200px;height:100px;overflow:auto;border:solid 1 blue" style="color:blue">
°³Ã¼ÀÇ ³»¿ëÀÌ °³Ã¼ÀÇ ³Êºñ³ª ³ôÀ̸¦ ÃʰúÇÏ¸é ¾î¶»°Ô ó¸®ÇÒ °ÍÀΰ¡¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.<BR>
°³Ã¼ÀÇ ³»¿ëÀÌ °³Ã¼ÀÇ ³Êºñ³ª ³ôÀ̸¦ ÃʰúÇÏ¸é ¾î¶»°Ô ó¸®ÇÒ °ÍÀΰ¡¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
</DIV>
<BR>
<SELECT onchange="showAll(this.options[this.selectedIndex].text)">
<OPTION>visible
<OPTION>scroll
<OPTION>hidden
<OPTION selected>auto
</SELECT>
<DIV style="white-space:nowrap">divObj.style.overflow=<SPAN id=showA style="color:blue">°á°ú Ç¥½Ãâ</SPAN></DIV>