°³Ã¼ÀÇ ³»¿ëÀÌ °³Ã¼ÀÇ ³Êºñ³ª ³ôÀ̸¦ ÃÊ°úÇÏ¸é ¾î¶»°Ô ó¸®ÇÒ °ÍÀΰ¡¸¦ ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
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>