 |
|
|  |
|
 |
14³â Àü |
div ¼Ó¼ºÀº style½ÃÆ®·Î ¼³Á¤ÇÕ´Ï´Ù.
< div id="Layer" style="position:absolute;top:20px;left:20px;width:200px;height:100px;z-index:1;visibility:hidden;overflow:auto;background:#ffcc00">
<¼Ó¼ºµé>
position : absolute -> Àý´ëÀ§Ä¡ , relative -> »ó´ëÀ§Ä¡
top : ºê¶ó¿ìÀú À§¿¡¼ ºÎÅÍ ¾Æ·¡ÂÊÀ¸·Î ¶³¾îÁø À§Ä¡
left : ºê¶ó¿ìÀú ¿ÞÂÊ¿¡¼ ºÎÅÍ ¿À¸¥ÂÊÀ¸·Î ¶³¾îÁø À§Ä¡
width : ·¹ÀÌ¾î °¡·Î±æÀÌ
heigth : ·¹ÀÌ¾î ¼¼·Î±æÀÌ
z-index : ·¹ÀÌ¾î ¼ø¼ 1 ,2 ,3 ,4 .... °ªÀÌ Á¦ÀÏ ³ôÀ» ¼ö·Ï ¸Ç À§·Î ³ªÅ¸³³´Ï´Ù.
visibility : hidden -> ·¹ÀÌ¾î ¼û±è , visible -> ·¹ÀÌ¾î º¸ÀÓ
background : ·¹ÀÌ¾î ¹è°æ»ö
overflow : visible -> Á¤ÇØÁø Å©±â ¹«½Ã(width,height¸¦ ¹«½ÃÇÏ°í ¸ðµÎ º¸¿©ÁÜ)
: hidden -> Á¤ÇØÁø Å©±â¸¸Å¸¸ º¸¿©ÁÜ,³Ñ´Â ³»¿ëÀº ©¸²´Ï´Ù.
: scroll -> ¼öÆò,¼öÁ÷ ½ºÅ©·ÑÀ» º¸¿©ÁÜ,
: auto -> ³»¿ëÀÌ ³ÑÄ¡´Â ¹æÇâÀ¸·Î ½ºÅ©·Ñ º¸¿©ÁÜ.
ÀÌ ¿Ü¿¡¼µµ style ºÎºÐ¿¡
font-family -> ÆùÆ®Á¾·ù
font-size -> ÆùƮũ±â
padding-top -> ·¹À̾î À§¿¡¼ ºÎÅÍ ³»¿ëºÎºÐ±îÁöÀÇ °ø°£
padding-left(¿ÞÂÊÀ¸·Î ºÎÅÍ) ,
padding-right(¿À¸¥ÂÊÀ¸·Î ºÎÅÍ) ,
padding-bottom(¾Æ·¡·ÎºÎÅÍ)
***********************************************************
·¹ÀÌ¾î °´Ã¼¿¡ Á¢±Ù ÇÒ¶§¿¡´Â ·¹ÀÌ¾î ¾ÆÀ̵ð.¼Ó¼ºÀ¸·Î Á¢±ÙÇÕ´Ï´Ù.
¿¹) layerID.style.visibility="hidden";
Æ÷Áö¼Ç¿¡ ´ëÇÑ ¼Ó¼º¿¡¼ absolute¿Í relative¸¦ º¸¸é
absolute(Àý´ëÀû À§Ä¡)
ºê¶ó¿ìÀú¸¦ ±âÁØÀ¸·Î À§Ä¡ ¼Ó¼ºÀ» »ç¿ë Çϸç parent ¿ä¼Ò¿¡ ÀÇÇØ ÇÏÀ§ À§Ä¡¿¡
ÀÖ´Ù¸é ±× °÷À» ±âÁØÀ¸·Î ÇÕ´Ï´Ù.
Áï, ·¹ÀÌ¾î ¼Ó¼ºÀÎ z-index¸¦ ¾µ°æ¿ì top, left, right, bottomÀ» ÅëÇؼ
ÁÂÇ¥¸¦ Àâ´Âµ¥ ½ÇÁ¦ ºê¶ó¿ìÀú¸¦ ±âÁØÀ¸·Î À§Ä¡ÇÏ°Ô µË´Ï´Ù.
relative(»ó´ëÀû À§Ä¡)
°´Ã¼°¡ À§Ä¡ ¼Ó¼º¿¡ ÀÇÇØ ¼³Á¤ µÇ°Å³ª ű׳»¿¡ À§Ä¡½Ã ¸¶Áö¸· À§Ä¡¸¦
±âÁØÀ¸·Î »ó´ë°ªÀ» Á¤ÇØ ÁÝ´Ï´Ù.
Áï, Æ÷Áö¼ÇÀ» Á¤ÇÏÁö ¾ÊÀº »óÅ¿¡¼ º¸¸é ±×°÷¿¡ À§Ä¡°¡ ºê¶ó¿ìÀú¿¡
³ª¿Ã°ÍÀÔ´Ï´Ù. ¹Ù·Î ±×°÷À» ±âÁØÀ¸·Î Æ÷Áö¼Ç¿¡ relative¸¦ »ç¿ëÇؼ
top, left, right, bottomÀ» ÀÌ¿ëÇؼ À§Ä¡¸¦ Á¤ÇÒ¼ö ÀÖ½À´Ï´Ù.
À§¿¡ Áú¹® ÇϽŠ¼Ò½º¿¡ º¸½Ã¸é relative¸¦ ¸ÕÀú »ç¿ë Çϼ̴µ¥¿ä
µÎ ű׸¦ ¹Ù²ã¼ Çغ¸½Ã¸é ¾Æ½Ç °Ì´Ï´Ù.
±×¸®°í div¿Í spanű״ ¼½Ä¿¡ °üÇÑ Å±×ÀÔ´Ï´Ù.
div
divű״ ¹®´Ü ¼½Ä¿¡ °üÇÑ Å±×ÀÔ´Ï´Ù. ±×·¡¼ ½ºÅ¸ÀÏÀ»
ÀÌ¿ëÇؼ Å©±â¸¦ ÀâÁö ¾Ê´Â´Ù¸é ±âº»ÀûÀ¸·Î ÁٹٲÞÀÌ µË´Ï´Ù.
Áï, ¶óÀÎ Àüü¿¡ Àû¿ëÀÌ µÇ´Â ÀÌÀ¯ÀÔ´Ï´Ù.
span
spanű״ ¼½Ä¿¡ °üÇÑ Å±×À̱ä Çϳª ¹®´ÜÀÌ ¾Æ´Ñ ÇÑÁÙ¿¡ °üÇÑ ¼½Ä
ÀÔ´Ï´Ù.
±×·¡¼ spanű׿¡ ½ºÅ¸ÀÏ·Î Å©±â¸¦ Àâ¾ÆÁÖÁö ¾ÊÀ¸¸é űװ¡ ¾²Àΰ÷ ¾È¿¡
³»¿ë±îÁö¸¸ Àû¿ëÀÌ µË´Ï´Ù.
¿¹¸¦ µé¾î
<div style="background-color: blue">ÁÙÀüü¿¡ »ö»ó</div>
ÁÙÀüü¿¡ »ö»ó
À§ °æ¿ì´Â ¶óÀÎÀüü¿¡ ÇØ´ç(¹®´ÜÀ» Àû¿ë Çϱâ À§ÇØ ÀÚµ¿À¸·Î ÁٹٲÞ)
<span style="background-color: blue">À̱ۿ¡¸¸ »ö»ó</span>
À̱ۿ¡¸¸ »ö»ó
À§ÀÇ °æ¿ì´Â ÁÙ¼½ÄÀ̹ǷΠű׾ȿ¡ ¾²ÀÎ ±Û¿¡¸¸ Àû¿ë µË´Ï´Ù.
1.className
¼Ó¼º IE (<DIV class="sVal"> ¾ÖÆ®¸®ºäÆ®)
¢¡ °³Ã¼ÀÇ Å¬¶ó½º À̸§À» ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
2.clientHeight ¼Ó¼º IE
¢¡ ºí·° °³Ã¼ÀÇ ³ôÀ̸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇÑ´Ù.
3.clientTop ¼Ó¼º IE
¢¡ offsetTop ¼Ó¼º°ú ½ÇÁ¦ÀûÀÎ »ç¿ëÀÚ Áö¿ªÀÇ À§ÂÊ ¸ð¼¸®¿ÍÀÇ °Å¸®¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇÑ´Ù.
4.clientWidth ¼Ó¼º IE
¢¡ ºí·° °³Ã¼ÀÇ ³Êºñ¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇÑ´Ù.
5.id ¼Ó¼º IE (<DIV id=sVal> ¾ÖÆ®¸®ºäÆ®)
¢¡ °³Ã¼¸¦ ´ëÇ¥ÇÏ´Â ÀνÄÀÚ ¹®ÀÚ¿À» ¹ÝȯÇϰųª ÁöÁ¤ÇÑ´Ù.
6.innerText ¼Ó¼º IE
¢¡ °³Ã¼ÀÇ ³»¿ë ¹®ÀÚ¿À» ¹ÝȯÇϰųª ÁöÁ¤ÇÑ´Ù.
7.offsetHeight ¼Ó¼º IE
¢¡ offsetParent¿¡ ¼³Á¤¿¡µû¶ó ¸ðüÀÇ ·¹À̾ƿôÀ̳ª ÁÂÇ¥¿¡ »ó´ëÀûÀ¸·Î °è»êµÈ ³ôÀÌ À§Ä¡¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇÑ´Ù.
8.offsetLeft ¼Ó¼º IE
¢¡ offsetParent¿¡ ¼³Á¤¿¡µû¶ó ¸ðüÀÇ ·¹À̾ƿôÀ̳ª ÁÂÇ¥¿¡ »ó´ëÀûÀ¸·Î °è»êµÈ ¼öÆò À§Ä¡¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇÑ´Ù.
9.offsetParent ¼Ó¼º IE
¢¡ °³Ã¼¿¡ offsetParent°ú offsetLeft ¼Ó¼ºµéÀÌ ÁöÁ¤µÈ ¿ë±â °³Ã¼¸¦ ÂüÁ¶ÇÏ°í ¹ÝȯÇÑ´Ù.
10.offsetTop ¼Ó¼º IE
¢¡ offsetParent¿¡ ¼³Á¤¿¡µû¶ó ¸ðüÀÇ ·¹À̾ƿôÀ̳ª ÁÂÇ¥¿¡ »ó´ëÀûÀ¸·Î °è»êµÈ ¼öÁ÷ À§Ä¡¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇÑ´Ù.
11.offsetWidth ¼Ó¼º IE
¢¡ offsetParent¿¡ ¼³Á¤¿¡µû¶ó ¸ðüÀÇ ·¹À̾ƿôÀ̳ª ÁÂÇ¥¿¡ »ó´ëÀûÀ¸·Î °è»êµÈ ³Êºñ À§Ä¡¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇÑ´Ù.
12.outerText ¼Ó¼º IE
¢¡ °³Ã¼¿Í °³Ã¼ÀÇ ¿ÜºÎ ³»¿ëÀ» ÅؽºÆ®·Î ¹ÝȯÇÑ´Ù.
13.parentElement ¼Ó¼º IE
¢¡ ü°è ±¸Á¶»ó ºÎ¸ð ¿¤·¹¸àÆ® °³Ã¼¸¦ ¹ÝȯÇÑ´Ù.
14.scrollHeight ¼Ó¼º IE
¢¡ °³Ã¼ÀÇ ½ºÅ©·Ñ(ȸ鱼¸²) ³ôÀ̸¦ ¹ÝȯÇÑ´Ù.
15.scrollLeft ¼Ó¼º IE
¢¡ °³Ã¼ÀÇ ¿ÞÂÊ ¸ð¼¸®¿Í ÇöÀç À©µµ¿ìÀÇ ³»¿ëÀÌ º¸ÀÌ´Â °¡Àå ¿ÞÂÊ À§Ä¡¿ÍÀÇ °Å¸®¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
16.scrollTop ¼Ó¼º IE
¢¡ °³Ã¼ÀÇ À§ÂÊ ¸ð¼¸®¿Í ÇöÀç À©µµ¿ìÀÇ ³»¿ëÀÌ º¸ÀÌ´Â °¡Àå À§ÂÊ À§Ä¡¿ÍÀÇ °Å¸®¸¦ Çȼ¿´ÜÀ§·Î ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
17.scrollWidth ¼Ó¼º IE
¢¡ °³Ã¼ÀÇ ½ºÅ©·Ñ(ȸ鱼¸²) ³Êºñ¸¦ ¹ÝȯÇÑ´Ù.
18.sourceIndex ¼Ó¼º IE
¢¡ ¼Ò½º ¼ø¼¿¡¼ ¹®¼ÀÇ all Ä÷º¼Ç¿¡ ³ªÅ¸³ª´Â °³Ã¼ÀÇ À§Ä¡¸¦ ¹ÝȯÇÑ´Ù.
19.style ¼Ó¼º IE (<DIV style="cssVal"> ¾ÖÆ®¸®ºäÆ®)
¢¡ ¿¤·¹¸àÆ®ÀÇ ÀζóÀÎ ½ºÅ¸ÀÏÀ» ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
20.title ¼Ó¼º IE (<DIV title="sVal"> ¾ÖÆ®¸®ºäÆ®)
¢¡ °³Ã¼ÀÇ Âü°íÀûÀÎ Á¦¸ñÀ» ¹ÝȯÇϰųª ¼³Á¤ÇÑ´Ù.
21.uniqueID ¼Ó¼º IE
¢¡ ÀÚµ¿ÀûÀ¸·Î »ý¼ºµÈ °³Ã¼ÀÇ À¯ÀÏÇÑ ÀνÄÀÚ ¹®ÀÚ¿À» ¹ÝȯÇÑ´Ù.
¡Ø ¼Ó¼º
position : absolute(Àý´ëÀ§Ä¡), relative(»ó´ëÀ§Ä¡), static(±âº»°ª), fixed(°íÁ¤)
top : À§ºÎÅÍ ¾Æ·¡ÂÊÀ¸·Î À§Ä¡
left : ¿ÞÂʺÎÅÍ ¿À¸¥ÂÊÀ¸·Î À§Ä¡
width : ·¹ÀÌ¾î °¡·Î ±æÀÌ
height : ·¹ÀÌ¾î ¼¼·Î ±æÀÌ
z-index : ·¹ÀÌ¾î ¼ø¼(°ªÀÌ ³ôÀ»¼ö·Ï À§ÂÊ)
visibility : hidden(·¹ÀÌ¾î ¼û±è), visible(·¹ÀÌ¾î º¸ÀÓ)
background : ·¹ÀÌ¾î ¹è°æ»ö
overflow : visible(Á¤ÇØÁø Å©±â ¹«½ÃÇÏ°í ¸ðµÎ º¸¿©ÁÜ), hidden(Á¤ÇØÁø Å©±â¸¸Å¸¸ º¸¿©ÁÜ, ³Ñ´Â ³»¿ëÀº ©¸²), scroll(¼öÆò,¼öÁ÷ ½ºÅ©·ÑÀ» º¸¿©ÁÜ), auto(³»¿ëÀÌ ³ÑÄ¡´Â ¹æÇâÀ¸·Î ½ºÅ©·Ñ º¸¿©ÁÜ)
font-family : ÆùÆ®Á¾·ù
font-size : ÆùƮũ±â
padding-top : À§ÂÊÀ¸·ÎºÎÅÍÀÇ ¾ÈÂÊ ¿©¹é
padding-left : ¿ÞÂÊÀ¸·ÎºÎÅÍÀÇ ¾ÈÂÊ ¿©¹é
padding-right : ¿À¸¥ÂÊÀ¸·ÎºÎÅÍÀÇ ¾ÈÂÊ ¿©¹é
padding-bottom : ¾Æ·¡ÂÊÀ¸·ÎºÎÅÍÀÇ ¾ÈÂÊ ¿©¹é
¡Ø ·¹À̾ƿô¿¡ °ü·ÃµÈ ¼Ó¼º
float:left - ·¹À̾ ÁÂÃøÀ¸·Î Á¤·ÄµÇ¸ç, ÀÌÈÄ Ãß°¡µÇ´Â ·¹À̾î´Â ¿·(ÁÂÃø)À¸·Î ºÙ°Ô µÈ´Ù.
float:right - ·¹À̾ ¿ìÃøÀ¸·Î Á¤·ÄµÇ¸ç, ÀÌÈÄ Ãß°¡µÇ´Â ·¹À̾î´Â ¿·(¿ìÃø)À¸·Î ºÙ°Ô µÈ´Ù.
clear:both - À§ÀÇ Àû¿ëÀÌ ÇØÁ¦µÈ´Ù.
|
|
̵̧ : 324 |
̵̧
¸ñ·Ï
|
|
|  |
|