Ã¥¼Ò°³
HTML5, CSS3, JavaScript, jQuery¸¦ ÇÑ ±ÇÀ¸·Î!½ÇÀü ÇÁ·ÎÁ§Æ®¸¦ ÅëÇÏ¿© ¹ÝÀÀÇü À¥»çÀÌÆ®¸¦ Á÷Á¢ ±¸ÇöÇØ º»´Ù!ÀÌ Ã¥Àº ¡®À¥ Ç¥ÁØÀ̶ó´Â ¾à¼Ó¡¯¿¡ ´ëÇÑ À̾߱⸦ ¹ÙÅÁÀ¸·Î, ´©±¸³ª ½±°Ô ´Ü°èÀûÀ¸·Î µû¶ó°¥ ¼ö ÀÖµµ·Ï HTML5, CSS3, Javascript¿Í jQuery±îÁö Ç¥ÁØÇü À¥ Á¦ÀÛÀ» À§ÇÑ ¸ðµç µµ±¸µéÀ» ±âº»ºÎÅÍ È°¿ë±îÁö ¸®µåÇϵµ·Ï ¸¸µé¾îÁ³´Ù. ´©±¸³ª ½±°Ô À¥ Ç¥ÁØ¿¡ ¸Â´Â ÆäÀÌÁö¸¦ Á¦ÀÛÇÒ ¼ö ÀÖµµ·Ï µµ±¸µéÀÇ ±âº»ºÎÅÍ È°¿ë±îÁö ´Ù·çµÇ, PC¿Í ½º¸¶Æ®Æù, ÅÂºí¸´ µî »ç¿ëÀÚÀÇ ±â±â¿¡ µû¶ó À¯¿¬ÇÏ°Ô ±¸ÇöµÇ´Â Â÷¼¼´ë À¥ ±â¼ú ¡®¹ÝÀÀÇü À¥¡¯À» ¼ÒÀç·Î ÇÏ¿© °¡Àå ÃÖ±Ù¿¡ À̽´ÈµÇ´Â ¼ÒÀ縦 ÅëÇÏ¿© Á÷Á¢ À¥ ÆäÀÌÁö¸¦ Á¦ÀÛÇÏ´Â ¸ðµç µ¶Àںе鲲 ½ÇÁ¦ÀûÀÎ µµ¿òÀ» ÁØ´Ù.
ÀúÀÚ¼Ò°³
EIT À¥ °³¹ß ÃÑ°ý, »ï¼ºÀÎÀç°³¹ß¿ø Â÷ÀåÀ» ¿ªÀÓÇÏ¿´À¸¸ç, ÁÖ¿ä Àú¼·Î´Â ½ÇÀüÇÁ·ÎÁ§Æ® ¹ÝÀÀÇü À¥ÆÛºí¸®½Ì, ÀÚ¹Ù½ºÅ©¸³Æ®+jQuery ¸¶½ºÅÍ µîÀÌ ÀÖ´Ù.
¸ñÂ÷
¸Ó¸®¸»½Ç½À¿¡ ÇÊ¿äÇÑ ±âº» ÇÁ·Î±×·¥ ¾È³»¹ÝÀÀÇü ÇÁ·ÎÁ§Æ® ¹Ì¸®º¸±âCHAPTER 1 HTML51.1 HTML5 ±âº» ¹®¼ 01 HTML5 ±âº» ±¸¼º 02 W3C validator 03 ¸¶Å©¾÷ ±âº» ¹®¹ý ±ÔÄ¢1.2 ½Ã¸àƽ ¸¶Å©¾÷°ú ³í¸®ÀûÀÎ ¼ø¼ ¸¶Å©¾÷ 01 ½Ã¸àƽ ¸¶Å©¾÷(Semantic markup) 02 ³í¸®Àû ¼ø¼ ¸¶Å©¾÷(Logical sequence markup)1.3 ºí·Ï ·¹º§ ¿ä¼Ò¿Í ÀζóÀοä¼Ò 01 ºí·Ï ·¹º§ ¿ä¼Ò(Block-level Elements) 02 ÀζóÀÎ ¿ä¼Ò(inline Element) 03 ºí·Ï ·¹º§ ¿ä¼Ò¿Í ÀζóÀÎ ¿ä¼ÒÀÇ Æ¯¼º1.4 ±âº» ¿ä¼Ò 01 Á¦¸ñ [h1]~[h6] 02 ¹®´Ü [p] 03 ÁÖ¼Ò [address] 04 ¸µÅ© [a] 05 À̹ÌÁö [img]1.5 ÅؽºÆ® °ü·Ã ¿ä¼Ò 01 [em],[strong],[mark],[b],[small],[sub],[sup]1.6 ¸ñ·Ï °ü·Ã ¿ä¼Ò 01 ¼ø¼ ¸ñ·Ï [ol] 02 ºñ¼ø¼ ¸ñ·Ï [ul] 03 ¼³¸í ¸ñ·Ï [dl]1.7 Ç¥ °ü·Ã ¿ä¼Ò ¹× ¼Ó¼º 01 Ç¥ »ý¼º [table], [tr], [td], [th], [thead], [tbody], [tfoot], [colgroup] 02 ¼¿ ÇÕÄ¡±â colspan ¼Ó¼º, rowspan ¼Ó¼º 03 Ç¥ Á¢±Ù¼º [caption], scope ¼Ó¼º1.8 Æû °ü·Ã ¿ä¼Ò ¹× ÁÖ¿ä ¼Ó¼º 01 Æû [form], [fieldset] 02 ÇÑÁÙ ÀÔ·Â ¿ä¼Ò [input], type ¼Ó¼º 03 ¿©·¯ ÁÙ ÀÔ·Â ¿ä¼Ò, ¼±Åà ¿ä¼Ò [textarea], [select] 04 Æû Á¢±Ù¼º label ¼Ó¼º 05 ÁÖ¿ä ÀÔ·Â ¼Ó¼º1.9 ±×·ì ¿ä¼Ò 01 [div] 02 [span]1.10 ±¸Á¶ °ü·Ã ¿ä¼Ò 01 [header], [section], [footer], [nav], [article], [aside]1.11 ¹Ìµð¾î ¿ä¼Ò 01 [audio] 02 [video]CHAPTER 2 CSS (CSS5)2.1 CSS ±âº» ¹®¹ý 01 ³»ºÎ ½ºÅ¸ÀϽÃÆ® 02 ¿ÜºÎ ½ºÅ¸ÀϽÃÆ® 03 @import 04 ÀζóÀÎ ½ºÅ¸ÀÏ(inline style)2.2 ¼±ÅÃÀÚ(selector) 01 type ¼±ÅÃÀÚ 02 id ¼±ÅÃÀÚ 03 class ¼±ÅÃÀÚ 04 Àüü ¼±ÅÃÀÚ 05 ÇÏÀ§ ¼±ÅÃÀÚ 06 ÀÚ½Ä ¼±ÅÃÀÚ 07 ÀÎÁ¢ ¼±ÅÃÀÚ 08 ÇüÁ¦ ¼±ÅÃÀÚ 09 ±×·ì ¼±ÅÃÀÚ 10 ¼Ó¼º ¼±ÅÃÀÚ 11 °¡»óŬ·¡½º ¼±ÅÃÀÚ 12 °¡»ó¿ä¼Ò ¼±ÅÃÀÚ 13 Á¾¼Ó ¼±ÅÃÀÚ 14 ¼±ÅÃÀÚÀÇ ¿ì¼±¼øÀ§2.3 ¹®ÀÚ °ü·Ã ½ºÅ¸ÀÏ 01 font-family 02 font-size, ´ÜÀ§ÀÇ °íÂû 03 font-weight 04 font-style 05 font-variant 06 line-height 07 font 08 À¥ÆùÆ® 09 color, »ö»ó ÄÚµå °íÂû 10 letter-spacing, word-spacing 11 text-decoration 12 text-transform 13 text-shadow2.4 ¹®´Ü(paragraph) °ü·Ã ½ºÅ¸ÀÏ 01 text-align 02 vertical-align 03 text-indent 04 word-wrap 05 word-break 06 white-space 07 text-overflow 08 display 09 visibility 10 overflow 11 opacity2.5 ¹è°æ(background) 01 background-color 02 background-image 03 background-repeat 04 background-position 05 background-attachment 06 background-size 07 background-origin 08 background-clip 09 Image Sprite 10 ¹è°æ¿¡ gradient Àû¿ëÇϱâ 11 multiple background2.6 BOX MODEL 01 width, height 02 padding 03 margin 04 border 05 outline 06 box-sizing 07 box-shadow 08 resize 09 appearance2.7 ±âŸ CSS3 ¼Ó¼º 01 ÀÌÂ÷¿ø º¯Çü(2D transform) 02 ¼Ó¼ºÀüȯ(transitions) 03 ¾Ö´Ï¸ÞÀ̼Ç(animation) 04 ´Ù´ÜÆíÁý(multi-column)2.8 ·¹À̾ƿô¥°: float 01 float 02 clear 03 ±× ¿Ü float ÇØÁ¦ÇÏ´Â ¸î °¡Áö ¹æ¹ý2.9 ·¹À̾ƿô¥± : position 01 position 02 left, right, top, bottom 03 z-index 04 float°ú positionÀ¸·Î ·¹À̾ƿô ¸¸µé±â 05 position ÀÀ¿ë ¿¹Á¦2.10 ¹Ìµð¾îÄõ¸®(media query) 01 [link ~ media=¡±¡±] 02 @media 03 media query¸¦ Èä³»³»´Â script2.11 ±× ¹ÛÀÇ layout 01 flex layout 02 grid layoutCHAPTER 3 ÀÚ¹Ù½ºÅ©¸³Æ®3.1 ÀÚ¹Ù½ºÅ©¸³Æ® ±âº» Çü½Ä ¹× Àû¿ë ¹æ¹ý 01 ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±âº» Çü½Ä 02 ±âº» ±ÔÄ¢ 03 Àû¿ë ¹æ¹ý 04 Àû¿ë À§Ä¡ 05 ±âº» ¸í·É¾î3.2 º¯¼ö¿Í »ó¼ö 01 º¯¼ö ¼±¾ð(var, let) 02 »ó¼ö ¼±¾ð(const) 03 µ¥ÀÌÅÍ Å¸ÀÔ(Data Type)3.3 ¿¬»êÀÚ 01 »ê¼ú ¿¬»êÀÚ 02 ´ëÀÔ ¿¬»êÀÚ 03 ºñ±³ ¿¬»êÀÚ 04 ³í¸® ¿¬»êÀÚ 05 ºñÆ® ¿¬»êÀÚ 06 »ïÇ× ¿¬»êÀÚ3.4 Á¦¾î¹® 01 Á¶°Ç¹® 02 ¹Ýº¹¹® 03 ÁßÁö, °Ç³Ê¶Ù±â3.5 ÇÔ¼ö 01 ¼±¾ðÀû ÇÔ¼ö 02 À͸í ÇÔ¼ö 03 return, ¸Å°³º¯¼ö 04 Àü¿ª º¯¼ö¿Í Áö¿ª º¯¼ö 05 Àç±Í ÇÔ¼ö 06 ³»Àå ÇÔ¼ö3.6 °´Ã¼ 01 »ç¿ëÀÚ Á¤ÀÇ °´Ã¼ 02 ³»Àå °´Ã¼3.7 À̺¥Æ® 01 ÁÖ¿ä À̺¥Æ® 02 À̺¥Æ® ¿¬°á 03 À̺¥Æ® °´Ã¼3.8 BOM (Bowser Object Model) 01 window °´Ã¼ 02 location °´Ã¼ 03 screen °´Ã¼ 04 history °´Ã¼ 05 navigator °´Ã¼3.9 DOM (Document Object Model) 01 ¿ä¼Ò ¼±Åà 02 ¿ä¼Ò¿Í ¼Ó¼ºÀÇ »ý¼º ¹× »èÁ¦ 03 ½ºÅ¸ÀÏ 04 form °´Ã¼CHAPTER 4 jQuery4.1 jQuery ¿¬°á ¹æ¹ý 01 Download ¹æ½Ä 02 CDN ¹æ½Ä 03 jQuery Migrate Plugin 04 jQuery ±âº» Çü½Ä4.2 jQuery ¼±ÅÃÀÚ 01 ±âº» ¼±ÅÃÀÚ 02 ¼Ó¼º ¼±ÅÃÀÚ 03 ÇÊÅÍ ¼±ÅÃÀÚ 04 Ž»ö ¼±ÅÃÀÚ4.3 jQuery ÁÖ¿ä ¸Þ¼µå 01 ¹è¿ °ü·Ã ¸Þ¼µå 02 ¿ä¼Ò °ü·Ã ¸Þ¼µå 03 Ŭ·¡½º °ü·Ã ¸Þ¼µå 04 ¼Ó¼º °ü·Ã ¸Þ¼µå 05 ½ºÅ¸ÀÏ °ü·Ã ¸Þ¼µå 06 »ðÀÔ °ü·Ã ¸Þ¼µå 07 ½ºÅ©·Ñ °ü·Ã ¸Þ¼µå 08 »èÁ¦ °ü·Ã ¸Þ¼µå 09 º¹»ç ¹× °¨½Î±â °ü·Ã ¸Þ¼µå4.4 jQuery À̺¥Æ® 01 À̺¥Æ® Á¾·ù 02 À̺¥Æ® ¿¬°á 03 À̺¥Æ® °´Ã¼4.5 jQuery È¿°ú 01 ±âº» È¿°ú 02 Custom È¿°ú4.6. jQuery Ç÷¯±×ÀÎ »ç¿ë ¹æ¹ý 01 SWIPER 02 DATEPICKER4.7 jQuery Ãæµ¹ ¹æÁö¿Í JSON ÆÄÀÏ ºÒ·¯¿À±â 01 $.noConflict() ¸Þ¼µå 02 $.ajax() ¸Þ¼µåCHAPTER 5 ¹ÝÀÀÇü ÇÁ·ÎÁ§Æ® ½Ç¹«5.1 ¸ÞÀÎ ÆäÀÌÁöÀÇ ½Ã¾È Á¡°Ë 01 ¸ÞÀÎ ÆäÀÌÁö PC ½Ã¾È 02 ¸ÞÀÎ ÆäÀÌÁö ÅÂºí¸´ ½Ã¾È 03 ¸ÞÀÎ ÆäÀÌÁö ¸ð¹ÙÀÏ ½Ã¾È 04 ¸ÞÀÎ ÆäÀÌÁö¿¡ ÇÊ¿äÇÑ ±âŸ ½Ã¾È 05 ÄÚµù¿ëÀ¸·Î Àß¶ó³½ À̹ÌÁöµé5.2 ¸ÞÀÎ ÆäÀÌÁöÀÇ ¸¶Å©¾÷ 01 index.htmlÀÇ ½ÃÀÛ ºÎºÐ 02 °Ç³Ê¶Ù±â ¸µÅ© & ³»ºÎ ¸µÅ© 03 header ºÎºÐ 04 º»¹® ³»¿ë ºÎºÐ 05 footer ºÎºÐ 06 Äü ¸Þ´º ºÎºÐ 07 ·¹À̾î Æ˾÷ ºÎºÐ5.3 ¸ÞÀÎ ÆäÀÌÁöÀÇ CSS (common.css) 01 ±âº» ½ºÅ¸ÀÏ 02 ¹öÆ° ½ºÅ¸ÀÏ ¼³Á¤ 03 header ºÎºÐ 04 footer ºÎºÐ 05 ¸ÞÀÎ ·Ñ¸µ ºÎºÐ 06 Àα⠿©ÇàÁö ºÎºÐ 07 »ó´ã ¹× ÃÖ±Ù °Ô½Ã¹° ºÎºÐ 08 Äü ¸Þ´º ºÎºÐ 09 Æ˾÷ ºÎºÐ5.4 ¸ÞÀÎ ÆäÀÌÁöÀÇ ½ºÅ©¸³Æ® (common.js) 01 gnbÀÇ ÀÛµ¿ 02 ¸ð¹ÙÀÏ ¸Þ´º ¶ç¿ì±â 03 top ¹öÆ° ½ºÅ©·Ñ 04 PCºê¶ó¿ìÀú¿¡¼ gnb »ç¶óÁü ¹æÁö5.5 ¼ºê ÆäÀÌÁöÀÇ ½Ã¾È Á¡°Ë 01 ȸ¿ø°¡ÀÔ ÆäÀÌÁö ½Ã¾È 02 ÇÁ·Î±×·¥ ¼Ò°³ ÆäÀÌÁö ½Ã¾È 03 °øÁö»çÇ× ¸ñ·Ï ÆäÀÌÁö ½Ã¾È 04 ·Î±×ÀÎ ÆäÀÌÁö ½Ã¾È 05 ÄÚµù¿ëÀ¸·Î Àß¶ó³½ À̹ÌÁöµé5.6 ¼ºê ÆäÀÌÁöÀÇ ¸¶Å©¾÷°ú CSS 01 ¼ºê ÆäÀÌÁö °øÅë ºÎºÐ 02 ȸ¿ø°¡ÀÔ ÆäÀÌÁö 03 ÇÁ·Î±×·¥ ¼Ò°³ ÆäÀÌÁö 04 °øÁö»çÇ× ¸ñ·Ï ÆäÀÌÁö 05 ·Î±×ÀÎ ÆäÀÌÁö5.7 ¼ºê ÆäÀÌÁöÀÇ ½ºÅ©¸³Æ® 01 ÇÁ·Î±×·¥ ¼Ò°³ÀÇ ´õº¸±â/Á¢±â ÀÛµ¿Ã£¾Æº¸±â
ÇÑÁÙ ¼Æò