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

ÃÊ±Þ Áß±ÞÀÚ¸¦ À§ÇÑ HTML5 + CSS3 Programming (Ä¿¹öÀ̹ÌÁö)
¾Ë¶óµò
ÃÊ±Þ Áß±ÞÀÚ¸¦ À§ÇÑ HTML5 + CSS3 Programming
  • ÆòÁ¡ÆòÁ¡Á¡Æò°¡¾øÀ½
  • ÀúÀÚ±èÀ¯Áø ÁöÀ½ 
  • ÃâÆÇ»ç¾ÆƼ¿À 
  • ÃâÆÇÀÏ2016-10-09 
º¸À¯ 1, ´ëÃâ 0, ¿¹¾à 0, ´©Àû´ëÃâ 1, ´©Àû¿¹¾à 0

Ã¥¼Ò°³

ƯÁ¤ À¥»çÀÌÆ®¸¦ ¹æ¹®ÇßÀ» ¶§ µðÀÚÀÎÀÌ ¿¹»Ú´Ù¸é Çѹø ´õ ¸¶À½ÀÌ ²ø¸®´Â °ÍÀº ´ç¿¬ÇÒ °ÍÀÔ´Ï´Ù. ÀÌ´Â ¾îÇø®ÄÉÀ̼ǿ¡¼­ UI°¡ ±×¸¸Å­ Áß¿äÇÏ´Ù´Â ÀǹÌÀ̱⵵ ÇÕ´Ï´Ù.ÀÌ Ã¥Àº HTML, CSS, JAVASCRIPT µîÀÇ ¾ð¾î¸¦ »ç¿ëÇÏ´Â ±âº» ¹æ¹ýºÎÅÍ ³ª¾Æ°¡ UI °³¹ß¿¡ È°¿ëÇÏ´Â ¹æ¹ý±îÁöÀÇ Àü¹ÝÀûÀÎ ³»¿ëÀ» ½ÇÀü ¿¹Á¦¸¦ Áß½ÉÀ¸·Î °ú¿Ü ¼±»ý´ÔÀÌ ¿·¿¡¼­ ¼³¸íÇϵí Â÷±ÙÂ÷±ÙÇÏ°Ô ¹¦»çÇÏ¿© Áß±ÞÀÚ ´Ü°è±îÁö ¿Ã¶ó¼³ ¼ö ÀÖµµ·Ï ±¸¼ºÇÏ¿´½À´Ï´Ù.



ÀÌ Ã¥ÀÇ Æ¯Â¡

À¥ ¾îÇø®ÄÉÀ̼ÇÀÇ UI¸¦ ±¸ÇöÇÏ·Á¸é HTML, CSS, JAVASCRIPT µîÀÇ ¾ð¾î°¡ ÇÊ¿äÇÕ´Ï´Ù. HTMLÀº À¥ ÆäÀÌÁö¿¡ Ãâ·ÂµÉ ±ÛÀÚ¿Í À̹ÌÁö¸¦ Á¤ÀÇÇϸ鼭 À¥ ÆäÀÌÁö UIÀÇ ±âº» »À´ë¸¦ ¸¸µå´Â ÀÏÀ» ÇÏ°í, CSS´Â HTML·Î ¸¸µç ±âº» »À´ë¿¡ »ìÀ» ºÙÀÌ´Â, Áï Á¤ÀÇÇÑ HTML ¿ä¼Ò¿¡ ´ëÇؼ­ À§Ä¡¸¦ ÁöÁ¤ÇÏ¿© Á¤·Ä ½ÃÅ°°í, »ö»óÀ» Á¤ÇÏ¸ç ¹üÀ§ÀÇ Å©±â¸¦ °áÁ¤ÇÏ´Â ÀÏÀ» ÇÕ´Ï´Ù. JAVASCRIPT´Â Á¤ÀûÀ¸·Î ¸¸µç HTML ÆäÀÌÁö¿¡ ¿òÁ÷ÀÓÀ» ºÎ¿©ÇÏ°í, »ç¿ëÀÚÀÇ ¿òÁ÷ÀÓÀÎ À̺¥Æ®°¡ ¹ß»ýÇßÀ» ¶§ À̸¦ ó¸®ÇÏ´Â ±¸¹®À» Ãß°¡ÇÒ ¼ö ÀÖ½À´Ï´Ù.

ÀÌ Ã¥ÀÇ ±¸¼ºÀº ´ÙÀ½°ú °°½À´Ï´Ù.



¤ý À¥ ÆäÀÌÁö °³¹ß¿¡ »ç¿ëµÇ´Â ¾ð¾îµé°ú À̵éÀÇ °¢ ¾²ÀÓ¿¡ ´ëÇؼ­ »ìÆ캻´Ù.

¤ý HTMLÀÇ ±âº» ű׸¦ ÀÍÇô À¥ ÆäÀÌÁöÀÇ »À´ë¸¦ ±¸ÃàÇÏ´Â ¹æ¹ýÀ» »ìÆ캻´Ù.

. CSS ÀÛ¼º¹ý°ú ¼Ó¼ºµéÀ» ÀÍÇô À¥ ÆäÀÌÁö ±¸¼º ¿ä¼ÒµéÀÇ À§Ä¡, Å©±â, »ö»ó µîÀ» Á¦¾îÇÏ´Â ¹æ¹ýÀ» »ìÆ캻´Ù.

¤ý HTML5¿¡ Ãß°¡µÈ ÀǹÌÀû/±¸Á¶Àû ű׵é°ú Æû ¼Ó¼º¿¡ ´ëÇؼ­ »ìÆ캻´Ù.

¤ý CSS·Î À¥ ÆäÀÌÁö ·¹À̾ƿô°ú ¿ä¼Ò¸¦ Á¦¾îÇÏ´Â ¹æ¹ýÀ» »ìÆ캻´Ù.

¤ý CSS¸¦ À¥ ÆäÀÌÁö¿¡ È°¿ëÇÏ´Â ´Ù¾çÇÑ ¿¹Á¦¸¦ »ìÆ캻´Ù.

¤ý HTML·Î 2D ±×·¡ÇÈÀ» ±×¸®´Â ¹æ¹ý°ú ¸ÖƼ¹Ìµð¾îÀÇ Á¦¾î ¹æ¹ýÀ» »ìÆ캻´Ù.

¤ý µ¿Àû ÆäÀÌÁö Á¦ÀÛÀ̳ª À̺¥Æ® 󸮸¦ À§ÇÑ ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ±âº» ¹®¹ýÀ» »ìÆ캻´Ù.

¤ý À¥ ÆäÀÌÁö ½ÇÇà ½Ã¿¡ ¿ä¼Ò¸¦ Á¦¾îÇÒ ¼ö ÀÖ´Â HTML DOM¿¡ ´ëÇؼ­ »ìÆ캻´Ù.

¤ý HTMLÀÌ Á¦°øÇÏ´Â À§Ä¡ ¼­ºñ½º³ª µ¥ÀÌÅÍ ÀúÀå ¼­ºñ½º, µå·¡±× ¾Ø µå·Ó µîÀÇ API¸¦ »ìÆ캻´Ù.

ÀúÀÚ¼Ò°³

ÇÁ·Î±×·¡¹ÖÀÇ ´Ù¾çÇÑ °ü·Ã ±â¼úÀ» ¼··ÆÇÑ ÈÄ »ï¼º¸ÖƼķÆÛ½º, ºñÆ®±³À°¼¾ÅÍ, HP ±³À°¼¾ÅÍ µîÀÇ ±â¾÷°ú ¿©·¯ ´ëÇп¡¼­ ÀÚ¹Ù¿Í ¾Èµå·ÎÀÌµå °ü·Ã °­ÀǸ¦ ÁøÇàÇÏ¿´½À´Ï´Ù.
ÇöÀç´Â Çѱ¹Á¤º¸±â¼ú¿ø¿¡¼­ ÀÚ¹Ù¸¦ ºñ·ÔÇÏ¿© ¾Èµå·ÎÀ̵å ÇÁ·ÎÁ§Æ® ÅõÀÔÀ» À§ÇØ ±³À°ÀÌ ÇÊ¿äÇÑ °³¹ßÀÚ³ª ¸ð¹ÙÀÏ ¾îÇø®ÄÉÀ̼ÇÀ» °³¹ßÇÏ°í ½ÍÀº °³¹ßÀÚ ¹× ÇлýÀ» À§ÇÑ ´Ù¾çÇÑ ±³À°À» ÁøÇàÇÏ°í ÀÖ½À´Ï´Ù.

[Àú¼­ ]
ÀÓº£µðµå ÇÁ·Î±×·¡¹Ö C ÄÚµå ÃÖÀûÈ­ - ÇѺû¹Ìµð¾î
ÀÌ°Ô ÁøÂ¥ ÀÚ¹Ù ÇÁ·Î±×·¡¹ÖÀÌ´Ù - ¿µÁø¹Ìµð¾î
ÀÌ°Ô ÁøÂ¥ C ÇÁ·Î±×·¡¹ÖÀÌ´Ù - ¿µÁø¹Ìµð¾î
ÀÌ°Ô ÁøÂ¥ C++ÇÁ·Î±×·¡¹ÖÀÌ´Ù - ¿µÁø¹Ìµð¾î
¾Èµå·ÎÀ̵å ÇÁ·Î±×·¡¹Ö - ¾ÆƼ¿À
ÀÚ¹Ù À¥ ÇÁ·Î±×·¡¹Ö - ¾ÆƼ¿À

¸ñÂ÷

Á¦01Àå À¥ ÆäÀÌÁöÀÇ ±âº» »À´ë HTML

1. HTML ¹®¼­ÀÇ ±¸Á¶

2. °³¹ß ȯ°æ ±¸Ãà

3. HTML ÅÂ±× ÀÛ¼º¹ý°ú ¼Ó¼º

4. HTML ¹öÀü°ú HTML5ÀÇ Æ¯Â¡



Á¦02Àå HTML ±âº» ű×

1. ´Ü¶ôÀ» ±¸¼ºÇϴ ű׵é

2. Æ÷¸ËÆÃ(Formatting) ¿ä¼Ò

3. HTML ÄÜÅÙÃ÷¿¡ ½ºÅ¸ÀÏ Àû¿ë

4. ÆäÀÌÁö À̵¿

5. °æ·Î Ç¥Çö

6. À̹ÌÁö Ãâ·Â

7. Å×À̺í

8. ¸®½ºÆ® Ãâ·Â

9. ºí·Ï Á¦¾î

10. Æû Á¦¾î



Á¦03Àå CSS·Î À¥ ÆäÀÌÁö ²Ù¹Ì±â

1. CSSÀÇ ÀÛ¼º¹ý

2. »ö»ó Ç¥Çö

3. ÅؽºÆ®

4. ÆùÆ®

5. Å©±â Á¦¾î

6. À§Ä¡ Á¦¾î

7. ¸¶Áø°ú Æеù

8. ¹è°æ Á¦¾î

9. Å׵θ® Á¦¾î

10. ¸ñ·Ï¿¡ ½ºÅ¸ÀÏ Àû¿ë



Á¦04Àå HTML5¿¡ Ãß°¡µÈ ÀǹÌÀû/±¸Á¶Àû ÅÂ±×¿Í Æû ¼Ó¼º

1. ÀǹÌÀû(Semantic) ű×

2. ±¸Á¶Àû(Structural) ű×

3. HTML5¿¡ Ãß°¡µÈ Æû °ü·Ã ¿ä¼Ò

4. HTML5¿¡ Ãß°¡µÈ input ŸÀÔ



Á¦05Àå CSS·Î À¥ ÆäÀÌÁö ·¹À̾ƿô°ú ¿ä¼Ò Á¦¾î

1. CSS ·¹À̾ƿô(Layout)

2. ¼±ÅÃÀÚ Á¶ÇÕ

3. ¼Ó¼º ¼±ÅÃÀÚ

4. »óÅ ¼±ÅÃÀÚ(Pseudo-Class)

5. ¿ä¼Ò ºÎºÐ ¼±ÅÃÀÚ



Á¦06Àå CSSÀÇ ´Ù¾çÇÑ È°¿ë

1. Å×ÀÌºí ²Ù¹Ì±â

2. CSS·Î ³×ºñ°ÔÀÌ¼Ç ¹Ù(Navigation Bar) ¸¸µé±â

3. µå·Ó ´Ù¿î(Dropdown)

4. ÅøÆÁ(Tooltip)

5. À̹ÌÁö ²Ù¹Ì±â

6. Æû ²Ù¹Ì±â

7. ±×¸²ÀÚ È¿°ú ÁÖ±â



Á¦07Àå HTML ±×·¡ÇÈ°ú ¸ÖƼ¹Ìµð¾î

1. ĵ¹ö½º(Canvas)

2. SVG(Scalable Vector Graphics)

3. HTML ¸ÖƼ¹Ìµð¾î

4. ¿Àµð¿À

5. ºñµð¿À



Á¦08Àå ÀÚ¹Ù½ºÅ©¸³Æ®(JavaScript)

1. ÀÚ¹Ù½ºÅ©¸³Æ® ÀÛ¼º¹ý

2. ÀÚ¹Ù½ºÅ©¸³Æ® ±âº» ¹®¹ý

3. ¿¬»êÀÚ

4. Á¦¾î¹®

5. ÀÚ¹Ù½ºÅ©¸³Æ® ¸Þ½ÃÁö ¹Ú½º

6. ÀÚ¹Ù½ºÅ©¸³Æ® ÇÔ¼ö

7. ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ À̺¥Æ® ó¸®

8. ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ Æû Á¦¾î



Á¦09Àå HTML DOM(Document Object Model)

1. DOMÀÇ Á¤ÀÇ

2. DOM ¿ä¼ÒÀÇ Á¢±Ù ¹æ¹ý

3. DOM CSS

4. DOM À̺¥Æ®

5. DOM À̺¥Æ® ¸®½º³Ê(Listener)

6. DOM ³ëµå¿Í ³ëµå Ž»ö

7. HTML ¿ä¼Ò Ãß°¡ ¹× Á¦°Å



Á¦10Àå HTML API

1. µå·¡±× ¾Ø µå·Ó(Drag and Drop)

2. À§Ä¡ ¼­ºñ½º

3. µ¥ÀÌÅÍ ·ÎÄà ÀúÀå

ÇÑÁÙ ¼­Æò