ÄÁÅÙÃ÷»ó¼¼º¸±â

¹ÝÀÀÇü À¥ ½ÇÀü ÇÁ·ÎÁ§Æ® °¡À̵å
¹ÝÀÀÇü À¥ ½ÇÀü ÇÁ·ÎÁ§Æ® °¡À̵å
  • ÀúÀÚ<±è±¤¼ö>,<Á¶Çý°æ> °øÀú
  • ÃâÆÇ»ç¾ÆÀÌÄÛ½º(iCox)
  • ÃâÆÇÀÏ2019-07-08
  • µî·ÏÀÏ2020-05-28
º¸À¯ 2, ´ëÃâ 0, ¿¹¾à 0, ´©Àû´ëÃâ 12, ´©Àû¿¹¾à 0

Ã¥¼Ò°³

HTML5, CSS3, JavaScript, jQuery¸¦ ÇÑ ±ÇÀ¸·Î!
½ÇÀü ÇÁ·ÎÁ§Æ®¸¦ ÅëÇÏ¿© ¹ÝÀÀÇü À¥»çÀÌÆ®¸¦ Á÷Á¢ ±¸ÇöÇØ º»´Ù!

ÀÌ Ã¥Àº ¡®À¥ Ç¥ÁØÀ̶ó´Â ¾à¼Ó¡¯¿¡ ´ëÇÑ À̾߱⸦ ¹ÙÅÁÀ¸·Î, ´©±¸³ª ½±°Ô ´Ü°èÀûÀ¸·Î µû¶ó°¥ ¼ö ÀÖµµ·Ï HTML5, CSS3, Javascript¿Í jQuery±îÁö Ç¥ÁØÇü À¥ Á¦ÀÛÀ» À§ÇÑ ¸ðµç µµ±¸µéÀ» ±âº»ºÎÅÍ È°¿ë±îÁö ¸®µåÇϵµ·Ï ¸¸µé¾îÁ³´Ù. ´©±¸³ª ½±°Ô À¥ Ç¥ÁØ¿¡ ¸Â´Â ÆäÀÌÁö¸¦ Á¦ÀÛÇÒ ¼ö ÀÖµµ·Ï µµ±¸µéÀÇ ±âº»ºÎÅÍ È°¿ë±îÁö ´Ù·çµÇ, PC¿Í ½º¸¶Æ®Æù, ÅÂºí¸´ µî »ç¿ëÀÚÀÇ ±â±â¿¡ µû¶ó À¯¿¬ÇÏ°Ô ±¸ÇöµÇ´Â Â÷¼¼´ë À¥ ±â¼ú ¡®¹ÝÀÀÇü À¥¡¯À» ¼ÒÀç·Î ÇÏ¿© °¡Àå ÃÖ±Ù¿¡ À̽´È­µÇ´Â ¼ÒÀ縦 ÅëÇÏ¿© Á÷Á¢ À¥ ÆäÀÌÁö¸¦ Á¦ÀÛÇÏ´Â ¸ðµç µ¶Àںе鲲 ½ÇÁ¦ÀûÀÎ µµ¿òÀ» ÁØ´Ù.

ÀúÀÚ¼Ò°³

EIT À¥ °³¹ß ÃÑ°ý, »ï¼ºÀÎÀç°³¹ß¿ø Â÷ÀåÀ» ¿ªÀÓÇÏ¿´À¸¸ç, ÁÖ¿ä Àú¼­·Î´Â ½ÇÀüÇÁ·ÎÁ§Æ® ¹ÝÀÀÇü À¥ÆÛºí¸®½Ì, ÀÚ¹Ù½ºÅ©¸³Æ®+jQuery ¸¶½ºÅÍ µîÀÌ ÀÖ´Ù.

¸ñÂ÷

¸Ó¸®¸»
½Ç½À¿¡ ÇÊ¿äÇÑ ±âº» ÇÁ·Î±×·¥ ¾È³»
¹ÝÀÀÇü ÇÁ·ÎÁ§Æ® ¹Ì¸®º¸±â

CHAPTER 1 HTML5
1.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-shadow
2.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 opacity
2.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 background
2.6 BOX MODEL
01 width, height
02 padding
03 margin
04 border
05 outline
06 box-sizing
07 box-shadow
08 resize
09 appearance
2.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¸¦ Èä³»³»´Â script
2.11 ±× ¹ÛÀÇ layout
01 flex layout
02 grid layout

CHAPTER 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 jQuery
4.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 DATEPICKER
4.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 ÇÁ·Î±×·¥ ¼Ò°³ÀÇ ´õº¸±â/Á¢±â ÀÛµ¿

ã¾Æº¸±â

ÇÑÁÙ ¼­Æò