Dynamic HTML Go to UP


1 / 2 / 3


DHTML¿¡¼­ ÁÖ·Î »ç¿ëÇÏ´Â layer¿Í css ·¹À̾îÀÇ object·Î ÁöÁ¤µÇ´Â °Í°ú °¡Áö°í ÀÖ´Â property¸¦ ´Ù·ç´Â °ÍÀÌ ie4, nn4¿¡¼­ ¼­·Î ¸¹ÀÌ ´Ù¸¨´Ï´Ù.

NN4¿¡¼­´Â JavaScript1.1¿¡¼­¿Í °°ÀÌ ÇϳªÀÇ Ãß°¡µÈ ObjectÀÔ´Ï´Ù. Áï document.Images°°ÀÌ ¿©±â¼­µµ document.ObjectÀÔ´Ï´Ù. document.objectName À̳ª document.layers["ObjectName"]·Î »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

IE4´Â ÀÌ Object À§¿¡ "collection"À̶ó´Â "all" Object°¡ ÀÖ½À´Ï´Ù. ÆäÀÌÁö¿¡ ÀÖ´Â ¸ðµç ÅÃÀº ÀÌ all À̶ó´Â Object¿¡ Æ÷ÇԵ˴ϴÙ. ±×·¡¼­, document.all.ObjectÀÔ´Ï´Ù. "collection"À̶õ ÆäÀÌÁö¿¡ Àִ ƯÁ¤ elementÀÇ ¹è¿­À» ¸»ÇÕ´Ï´Ù. document.all["ObjectName"]·Î »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

"collection"ÀÇ Á¾·ùÀÔ´Ï´Ù. (all, anchors, applets, areas, cells, children, elements, embeds, filters, forms, frames, images, imports, links, options, plugins, rows, rules, scripts, styleSheets, tbodies)

Object--±¸¼º¿ä¼Ò¿¡¼­ "±¸¼º¿ä¼Ò"´Â Objectº¸´Ù ´õ º¹ÀâÇÕ´Ï´Ù. ºê¶ó¿ìÀú ÀüÀïÀ̶ó´Â ¸»À» ½Ç°¨ÇÕ´Ï´Ù. ¹öÁ¯4ÀÇ µÎ ºê¶ó¿ìÀú¿¡¼­ styleÀ» ´Ù·ç´Â DOMÀÇ ±¸Á¶°¡ ¸¹ÀÌ ´Ù¸£±â ¶§¹®ÀÔ´Ï´Ù.

NN4¿¡¼­ style="position:absolute(¶Ç´Â relative)"´Â Object--±¸¼º¿ä¼Ò·Î µÇ´Âµ¥ ÀÌ position element°¡ ´Ù¸¥ element¸¦ Æ÷ÇÔÇϰí ÀÖÀ¸¸é Æ÷ÇÔµÈ element´Â ÇϳªÀÇ ObjectÀÌÀÚ ÀÚ½ÅÀ» Æ÷ÇÔÇϰí ÀÖ´Â ObjectÀÇ ±¸¼º¿ä¼Ò°¡ µË´Ï´Ù. Áï, position element´Â document¸¦ °¡Áú ¼ö ÀÖ½À´Ï´Ù. À̰ÍÀÌ NN4 JavaScript1.2ÀÇ Å« º¯È­ÀÔ´Ï´Ù.

±×·¡¼­ Æ÷ÇÔµÈ element´Â window.document.element.document.element°¡ µË´Ï´Ù.

IE4´Â Æ÷ÇÔµÈ elementµµ ÀÚ½ÅÀ» Æ÷ÇÔÇϰí ÀÖ´Â element¿Í °°ÀÌ ÇϳªÀÇ ObjectÀÔ´Ï´Ù.
µÑ ´Ù window.document.all.element ÀÔ´Ï´Ù. Áï, Object°èÃþÀÌ ¾ø°í ´Ü¼øÈ÷ HTMLÀÌ Ãâ·ÂµÈ ¼ø¼­·Î element¸¦ »ç¿ëÇÕ´Ï´Ù.

Object--±¸¼º¿ä¼Ò¿¡¼­ style ±¸¼º¿ä¼Ò´Â style¿¡ ÁöÁ¤µÈ °ÍÀε¥, °¢ ±¸¼º¿ä¼Ò´Â JavaScript·Î »ç¿ëÇÒ ¶§´Â À̹ÌÁö°°ÀÌ Position elementÀÇ propertyÀÔ´Ï´Ù.

NN4¿¡¼­´Â ´Ü¼øÈ÷ document.element.±¸¼º¿ä¼Ò ÀÔ´Ï´Ù. document.layers["elementName"].±¸¼º¿ä¼Ò ·Î µÇÁö¸¸, IE4¿¡¼­ elementÀÇ style ±¸¼º¿ä¼Ò´Â "style" À̶ó´Â Object¿¡ Æ÷ÇԵ˴ϴÙ. Áï, STYLE Object´Â element Object¿¡¼­ element ObjectÀÇ style ±¸¼º¿ä¼Ò(property)¸¦ ¸ðµÎ Æ÷ÇÔÇÏ´Â »õ·Î¿î ObjectÀÔ´Ï´Ù. ±×·¡¼­ document.all.element.style.±¸¼º¿ä¼Ò °¡ µË´Ï´Ù. document.all["elementName"].style.±¸¼º¿ä¼Ò ÀÔ´Ï´Ù.

HTML¿¡¼­ style ¼±¾ð½Ã z-index°°ÀÌ ¼±¾ðÇϴµ¥, JavaScript·Î ÀÐÀ» ¶§´Â zIndex·Î ÀнÀ´Ï´Ù. ¿Ö³ÄÇϸé, JavaScript¿¡¼­ º¯¼öÀ̸§Àº "-"¸¦ »ç¿ëÇÒ ¼ö ¾ø±â ¶§¹®ÀÔ´Ï´Ù. ´Ù¸¥ ¸ðµç style propertyµµ "-" À» »©°í ´ÙÀ½¿¡ ¿À´Â ¾ËÆÄºªÀ» ´ë¹®ÀÚ·Î °¢ style property¸¦ »ç¿ëÇÕ´Ï´Ù. NN4, IE4 µÑ ´Ù °°½À´Ï´Ù.

NN4¿¡¼­´Â absolute position element¿¡¼­ (left, top, z-index, visibility) property´Â ¿Ïº®È÷ Áö¿øÇϴµ¥, ³ª¸ÓÁö´Â Àß ¾ÈµË´Ï´Ù. ¹Ý¸é¿¡, IE4´Â CSS¿¡¼­ »ç¿ë °¡´ÉÇÑ °ÅÀÇ ¸ðµç property¸¦ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ÀÌ ºÎºÐ¿¡¼­´Â IE4°¡ ÈξÀ ³´½À´Ï´Ù. NN4ÀÇ <layer>¿¡¼­´Â layer ±¸¼º¿ä¼Ò ¸ðµÎ¸¦ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. <LAYER>´Â CSS-P¿Í °°Àº °ÍÀÔ´Ï´Ù. Áö¿øÇÏ´Â ±â´ÉÀº <layer>°¡ ¸¹°í ´Ù¼Ò Â÷À̰¡ ÀÖÁö¸¸ µÑ ´Ù document.layers ÀÔ´Ï´Ù.


--
¹öÁ¯ 5°¡ ³ª¿À¸é NN4¿¡¼­ÀÇ Áö¿øµÇÁö ¾Ê´Â ¸¹Àº styleÀ» Áö¿øÇÒ°ÍÀ¸·Î Netscapeµµ ¸»Çϰí nn4º¸´Ù´Â styleÁö¿øÀÌ ¸¹ÀÌ ³ª¾ÆÁú °ÍÀÔ´Ï´Ù. nn4¿Í ie4¿¡¼­ÀÇ DOMÀÇ °øÅëµÈ Áö¿øµµ °³¼±ÀÇ °¡´É¼ºÀÌ ÀÖÁö¸¸, ´ÙÇàÈ÷ ¸ðµç ¹®Á¦°¡ °³¼±ÀÌ µÈ´Ù¸é À¥ ÀÛ¼ºÀÚÀÇ °í¹ÎÀÌ ¸¹ÀÌ ÁÙ°ÚÁö¸¸ ±×·¡µµ À¥ ÆäÀÌÁö¸¦ ¸¸µå´Â »ç¶÷Àº À§¿¡¼­ ¿­°ÅÇÑ ¹öÁ¯4ÀÇ ¸¹Àº ¹ö±×¿Í ´Ù¸¥Á¡À» ¾Ë¾Æ¾ß ÇÕ´Ï´Ù.

¿Ö³ÄÇϸé, ¹öÁ¯5ÀÇ ºê¶ó¿ìÀú°¡ ³ª¿À´õ¶óµµ ¸ðµç »ç¿ëÀÚ°¡ ¹öÁ¯5 ºê¶ó¿ìÀú·Î ¹Ù²Ù±â ±îÁö´Â ¿À·£ ½Ã°£ÀÌ °É¸®±â ¶§¹®ÀÔ´Ï´Ù. ¾ÆÁ÷ nn3 ÀÌÇÏÀÇ ºê¶ó¿ìÀú¸¦ À§ÇÑ ÆäÀÌÁö¸¦ ¸¸µå´Â »ç¶÷µµ ÀÖÀ¸´Ï±î¿ä..

1 / 2 / 3



TOP