°³¶ËÀ̳׿¡¼ ÆÇ¸ÅµÈ "´ÙÀ̳»¹ÍÇÑ À¥ Ç¥ÁØ »çÀÌÆ®¸¦ À§ÇÑ DOM ½ºÅ©¸³Æ®" Á¤°¡ 25,000¿ø Æò±ÕÇÒÀΰ¡
|
|
|
1Àå. °£´ÜÈ÷ »ìÆ캸´Â ÀÚ¹Ù½ºÅ©¸³Æ® ¿ª»ç ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ÃâÇö ¹®¼ °´Ã¼ ¸ðµ¨(DOM)¿¡ ´ëÇØ ºê¶ó¿ìÀú ¾÷ü °£ ÀüÀï DHTMLÀº ¸ðÈ£ÇÑ ¿ë¾î ºê¶ó¿ìÀú °£ ºñȣȯ ¹®Á¦ ¹ß»ý Ç¥ÁØÀÇ Á߿伺 ÀÎ½Ä ´Ù¸¥ ºÐ¾ß¿¡¼ÀÇ Ç¥ÁØ ºê¶ó¿ìÀú ÀüÀï Á¾Àü ¼±¾ð À¥ Ç¥ÁØ ½Ã´ëÀÇ °³¸· 2Àå¿¡¼ ´Ù·ê ³»¿ë
2Àå. ÀÚ¹Ù½ºÅ©¸³Æ® ¹®¹ý ÀÍÈ÷±â ÄÚµå ÀÛ¼º Àü¿¡ ¾Ë¾Æ¾ß ÇÒ Á¡ ¹®¹ý °øºÎ ¸í·É¹® ÁÖ¼® º¯¼ö µ¥ÀÌÅÍ Çü½Ä ¹®ÀÚ¿ ¼ýÀÚ ºÒ¸° °ª ¹è¿ °áÇÕÇü ¹è¿ ¿¬»êÀÚ »ê¼ú ¿¬»êÀÚ Á¶°Ç¹® ºñ±³ ¿¬»êÀÚ ³í¸® ¿¬»êÀÚ ¹Ýº¹¹® while¹® do...while¹® for¹® ÇÔ¼ö º¯¼ö À¯È¿ ¿µ¿ª °´Ã¼ ³×ÀÌƼºê °´Ã¼ È£½ºÆ® °´Ã¼ 3Àå¿¡¼ ´Ù·ê ³»¿ë
3Àå. ¹®¼ °´Ã¼ ¸ðµ¨(DOM)À̶õ? D´Â ¹®¼ÀÔ´Ï´Ù O´Â °´Ã¼ÀÔ´Ï´Ù MÀº ¸ðµ¨ÀÔ´Ï´Ù ³ëµå ¿¤¸®¸ÕÆ® ³ëµå ÅؽºÆ® ³ëµå ¼Ó¼º ³ëµå CSS¿ÍÀÇ °ü°è getElementById getElementsByTagName ¼Ó¼º ´Ù·ç±â getAttribute setAttribute 4Àå¿¡¼ ´Ù·ê ³»¿ë
4Àå. ÀÚ¹Ù½ºÅ©¸³Æ®·Î ¸¸µå´Â À̹ÌÁö °¶·¯¸® ¸¶Å©¾÷ ÄÚµå ÀÛ¼ºÇϱâ ÀÚ¹Ù½ºÅ©¸³Æ® ÀÛ¼ºÇϱâ DOM Àüȯ ÇÔ¼ö ¿Ï¼º ÀÚ¹Ù½ºÅ©¸³Æ® Àû¿ëÇϱâ À̺¥Æ® Çڵ鷯 ÇÔ¼ö È®Àå childNodes ÇÁ·ÎÆÛƼ nodeType ÇÁ·ÎÆÛƼ ¸¶Å©¾÷¿¡ ¼³¸í¹® ¿ä¼Ò Ãß°¡ ¼³¸í¹®À» ÀÚ¹Ù½ºÅ©¸³Æ®·Î ¹Ù²Ù±â nodeValue ÇÁ·ÎÆÛƼ firstChild¿Í lastChild nodeValue¸¦ »ç¿ëÇØ ¼³¸í¹® ³»¿ë º¯°æÇϱâ 5Àå¿¡¼ ´Ù·ê ³»¿ë
5Àå. ²À ¾Ë¾Æ¾ß ÇÒ ÇÙ½É ±âº»±â ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ ´ëÇÑ ¿ÀÇØ ¹®Á¦Á¡ ¸¹Àº ÄÚµåÀÇ ÀüÆÄ Ç÷¡½Ã »ç·Ê ²À ÇÊ¿äÇÑÁö öÀúÈ÷ °ËÅäÇϱ⠴ܰèÀû ±â´É Ãà¼Ò javascript: ½´µµ ÇÁ·ÎÅäÄÝ ÀζóÀÎ À̺¥Æ® Çڵ鷯 »ç¿ëÀÚ ¹è·Á CSS ±â¼úÀÇ ±³ÈÆ ´Ü°èÀû ±â´É Çâ»ó ½ºÅ©¸³Æ® ºÐ¸® ÇÏÀ§ ȣȯ¼º ºê¶ó¿ìÀú °Ë»ç 6Àå¿¡¼ ´Ù·ê ³»¿ë
6Àå. À̹ÌÁö °¶·¯¸® ±â´É °³¼± º¹½À ´Ü°èÀû ±â´É Ãà¼Ò°¡ °¡´ÉÇÑ°¡? ½ºÅ©¸³Æ®¸¦ ºÐ¸®Çߴ°¡? À̺¥Æ® Çڵ鷯 Ãß°¡ Á¡°Ë »çÇ× °£´ÜÇÑ À̸§ ÁöÁ¤ ¹Ýº¹ ±¸¹® ¸¸µé±â µ¿ÀÛ º¯°æ ¸¶¹«¸® ÀÛ¾÷ ³ª´©±â °ËÁõ ÄÚµå ÀÛ¼º ¹Ì¼¼ Á¶Á¤ Å°º¸µå Á¢±Ù¹ý onkeypress ´Ù½Ã º¸±â CSS¿Í °øÀ¯Çϱâ DOM ÄÚ¾î¿Í HTML-DOM 7Àå¿¡¼ ´Ù·ê ³»¿ë
7Àå. ½ÇÇà ½Ã¿¡ ¸¶Å©¾÷ ÄÚµå »ý¼ºÇϱâ document.write innerHTML Âù¹Ý ¾ç·Ð DOM ¸Þ¼Òµå createElement appendChild createTextNode Á»´õ º¹ÀâÇÑ Á¶ÇÕ »çÁøø ´Ù½Ã »ìÆ캸±â insertBefore insertAfter ÇÔ¼ö ¸¸µé±â insertAfter ÇÔ¼ö »ç¿ë »çÁøø ¸¶¹«¸® ¿ä¾à 8Àå¿¡¼ ´Ù·ê ³»¿ë
8Àå. Àǹ̰¡ »ìµµ·Ï ÄÁÅÙÆ® °³¼±Çϱâ ÇÏ¸é ¾È µÇ´Â °Í ¼Ó¼ºÀ» ȸ鿡 Ç¥½ÃÇϱ⠳»¿ë HTMLÀ̳Ä? XHTMLÀ̳Ä? ¸¶Å©¾÷ CSS ÀÚ¹Ù½ºÅ©¸³Æ® Ãà¾à¾î ¸ñ·Ï Ç¥½Ã displayAbbreviations ÇÔ¼ö ¸¸µé±â ¸¶Å©¾÷ »ý¼º À¥ ºê¶ó¿ìÀú Æøź Àο뱸 Ç¥½Ã displayCitations ÇÔ¼ö ¸¸µé±â Á¢±ÙÅ° Ç¥½Ã ¸¶Å©¾÷ ÀÚ¹Ù½ºÅ©¸³Æ® ¿ä¾à 9Àå¿¡¼ ´Ù·ê ³»¿ë
9Àå. CSS¿Í DOM ¿¬µ¿Çϱâ À¥ ÆäÀÌÁöÀÇ ¼¼ °¡Áö ¿ä¼Ò ±¸Á¶ Ç¥Çö µ¿ÀÛ ¼¼ °¡Áö ¿ä¼Ò ºÐ¸®Çϱâ style ¼Ó¼º ½ºÅ¸ÀÏ °¡Á®¿À±â ÀζóÀÎ ½ºÆ®Àϸ¸ µ¿ÀÛ ½ºÅ¸ÀÏ ÁöÁ¤Çϱâ DOMÀ» ÀÌ¿ëÇÑ ½ºÅ¸ÀÏ ÁöÁ¤ÀÌ À¯¿ëÇÑ °æ¿ì´Â? ƯÁ¤ ³ëµåÀÇ ¸ð¾çÀ» ²Ù¹Ð °æ¿ì ¹Ýº¹µÇ´Â ½ºÅ¸ÀÏÀÏ °æ¿ì À̺¥Æ® ó¸® °á°ú¸¦ º¸¿©ÁÖ´Â °æ¿ì className ÇÔ¼ö Ãß»óÈ 10Àå¿¡¼ ´Ù·ê ³»¿ë
10Àå. ¾Ö´Ï¸ÞÀÌ¼Ç ½½¶óÀ̵å¼î ¸¸µé±â ¾Ö´Ï¸ÞÀ̼ÇÀ̶õ? À§Ä¡ ½Ã°£ setTimeout µ¿ÀÛ ¹Ù²Ù±â ÀçÈ°¿ë ÇÔ¼ö ¸¸µé±â ¾Ö´Ï¸ÞÀÌ¼Ç ½ÇÀü ¿ä±¸ »çÇ× ÇØ°á ¹æ¹ý CSS ÀÚ¹Ù½ºÅ©¸³Æ® º¯¼ö ¿µ¿ª ¹®Á¦ ÇØ°á ºÎµå·´°Ô ¸¸µé±â ¸¶Áö¸· ¼ÕÁú ¸¶Å©¾÷ ¸¸µé±â 11Àå¿¡¼ ´Ù·ê ³»¿ë
11Àå. ÃÑÁ¤¸® ¼Ò°³ ±âº» ÃÊ¾È »çÀÌÆ® ±¸Á¶ À¥ ¹®¼ ±¸Á¶ µðÀÚÀÎ CSS »ö»ó ·¹À̾ƿô ±Û²Ã ¸¶Å©¾÷ ÀÚ¹Ù½ºÅ©¸³Æ® ¹®¼ ÇÏÀ̶óÀÌÆ® ½½¶óÀÌµå ¼î ³»ºÎ ³×ºñ°ÔÀÌ¼Ç ÀÚ¹Ù½ºÅ©¸³Æ® »çÁøø Å×ÀÌºí ±â´É Çâ»ó Æû ±â´É Çâ»ó ·¹ÀÌºí ±âº» °ª Æû À¯È¿¼º È®ÀÎ ¿ä¾à 12Àå¿¡¼ ´Ù·ê ³»¿ë
12Àå. DOM ½ºÅ©¸³Æ®ÀÇ ¹Ì·¡ À¥À̶õ? À¥ ºê¶ó¿ìÀú ÆÄÀ̾îÆø½º µîÀå À¥ µðÀÚÀÌ³Ê »ï°¢ ÀÇÀÚ DOM ½ºÅ©¸³Æ® ŽºÅ© Æ÷½º Ajax XMLHttpRequest °´Ã¼ Ajax ±â¹Ý ¼ºñ½º ¿¹Á¦ Ajax¿¡ ´ëÇÑ µµÀü Ajax ±â´ÉÀ» ¹Ù¸£°Ô ¾²±â Hijax AjaxÀÇ ¹Ì·¡ À¥ ¾ÖÇø®ÄÉÀÌ¼Ç ¸¶Áö¸· ºÎŹ
ºÎ·Ï ¸Þ¼Òµå ³ëµå ¸¸µé±â createElement createTextNode ³ëµå º¹»çÇϱâ cloneNode ³ëµå Ãß°¡ appendChild insertBefore ³ëµå »èÁ¦Çϱâ removeChild ³ëµå ¹Ù²Ù±â replaceChild ³ëµå °ª º¯°æ setAttribute ³ëµå ã±â getAttribute getElementById getElementsByTagName hasChildNodes ÇÁ·ÎÆÛƼ ³ëµå ÇÁ·ÎÆÛƼ nodeName nodeType nodeValue ³ëµå ³»ºÎ ±¸Á¶ º¸±â childNodes firstChild lastChild nextSibling parentNode previousSibling
ºÎ·Ï ¥± 1. À¥ Ç¥ÁØÀ» »ì¸®´Â ¸ÚÁø DOM ½ºÅ©¸³Æ® »ìÆ캸±â 2. YUI, Prototype À¥ Ç¥ÁØ¿¡ ¸Â°Ô ¾²±â 3. ÂøÇÑ ½ºÅ©¸³Æ®·Î ¸¸µå´Â Ajax À¥ »çÀÌÆ® ±¸Á¶
|
|
|
|
|