°³¶ËÀ̳׿¡¼ ÆÇ¸ÅµÈ "À¥ µðÀÚÀ̳ʸ¦ À§ÇÑ jQuery" Á¤°¡ 25,000¿ø Æò±ÕÇÒÀΰ¡
|
|
|
1Àå. °£´ÜÈ÷ »ìÆ캸´Â jQuery¿¡ °üÇÑ ±âÃÊÁö½Ä 1-1 jQuery¶õ? ¾ÐµµÀûÀÎ Àα⸦ ÀÚ¶ûÇÏ´Â JavaScript ¶óÀ̺귯¸®, jQuery »ùÇà ÄÚµå·Î º¸´Â jQueryÀÇ Æí¸®ÇÔ °¡º±´Ù! ±×¸®°í Å©·Î½ººê¶ó¿ì¡À» Áö¿øÇÑ´Ù!
1-2 jQuery È°¿ë Áغñ jQuery ´Ù¿î·Îµå jQuery¸¦ ÀÐ¾î µéÀÌ´Â ºÎºÐ Column01_Google ¼¹ö¿¡¼ jQuery »ç¿ëÇϱâ
2Àå. °£´Ü ¿¹Á¦·Î jQuery ±âÃÊ ´ÙÁö±â 2-1 jQuery ±âÃÊ¿Í ¼¿·ºÅÍ(Selector)ÀÇ »ç¿ë¹ý JavaScript¿Í HTML/CSSÀÇ °ü°è JavaScriptÀÇ ½ÇÇà ŸÀְ̹ú jQueryÀÇ ready ÇÔ¼ö HTMLÀÇ Å±׸¦ ÁöÁ¤ÇÏ´Â "¼¿·ºÅÍ" 1. CSS¿¡¼ ÀÚÁÖ ÀÌ¿ëµÇ´Â ¼¿·ºÅÍ 2. CSS2 ¼¿·ºÅÍ 3. CSS3 ¼¿·ºÅÍ 4. CSS ¼Ó¼º ¼¿·ºÅÍ 5. jQuery ÀÚü ÇÊÅÍ Jquery ¼¿·ºÅÍ Á¤¸®
2-2 ±âº» ¸í·ÉÀ» ÀÌ¿ëÇÑ HTML/CSSÀÇ Á¶ÀÛ HTML/CSS¸¦ ¸¶À½´ë·Î Á¶ÀÛÇÒ ¼ö ÀÖ´Â jQuery ¸í·É 1. ÅؽºÆ® º¯°æ°ú °¡Á®¿À±â 2. HTML º¯°æ°ú °¡Á®¿À±â 3. HTML »ðÀÔ 4. HTML À̵¿ 5. ´Ù¸¥ ű׷Π°¨½Î±â 6. ÅÂ±× º¯°æ 7. ÅÂ±× Á¦°Å 8. ¼Ó¼º°ª º¯°æ°ú °¡Á®¿À±â 9. class ¼Ó¼º Ãß°¡¿Í Á¦°Å 10. CSS Á¦¾î º¹¼öÀÇ ¸í·ÉÀ» Á¶ÇÕÇÏ´Â "¸Þ¼µåüÀÎ" HTML/CSS¸¦ Á¶ÀÛÇÏ´Â jQuery ¸í·É¾î Á¤¸®
2-3 'À̺¥Æ®'·Î ŸÀ̹ÖÀ» ¼³Á¤ÇÏÀÚ - Ajax »ç¿ëÇϱâ ó¸® ŸÀ̹ÖÀ» °áÁ¤ÇÏ´Â "À̺¥Æ®" HTMLÀ» ÀÐ¾î µéÀ̴ ŸÀֿ̹¡ ½ÇÇàµÇ´Â ready() ´Ù¸¥ À̺¥Æ® 󸮿¡µµ ready()´Â Çʼö Ç׸ñ À̺¥Æ®ÀÇ ±âº»À» click()À¸·Î ¹è¿ìÀÚ ´õºí Ŭ¸¯ À̺¥Æ®¸¦ °¨ÁöÇÏ´Â dbclick() ¸¶¿ì½ºÀÇ ¹öÆ° Á¶ÀÛÀ» °¨ÁöÇÏ´Â mousedown()/mouseup() Ŭ¸¯µÉ ¶§¸¶´Ù ´Ù¸¥ 󸮸¦ ½ÇÇàÇÏ´Â toggle() ¸¶¿ì½º¿À¹ö/¸¶¿ì½º¾Æ¿ôÀ» °¨ÁöÇÏ´Â mouseover()/mouseout() ¸¶¿ì½ºÀÇ ¿òÁ÷ÀÓ¿¡ ¸ÂÃç¼ Ã³¸®¸¦ ½ÇÇàÇÏ´Â mousemove() À̺¥Æ® ¹ß»ý½Ã¿¡ ÇÑ ¹ø¸¸ 󸮸¦ ½ÇÇàÇÏ´Â one() ¼³Á¤µÇ¾î ÀÖ´Â À̺¥Æ® 󸮸¦ Ãë¼ÒÇÏ´Â unbind() ¾ÕÀ¸·Î Ãß°¡µÉ ű׿¡ À̺¥Æ® 󸮸¦ ¼³Á¤ÇÒ ¼ö ÀÖ´Â live() jQuery À̺¥Æ® Á¤¸® [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] a ű׿¡ ¼³Á¤ÇÑ click À̺¥Æ® 󸮰¡ µ¿ÀÛÇÏÁö ¾Ê´Â´Ù! [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] a ű׿¡ ¼³Á¤ÇÑ dbclick()ÀÌ µ¿ÀÛÇÏÁö ¾Ê¾Æ! [JavaScript ¿øÆ÷ÀÎÆ® ·¹½¼] JavaScript·Î ÅؽºÆ® °áÇÕÇϱâ
2-4 Æû ű×ÀÇ ±â´ÉÀ» ÀÍÇôº¸ÀÚ Æû ű×ÀÇ ±â´ÉÀ» Ãæ½ÇÈ÷ Á¦°øÇÏ´Â jQuery 1. Æû ű×ÀÇ °ªÀ» °¡Á®¿À°í º¯°æÇÏ´Â ¸í·É 2. Æû ű׿¡ °üÇÑ À̺¥Æ® ó¸® 3. Æû ű׸¦ ¼±ÅÃÇÏ´Â ¼¿·ºÅÍ [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] change()°¡ µ¿ÀÛÇÏÁö ¾Ê´Â´Ù? [JavaScript ¿øÆ÷ÀÎÆ® ·¹½¼] Á¶°Ç¿¡ µû¶ó ´Ù¸¥ 󸮸¦ °¡´ÉÇÏ°Ô ÇÏ´Â if¹®
2-5 À¥ ÆäÀÌÁöÀÇ Æí¸®¼ºÀ» ³ôÀδÙ. ÀÌ¹Ì Àß ¾Ë·ÁÁ® ÀÖ´Â "Ajax"¶õ ¹«¾ùÀΰ¡? À¥ ÆäÀÌÁö¿¡ ÅؽºÆ®¸¦ »ðÀÔÇÏ´Â load() load()¸¦ ÀÌ¿ëÇÏ¿© ¿ÜºÎÀÇ HTML Ç¥½ÃÇϱâ XML µ¥ÀÌÅ͸¦ °¡Á®¿Í¼ º¯È¯ÇÏ¿© Ç¥½ÃÇϱâ [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] "±ÛÀÚ°¡ ±úÁö´Â °æ¿ì ¶Ç´Â ÀÐ¾î µéÀÌÁö ¾Ê´Â °æ¿ì" - Ajax¸¦ »ç¿ëÇÒ ¶§ÀÇ ÁÖÀÇÁ¡ [jQuery ¿øÆ÷ÀÎÆ® ·¹½¼] ¼¿·ºÅÍ·Î ÁöÁ¤µÈ ű׿¡ ¹Ýº¹ 󸮸¦ ¼öÇàÇÏ´Â each()
2-6 ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú·Î ¿òÁ÷ÀÓÀ» ÀÔÇôº¸ÀÚ ºñÇ¥½Ã »óÅÂÀÇ Å±׸¦ Ç¥½ÃÇÏ´Â show() Ç¥½Ã ÁßÀΠű׸¦ ¼û±â´Â hide() ű×ÀÇ Ç¥½Ã/ºñÇ¥½Ã¸¦ ¹Ýº¹ÇÏ¿© º¯°æÇÏ´Â toggle() Ç¥½Ã/ºñÇ¥½Ã¸¦ ½½¶óÀ̵ù È¿°ú·Î º¯°æÇÏ´Â slideDown()/slideUp() Ç¥½Ã/ºñÇ¥½Ã¸¦ ½½¶óÀ̵ù È¿°ú·Î ¹Ýº¹ÇÏ¿© º¯°æÇÏ´Â slideToggle() Ç¥½Ã »óŸ¦ ÆäÀ̵åÀÎ/ÆäÀ̵å¾Æ¿ôÀ¸·Î º¯°æÇÏ´Â fadeIn()/fadeOut() Åõ¸íµµ¸¦ ¼¼È÷ º¯°æÇÏ´Â fadeTo() µ¶ÀÚÀûÀÎ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ¼³Á¤ÇÒ ¼ö ÀÖ´Â animate() ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¿Í °ü·ÃµÈ ¸í·É Á¤¸® [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] ¸ØÃßÁö ¾Ê´Â ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ÇØ°áÇÏÀÚ [CSS ¿øÆ÷ÀÎÆ® ·¹½¼] ¸¶¿ì½º Æ÷ÀÎÅ͸¦ º¯°æÇÏ´Â cursor ¼Ó¼ºÀ» ÀÍÇôº¸ÀÚ [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] fadeOut("slow")¿Í fadeTo("slow", 0)Àº °°Àº°¡? Column02_ JQuery¿Í ´Ù¸¥ JavaScript ¶óÀ̺귯¸®ÀÇ °øÀ¯
3Àå. ½Ç¹«¿¡¼ »ç¿ëÇÒ ¼ö ÀÖ´Â µðÀÚÀÎ ·¹½ÃÇÇ 3-1 CSS ¼¿·ºÅ͸¦ ÀÌ¿ëÇÑ ½ºÆ®¶óÀÌÇÁ Å×À̺í CSS3 ¼¿·ºÅÍÀÇ »ç¿ëÀ¸·Î ÀÛ¾÷ È¿À²À» ³ôÀÌÀÚ ½ºÆ®¶óÀÌÇÁ Å×ÀÌºí ¸¸µé±â ¸¶¿ì½º¿À¹ö·Î ÇàÀ̳ª ¿¿¡ ÇÏÀ̶óÀÌÆ® È¿°ú ÁÖ±â [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] jQuery·Î CSS¸¦ Á÷Á¢ Á¶ÀÛÇÏ´Â ¹æ¹ýÀº ÁÁÁö ¾Ê½À´Ï´Ù. [JavaScript ¿øÆ÷ÀÎÆ® ·¹½¼] ÅؽºÆ® ¿¬°á°ú °è»ê½ÄÀÇ Â÷ÀÌ
3-2 ½½¶óÀ̵å½Ä À̹ÌÁö °¶·¯¸® À̹ÌÁö °¶·¯¸®ÀÇ ±âº»ÀÌ µÇ´Â ºÎºÐÀ» ¸¸µé¾î º¸ÀÚ ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú·Î ±×¸²À» ¸Å²ô·´°Ô º¯°æÇØ º¸ÀÚ ±×¸²ÀÌ Ãß°¡µÇ´Â ½½¶óÀ̵å½Ä °¶·¯¸®·Î °³¼±Çغ¸ÀÚ [JavaScript ¿øÆ÷ÀÎÆ® ·¹½¼] ¹®ÀÚ¿À» ¼ö½ÄÀ¸·Î ¹Ù²ãÁÖ´Â parseInt()
3-3 ºÎµå·¯¿î ¾ÆÄÚµð¾ð ÆгΠ°£´ÜÇÑ ¾ÆÄÚµð¾ð ¸¸µé±â ´õ¿í º¸±â ÁÁ°í »ç¿ëÇϱâ Æí¸®ÇÑ ¾ÆÄÚµð¾ðÀ¸·Î °³¼± [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] "JavaScript off"¸¦ °í·ÁÇÑ UI µðÀÚÀÎÀ» ÇÏÀÚ [°í°´ÀÇ ¿ä±¸»çÇ׿¡ ´ëóÇϱâ] "¾ÆÄÚµð¾ðÀ» ¿·À¸·Î ¿°í ´Ý°Ô ÇØÁÖ¼¼¿ä!"
3-4 Æ÷ÅлçÀÌÆ®¿¡¼ ¸¹ÀÌ º¼ ¼ö ÀÖ´Â ÅÇ ÆгΠ±âº» ÅÇ ÆгÎÀÇ ÀÛ¼º¹ý ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú·Î Á» ´õ º¸±â ÁÁÀº ÅÇ ÆгηΠ°³¼± [°í°´ÀÇ ¿ä±¸»çÇ׿¡ ´ëóÇϱâ] °í°´ÀÌ °£´ÜÈ÷ º¯°æÇÒ ¼ö ÀÖ´Â ÅÇ ÆгÎÀ» ¸¸µé¾î º¸ÀÚ
3-5 °³¼ºÀûÀÎ 3Á¾·ùÀÇ ÅøÆÁ CSS·Î ²Ù¹Î ½ÉÇÃÇÑ ÅøÆÁ Åõ¸íÇÑ GIF·Î ¸¸µç °íÁ¤À§Ä¡ ÅøÆÁ Åõ¸íÇÑ PNG·Î ¸¸µç ŸÀÌ¸Ó½Ä ÅøÆÁ
3-6 ·Ñ¿À¹ö Çü½ÄÀÇ ³»ºñ°ÔÀÌ¼Ç ¸Þ´º ¹Ù ·Ñ¿À¹öÀÇ ±âº»ÀûÀÎ ±¸Á¶ºÎÅÍ ¸¸µé±â ¹ü¿ëÀûÀÎ ·Ñ¿À¹ö·Î °³¼±Çϱâ À̹ÌÁöÀÇ ÇÁ¸®·Îµå(preload) ó¸® Ãß°¡ [JavaScript ¿øÆ÷ÀÎÆ® ·¹½¼] ¹®ÀÚ¿ ġȯÀ» Æí¸®ÇÏ°Ô ÇØÁÖ´Â Á¤±ÔÇ¥Çö
3-7 Åõ¸íÇÑ PNG À̹ÌÁö¸¦ Áö¿øÇÏ´Â ·Ñ¿À¹ö ·Ñ¿À¹ö ±â´ÉÀÇ ±âº» ºÎºÐ º¹½À IE6¿¡¼ÀÇ Åõ¸í PNG Ç¥½Ã Å©·Î½ººê¶ó¿ì¡ °¡´ÉÇÑ Åõ¸í PNG ·Ñ¿À¹ö ±â´É [CSS ¿øÆ÷ÀÎÆ® ·¹½¼] Åõ¸í PNG¸¦ À¥ Á¦ÀÛ¿¡ ÀÌ¿ëÇϱâ
3-8 ´Ù´Ü°è Çü½ÄÀÇ µå·Ó´Ù¿î ¸Þ´º ±âº» µå·Ó ´Ù¿î ¸Þ´º ´Ù´Ü°è ±¸Á¶¸¦ Áö¿øÇÏ´Â µå·Ó´Ù¿î ¸Þ´º·Î °³¼± [CSS ¿øÆ÷ÀÎÆ® ·¹½¼] float Çö»óÀ» Á¦°ÅÇÏ´Â clearfix
3-9 Lightbox Çü½ÄÀÇ ¸ð´Þ À©µµ¿ì HTML°ú CSS·Î Ç¥ÇöÀ» »ý°¢ÇÏÀÚ jQuery·Î ¸ð´Þ À©µµ¿ì¸¦ ¸¸µéÀÚ [JavaScript ¿øÆ÷ÀÎÆ® ·¹½¼] IE¿¡¼¸¸ "setExpression"À» »ç¿ëÇÏÀÚ [°í°´ÀÇ ¿ä±¸»çÇ׿¡ ´ëóÇϱâ] À̹ÌÁö°¡ ¾Æ´Ñ ÅؽºÆ®¸¦ ¸ð´Þ À©µµ¿ì·Î Ç¥½Ã
3-10 µå·¡±×&µå·ÓÀ¸·Î ¿òÁ÷ÀÌ´Â Ç÷ÎÆà À©µµ¿ì ±âº» Ç÷οìÆà À©µµ¿ì ¸¸µé±â IE6¿¡¼ ¹ö±× Á¦°ÅÇϱâ [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] Åõ¸í PNGÀÇ ÆäÀ̵åÀÎ/ÆäÀ̵å¾Æ¿ô È¿°ú°¡ °Ë°Ô º¯ÇÑ´Ù
3-11 À¯È¿¼º ±â´ÉÀ» Áö¿øÇÏ´Â ¸ÞÀÏ Æû Ŭ·¡½º ¼Ó¼ºÀ¸·Î ·êÀ» ÁöÁ¤ÇÏ´Â ¹ü¿ëÀûÀÎ Validation ±â´É
3-12 Amazon Çü½ÄÀÇ ½½¶óÀ̵ù À©µµ¿ì HTML/CSS·Î ½½¶óÀ̵ù À©µµ¿ìÀÇ º£À̽º¸¦ ¸¸µéÀÚ [°í°´ÀÇ ¿ä±¸»çÇ׿¡ ´ëóÇϱâ] "½½¶óÀ̵ù À©µµ¿ì¸¦ ÀÚµ¿À¸·Î ½½¶óÀ̵ùµÇµµ·Ï ÇØÁÖ¼¼¿ä!"
3-13 Ajax¸¦ ÀÌ¿ëÇÑ ºÎµå·¯¿î ÆäÀÌ¡ µ¥ÀÌÅÍ HTMLÀ» ÁغñÇÏÀÚ Àüü HTMLÀ» ¸¸µéÀÚ [°í°´ÀÇ ¿ä±¸»çÇ׿¡ ´ëóÇϱâ] "´ë¿ë·®ÀÇ µ¥ÀÌÅ͸¦ Ajax·Î Ç¥½ÃÇÏ°í ½Í½À´Ï´Ù" Column03_ Firebug¸¦ ÀÌ¿ëÇÑ µð¹ö±ë Column04_ jQueryÀÇ °í¼ÓÈ
4Àå. jQuery Ç÷¯±×ÀÎÀ¸·Î Æí¸®ÇÑ À¥ Á¦ÀÛ 4-1 jQuery Ç÷¯±×ÀÎÀ̶õ? ½Ç¹«¿¡µµ ÇнÀ¿¡µµ Æí¸®ÇÑ jQuery Ç÷¯±×ÀÎ jQuery Ç÷¯±×ÀÎÀÇ ±âº»ÀûÀÎ »ç¿ë¹ý jQuery Ç÷¯±×ÀÎÀ» ã´Â ¹æ¹ý [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] Ç÷¯±×ÀÎ ÀÌ¿ë ½Ã¿¡´Â ¶óÀ̼±½º È®ÀÎÀ»¡¦
4-2 ½Ç¹«¿¡¼ »ç¿ëÇÒ ¼ö ÀÖ´Â jQuery Ç÷¯±×ÀÎ table ű׿¡ ¼ÒÆ®(Á¤·Ä) ±â´ÉÀ» ºÙÀÎ "table sorter" ´Ùä·Î¿î UI°¡ ÆÐÅ°Áö¿¡ µé¾îÀÖ´Â "Interface elements" [½Ç¹«¿¡¼ ÀÚÁÖ ³ªÅ¸³ª´Â ÇÔÁ¤] jQuery Ç÷¯±×ÀÎÀÌ µ¿ÀÛÇÏÁö ¾Ê´Â´Ù. Column05_ jQuery Ç÷¯±×ÀÎÀ» ¸¸µé¾î º¸ÀÚ
"°£°áÇÏ°í Á¤±³ÇÑ ÀÔ¹®¼"·Î Á¤ÀÇÇÏ°í ½ÍÀº Ã¥ÀÔ´Ï´Ù. jQuery´Â À¥ µðÀÚÀÎÀ» Æí¸®ÇÏ°Ô Çϱâ À§ÇØ µîÀåÇÏ¿´½À´Ï´Ù. HTML°ú CSS¸¦ Á¶ÀÛÇؼ ¾î¶² µ¿ÀûÀÎ ¿òÁ÷ÀÓÀ» ÁÖ·Á¸é °ú°Å¿£ ÀÚ¹Ù½ºÅ©¸³Æ®¸¦ ÀÌ¿ëÇؼ »ó´çÈ÷ ³À̵µ ÀÖ´Â ÀÛ¾÷À» ÇÏ¿´´Âµ¥, Áö±ÝÀº ±âº»ÀûÀÎ ¸í·É(jQuery ¸Þ¼µå)ÀÇ ¿ø¸®¿Í »ç¿ë ¹æ¹ý¸¸ ¾Ë¸é À¢¸¸ÇÑ °Ç °³¹ßÀÚÀÇ ¼ÕÀ» ºô¸®Áö ¾Ê°íµµ µðÀÚÀ̳ʰ¡ ó¸®ÇÒ ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù. ¹Ù·Î ÀÌ Ã¥Àº ÇÁ·Î±×·¡¹Ö¿¡ ¾àÇÑ µðÀÚÀ̳ʰ¡ jQuery¸¦ Àß ¾µ ¼ö ÀÖµµ·Ï µµ¿ÍÁִ åÀÔ´Ï´Ù. Àü¹ÝºÎ´Â ¾ÆÁÖ ±âº»±â¸¦ źźÈ÷ ÇØÁÙ ¼ö ÀÖ´Â ³»¿ëÀ» ´Ù·ç°í ÈĹݺο¡´Â Ã¥ÀÇ Àý¹Ý ÀÌ»óÀ» ÇÒ¾ÖÇÏ¿© 13°¡Áö ·¹½ÃÇǸ¦ ±¸Ã¼ÀûÀ¸·Î ´Ù·ç°í ÀÖ½À´Ï´Ù.
ÁÖ¿ä µðÀÚÀÎ ·¹½ÃÇÇ »ìÆ캸±â roadbook.co.kr/52 »ùÇÿø°í »ìÆ캸±â roadbook.co.kr/55
´ë»ó µ¶ÀÚ ÇÁ·Î±×·¡¹ÖÀ̶ó¸é ±×³É °³¹ßÀÚ¿¡°Ô ¸Ã°Ü¹ö¸®´Â À¥ µðÀÚÀÌ³Ê HTML°ú CSS¸¦ È°¿ëÇÑ µðÀÚÀÎÀÇ µ¿Àû ¿òÁ÷ÀÓÀ» ÆľÇÇÏ°íÀÚ ÇÏ´Â À¥ °³¹ßÀÚ À¥ Ç¥ÁØÀ» °øºÎÇÏ°í ÀÖ´Â ½Ç¹« À¥ µðÀÚÀ̳Ê
³ ÆíÇÏ°Ô! ºü¸£°Ô! ¸ÚÁö°Ô! µðÀÚÀÎÇÑ´Ù À¥ µðÀÚÀ̳Ê, jQuery·Î ¾÷±×·¹À̵åÇսôÙ!
µðÀÚÀ̳Ê, °³¹ßÀÚ¿¡°Ô ÀÇÁ¸ÇÏÁö ¸»°í Á¶±Ý¸¸ °øºÎÇսôÙ. HTML°ú CSS·Î ¾Æ¹«¸® »çÀÌÆ®¸¦ ¸ÚÁö°Ô ¸¸µé¾ú´Ù Çصµ »ç¿ëÀÚÀÇ ¿ä±¸¿¡ µû¶ó ½Ã½Ã°¢°¢ µðÀÚÀÎÀ» ¹Ù²Ù±â À§Çؼ´Â ÇÁ·Î±×·¡¹Ö ¿µ¿ªÀÌ ÇÊ¿äÇÕ´Ï´Ù. jQuery´Â ÀÌ°ÍÀ» ½±°Ô ÇØÁÖ´Â JavaScript ¶óÀ̺귯¸®À̸ç ÀÌ Ã¥Àº µðÀÚÀ̳ʵµ ½±°í ºü¸£°Ô ¹è¿ï ¼ö ÀÖµµ·Ï ±âÃʺÎÅÍ ¼³¸íÇÏ°í ÀÖ½À´Ï´Ù.
ÀÌÁ¨ HTML°ú CSS¸¸ ÀßÇؼ´Â ¾È µË´Ï´Ù. À¥ Ç¥ÁØ¿¡¼´Â ±¸Á¶¿Í Ç¥ÇöÀ» ºÐ¸®ÇÏ¿© »çÀÌÆ®¸¦ ¼³°èÇÏ°í »ç¿ëÇÏ´Â ´É·ÂÀÌ Áß¿äÇÕ´Ï´Ù. ¿©±â¿¡ µðÀÚÀ̳ʰ¡ Á¶±Ý¸¸ ¼ö°íÇؼ jQuery¸¦ ¹è¿ì°í È°¿ëÇÑ´Ù¸é µðÀÚÀο¡ ´ëÇÑ À¯¿¬¼ºÀ» ³ôÀÌ°í ÈξÀ Å« ¾È¸ñÀ» °®Ãâ ¼ö ÀÖ½À´Ï´Ù.
Å©·Î½º ºê¶ó¿ì¡ÀÌ °¡´ÉÇÑ jQuery, ÀÌÁ¨ ´ë¼¼ÀÔ´Ï´Ù. Å©·Î½º ºê¶ó¿ì¡Àº ¸ðµç ºê¶ó¿ìÀú¿¡¼ ¶È°°ÀÌ Á¤º¸¸¦ Ç¥ÇöÇØÁÙ ¼ö ÀÖ´Ù´Â °ÍÀ» ÀǹÌÇÕ´Ï´Ù. À¥ Ç¥ÁØ°úµµ ±× ¸ÆÀ» °°ÀÌ ÇÕ´Ï´Ù. ±âÁ¸ÀÇ Ç÷¡½Ã·Î µðÀÚÀÎÀ» Çß´Ù¸é ÀÌÁ¨ jQuery¸¦ ¹è¿öº¸¼¼¿ä.
½Ç¹«¿¡¼ ¹Ù·Î È°¿ëÇÒ ¼ö ÀÖ´Â 13°¡Áö µðÀÚÀÎ ·¹½ÃÇÇ Á¦°ø ½ºÆ®¶óÀÌÇÁ Å×À̺í, ¾ÆÄÚµð¾ð ÆгÎ, ¸¶¿ì½º ·Ñ¸µ µî ´Ù¾çÇÑ ±â¹ýÀ» Àû¿ëÇÑ jQuery µðÀÚÀÎ ·¹½ÃÇǸ¦ »ó¼¼ÇÑ ¼³¸í°ú ÇÔ²² º¸¿©ÁÝ´Ï´Ù. Á¶±Ý¸¸ ÀÀ¿ëÇصµ µ¶Ã¢ÀûÀÌ°í ¸ÚÁø UI¸¦ ¸¸µé ¼ö ÀÖ½À´Ï´Ù.
ÆíÁýÀÚ ÄÚ¸àÆ® ÀÌ Ã¥À» ÁøÇàÇÏ¸é¼ ÁøÂ¥ À¥ µðÀÚÀ̳ʵµ º¼ ¼ö ÀÖÀ»±î? ÇÏ´Â ÀDZ¸½ÉÀÌ µé¾ú´ø °Ô »ç½ÇÀÔ´Ï´Ù. ¾Æ¹«¸® jQuery°¡ »ç¿ëÇϱ⠽¬¿î ¶óÀ̺귯¸®¶óµµ ÀÚ¹Ù½ºÅ©¸³Æ®¶ó´Â ÇÁ·Î±×·¡¹Ö ¾ð¾î´Ï±î¿ä. ÇÏÁö¸¸, ¸î °¡Áö ±âº» ÆÐÅϸ¸ ÀÍÈ÷¸é ±Ý»õ Àͼ÷ÇØÁú ¼ö°¡ ÀÖ½À´Ï´Ù. º¹ÀâÇÑ ÇÁ·Î±×·¡¹Ö Áö½ÄÀº °¨Ãß°í ¿¹Á¦ À§ÁÖ·Î ¼³¸íÇϱ⠶§¹®¿¡ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖ½À´Ï´Ù. ƯÈ÷ HTML5¿Í CSS3¸¦ ÀÌ¿ëÇؼ À¥ Ç¥ÁØ °³¹ß ¹æ½ÄÀ¸·Î °³¹ßÇØ¾ß ÇÏ´Â À¥ µðÀÚÀ̳ʳª °³¹ßÀڴ ªÀº ±â°£¿¡ ½±°Ô ÀÍÈ÷°í ¾ÆÁÖ Å« È¿°ú¸¦ º¼ ¼ö ÀÖÀ» °ÍÀ¸·Î ±â´ëÇÕ´Ï´Ù.
|
|
|
|
|