- ÇöÀç À§Ä¡
- home > ÄÄÇ»ÅÍ¡¤ICT¡¤¾îÇÐ > ÄÄÇ»ÅÍ¡¤IT µµ¼ > À¥»çÀÌÆ® > Do it! ÀÎÅÍ·¢Æ¼ºê À¥ ÆäÀÌÁö ¸¸µé±â[ÀÌÁö½ºÆÛºí¸®½Ì]
ÃֽŠÇÁ·±Æ®¿£µå À¥ µðÀÚÀÎÀº ¹°·Ð ÀÎÅÍ·¢Æ¼ºê À¥ »çÀÌÆ® 8°³¸¦ ÇÑ ¹ø¿¡ ¿Ï¼ºÇÒ ¼ö Àִ åÀÌ ³ª¿Ô´Ù! º£Å׶û À¥ µðÀÚÀ̳ÊÀÌÀÚ ÇÁ·±Æ®¿£µå °³¹ßÀÚÀÎ ÀúÀÚ°¡ HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®¸¸À¸·Î ´©±¸³ª È·ÁÇÑ À¥ »çÀÌÆ®¸¦ ¸¸µé ¼ö ÀÖ°Ô ¾Ë·Á ÁØ´Ù. ¶ÇÇÑ ½Ç¹«¿¡¼ Àß ¾²Áö ¾Ê´Â ±âº» ¹®¹ýÀ» ¸ðµÎ ¹è¿ì´À¶ó ÁöÄ¡Áö ¾Ê°Ô, ½ÇÀü ¿¹Á¦¿¡ ²À ÇÊ¿äÇÑ À¥ Ç¥ÁØ ¹®¹ý¸¸ °£Ãß·Á¼ ºü¸£°í ½±°Ô ÀÍÈú ¼ö ÀÖµµ·Ï µµ¿ÍÁØ´Ù.
ÀÌ Ã¥¿¡¼ Á¦°øÇÏ´Â 8°¡Áö ÇÁ·±Æ®¿£µå À¥ »çÀÌÆ®´Â Çö¾÷¿¡¼ ÃֽŠƮ·»µå·Î ÀÚ¸® ÀâÀº ÀÎÅÍ·¢Æ¼ºê À¥ Æ÷Æ®Æú¸®¿À¸¦ ¸¸µé ¼ö ÀÖ°Ô ±¸¼ºÇß´Ù. ¿Ï¼ºµÈ À¥ »çÀÌÆ®¸¦ Á÷Á¢ Ŭ·Ð ÄÚµùÇÏ¸é¼ ½Ç·ÂÀ» ³ôÀÌ°í, ´ýÀ¸·Î ³ª¸¸ÀÇ À¥ Æ÷Æ®Æú¸®¿À¸¦ °¡Áú ¼ö ÀÖ´Â ±âȸ¸¦ ³õÄ¡Áö ¸»ÀÚ. À¥ÀÇ ±âÃÊ°¡ ÇÊ¿äÇÑ ºñÀü°øÀÚºÎÅÍ È·ÁÇÑ µðÀÚÀÎÀÌ ÇÊ¿äÇÑ À¥ µðÀÚÀ̳Ê, ÃֽŠÀ¥ ±â¼úÀ» ¹Ý¿µÇÏ·Á´Â À¥ ÆÛºí¸®¼Å±îÁö ÇÁ·±Æ®¿£µå ±â¼úÀÌ ÇÊ¿äÇÑ »ç¶÷À̶ó¸é ²À Àоî¾ß ÇÒ Ã¥ÀÌ´Ù.
¡Ú ÀÌ Ã¥¿¡¼ ¸¸µå´Â Æ÷Æ®Æú¸®¿À 8°¡Áö!
1. ¿Â¶óÀÎ ÇÁ·ÎÇÊ Ä«µå À¥ ÆäÀÌÁö
2. ±â¾÷Çü ±âº» À¥ ÆäÀÌÁö
3. ¹ã³·ÀÌ ¹Ù²î´Â ¸¶À» ¾Ö´Ï¸ÞÀÌ¼Ç ÆäÀÌÁö
4. 306µµ ȸÀüÇÏ´Â Æijë¶ó¸¶ ȸ»ç ¼Ò°³ ÆäÀÌÁö
5. FLEX ·¹À̾ƿô ±â¹ÝÀÇ µ¿¿µ»ó À¥ ÆäÀÌÁö
6. ÀÚµ¿À¸·Î À½¾ÇÀÌ ³ª¿À´Â ¹ÂÁ÷ Ç÷¹À̾î
7. ÇÉÅÍ·¹½ºÆ® ½ºÅ¸ÀÏÀÇ ¹ÝÀÀÇü À¥ °¶·¯¸®
8. À¥ Ç÷¯±×ÀÎÀ» »ç¿ëÇÑ ½º¿ÍÀÌÇÁ °¶·¯¸®(¹«·á ÀüÀÚÃ¥ Á¦°ø)
ÀÌ Ã¥¿¡¼ Á¦°øÇÏ´Â 8°¡Áö ÇÁ·±Æ®¿£µå À¥ »çÀÌÆ®´Â Çö¾÷¿¡¼ ÃֽŠƮ·»µå·Î ÀÚ¸® ÀâÀº ÀÎÅÍ·¢Æ¼ºê À¥ Æ÷Æ®Æú¸®¿À¸¦ ¸¸µé ¼ö ÀÖ°Ô ±¸¼ºÇß´Ù. ¿Ï¼ºµÈ À¥ »çÀÌÆ®¸¦ Á÷Á¢ Ŭ·Ð ÄÚµùÇÏ¸é¼ ½Ç·ÂÀ» ³ôÀÌ°í, ´ýÀ¸·Î ³ª¸¸ÀÇ À¥ Æ÷Æ®Æú¸®¿À¸¦ °¡Áú ¼ö ÀÖ´Â ±âȸ¸¦ ³õÄ¡Áö ¸»ÀÚ. À¥ÀÇ ±âÃÊ°¡ ÇÊ¿äÇÑ ºñÀü°øÀÚºÎÅÍ È·ÁÇÑ µðÀÚÀÎÀÌ ÇÊ¿äÇÑ À¥ µðÀÚÀ̳Ê, ÃֽŠÀ¥ ±â¼úÀ» ¹Ý¿µÇÏ·Á´Â À¥ ÆÛºí¸®¼Å±îÁö ÇÁ·±Æ®¿£µå ±â¼úÀÌ ÇÊ¿äÇÑ »ç¶÷À̶ó¸é ²À Àоî¾ß ÇÒ Ã¥ÀÌ´Ù.
¡Ú ÀÌ Ã¥¿¡¼ ¸¸µå´Â Æ÷Æ®Æú¸®¿À 8°¡Áö!
1. ¿Â¶óÀÎ ÇÁ·ÎÇÊ Ä«µå À¥ ÆäÀÌÁö
2. ±â¾÷Çü ±âº» À¥ ÆäÀÌÁö
3. ¹ã³·ÀÌ ¹Ù²î´Â ¸¶À» ¾Ö´Ï¸ÞÀÌ¼Ç ÆäÀÌÁö
4. 306µµ ȸÀüÇÏ´Â Æijë¶ó¸¶ ȸ»ç ¼Ò°³ ÆäÀÌÁö
5. FLEX ·¹À̾ƿô ±â¹ÝÀÇ µ¿¿µ»ó À¥ ÆäÀÌÁö
6. ÀÚµ¿À¸·Î À½¾ÇÀÌ ³ª¿À´Â ¹ÂÁ÷ Ç÷¹À̾î
7. ÇÉÅÍ·¹½ºÆ® ½ºÅ¸ÀÏÀÇ ¹ÝÀÀÇü À¥ °¶·¯¸®
8. À¥ Ç÷¯±×ÀÎÀ» »ç¿ëÇÑ ½º¿ÍÀÌÇÁ °¶·¯¸®(¹«·á ÀüÀÚÃ¥ Á¦°ø)
ÀúÀÚ: ÃÖ¼ºÀÏ
[Çʼö ¹®¹ý]
HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®
ÇÑ ¹ø¿¡ ³¡³»±â
-----------------
01Àå À¥ ÆäÀÌÁö Á¦ÀÛ ÁغñÇϱâ
__01-1 À¥ ÆäÀÌÁö¸¦ ¸¸µé±â Àü¿¡
____ÀÎÅÍ·¢Æ¼ºê UI/UX
____UI/UX ÀÛ¾÷ ¹æ½ÄÀÇ º¯È¿Í ÄÚµùÀÇ Á߿伺
____ºñÀü°øÀÚ¿Í µðÀÚÀ̳ʵµ ÄÚµùÀ» ÇÒ ¼ö ÀÖ´Â ÀÌÀ¯
____HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¿ªÇÒ
__01-2 À¥ ºê¶ó¿ìÀú¿Í À¥ ¿¡µðÅÍ
____À¥ ºê¶ó¿ìÀú ¼³Ä¡Çϱâ
____À¥ ¿¡µðÅÍ ¼³Ä¡Çϱâ
____ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ¼³Ä¡Çϱâ
__01-3 Á¦ÀÛ ¼Óµµ¸¦ 2¹è ³ô¿© ÁÙ ÀÛ¾÷ µµ±¸
____[Do it!] ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµåÀÇ È®Àå ±â´É ¼³Ä¡Çϱâ
__01-4 À¥ ÆäÀÌÁöÀÇ Çʼö Àç·á
____[Do it!] ±âº» Æú´õ¿Í HTML ÆÄÀÏ ¸¸µé±â
02Àå HTML ±âº» ¹®¹ý ºü¸£°Ô ³¡³»±â
__02-1 HTML ÆÄÀÏ µÑ·¯º¸±â
____ű׶õ
____ºÎ¸ð ÅÂ±×¿Í ÀÚ½Ä Å±×
____HTMLÀÇ ±âº» ±¸Á¶
____[Do it!] ¿¡µðÅÍ¿¡¼ HTML ÆÄÀÏ ¼öÁ¤Çϱâ
__02-2 ½Ã¸Çƽ ÅÂ±× - À¥ ÆäÀÌÁö ±¸Á¶ ³ª´©±â
__02-3 ¼½Ä ÅÂ±× - ÅؽºÆ®¸¦ ³Ö¾î À¥ ÆäÀÌÁö ä¿ì±â
____¡´h1¡µ~¡´h6¡µ - ¹®¼ÀÇ Á¦¸ñ ÁöÁ¤Çϱâ
____¡´p¡µ - ¹®´Ü ÁöÁ¤Çϱâ
____¡´div¡µ - ÄÜÅÙÃ÷ ±×·ìÈÇϱâ
____¡´strong¡µ, ¡´em¡µ - ƯÁ¤ ´Ü¾î °Á¶Çϱâ
____¡´a¡µ - À¥ ÆäÀÌÁö¿¡ ¸µÅ© ¿¬°áÇϱâ
____¡´span¡µ - ÀζóÀÎ ¿ä¼Ò ÅÂ±× ±×·ìÈÇϱâ
____¡´img¡µ - ¹®¼¿¡ À̹ÌÁö »ðÀÔÇϱâ
____¡´br¡µ - °Á¦ ÁÙ ¹Ù²Þ ±¸ÇöÇϱâ
__02-4 ¸ñ·Ï ÅÂ±× - ¸Þ´º¸¦ ±ò²ûÇÏ°Ô Á¤¸®Çϱâ
____¡´ul¡µ - ¼ø¼°¡ ¾ø´Â ¸ñ·Ï ¸¸µé±â
____¡´ol¡µ - ¼ø¼°¡ ÀÖ´Â ¸ñ·Ï ¸¸µé±â
____¡´dl¡µ, ¡´dt¡µ, ¡´dd¡µ - Á¤ÀÇÇü ¸ñ·Ï ¸¸µé±â
____[Do it!] ÁßøµÈ ¸ñ·Ï ÀÛ¼ºÇϱâ
__02-5 Æû ÅÂ±× - »ç¿ëÀÚ Á¤º¸ ÀԷ¹ޱâ
____¡´input¡µ - ´Ù¾çÇÑ Á¤º¸ ÀԷ¹ޱâ
____¡´select¡µ - µå·Ó´Ù¿î ¸Þ´º·Î Ç׸ñ ¼±ÅÃÇϱâ
____¡´textarea¡µ - ÅؽºÆ®¸¦ ¿©·¯ ÁÙ ÀԷ¹ޱâ
____¡´form¡µ - ¿©·¯ ÀÔ·Â ¾ç½ÄÀ» ±×·ìÈÇÏ°í Àü¼ÛÇϱâ
__02-6 ºñµð¿À¡¤¿Àµð¿À ÅÂ±× - ¸ÖƼ¹Ìµð¾î ÄÜÅÙÃ÷ »ðÀÔÇϱâ
____¡´audio¡µ - ¿Àµð¿À ÆÄÀÏ Àç»ýÇϱâ
____¡´video¡µ - µ¿¿µ»ó ÆÄÀÏ Àç»ýÇϱâ
03Àå CSS ±âº» ¹®¹ý ºü¸£°Ô ³¡³»±â
__03-1 HTML¿¡ CSS ¿¬°áÇϱâ
____[Do it!] HTML ÆÄÀÏ¿¡ ¿ÜºÎ CSS ÆÄÀÏ ¿¬°áÇϱâ
__03-2 CSS·Î HTML ¿ä¼Ò ´Ù¾çÇÏ°Ô ¼±ÅÃÇϱâ
____Àüü ¼±ÅÃÀÚ - ¸ðµç HTML ¿ä¼Ò¸¦ ÇѲ¨¹ø¿¡ ¼±ÅÃÇϱâ
____ÅÂ±× ¼±ÅÃÀÚ - ű׸íÀ» ÀÌ¿ëÇÏ¿© ¼±ÅÃÇϱâ
____ÀÚ¼Õ ¼±ÅÃÀÚ - Àڽİú ÇÏÀ§ ¿ä¼Ò¸¦ ¸ðµÎ ¼±ÅÃÇϱâ
____ÀÚ½Ä ¼±ÅÃÀÚ - Á÷°è ÀÚ½Ä ¿ä¼Ò¸¸ ¼±ÅÃÇϱâ
____±×·ì ¼±ÅÃÀÚ - ¿©·¯ °³ÀÇ ¿ä¼Ò¸¦ ±×·ìÀ¸·Î ¼±ÅÃÇϱâ
____¼ø¼ ¼±ÅÃÀÚ - ÇüÁ¦ ¿ä¼ÒÀÇ ¼ø¼¸¦ ÀÌ¿ëÇÏ¿© ¼±ÅÃÇϱâ
____¼ö¿ ¼±ÅÃÀÚ - ¼ö½ÄÀ» ÀÌ¿ëÇÏ¿© ¼±ÅÃÇϱâ
____¸¶Áö¸· ¿ä¼Ò ¼±ÅÃÀÚ - ÇüÁ¦ ¿ä¼Ò Áß ¸¶Áö¸· ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
____Ȧ¼ö, ¦¼ö ¼±ÅÃÀÚ - Ȧ¼ö ¶Ç´Â ¦¼ö ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
____¼Ó¼º ¼±ÅÃÀÚ - ¼Ó¼º°ªÀ» ÀÌ¿ëÇÏ¿© ¼±ÅÃÇϱâ
____°¡»ó ¼±ÅÃÀÚ - °¡»óÀÇ ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
____Ŭ·¡½º ¼±ÅÃÀÚ - Ŭ·¡½º¸íÀ¸·Î ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
____¾ÆÀ̵𠼱ÅÃÀÚ - ¾ÆÀ̵ð¸íÀ¸·Î ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
__03-3 ÆùÆ® ½ºÅ¸ÀϸµÇϱâ
____ÆùÆ® ±½±â ¹Ù²Ù±â
____ÆùÆ® Å©±â ¹Ù²Ù±â
____ÆùÆ® ¸ð¾ç ¹Ù²Ù±â
____[Do it!] ±¸±Û À¥ ÆùÆ® »ç¿ëÇϱâ
____[Do it!] À¥ ÆùÆ® ¾ÆÀÌÄÜ Àû¿ëÇϱâ
____ÆùÆ® »ö»ó ¹Ù²Ù±â
____ÅؽºÆ® ÁÙ °£°Ý ¹Ù²Ù±â
____ÅؽºÆ® Á¤·Ä ¹æÇâ ÁöÁ¤Çϱâ
____ÅؽºÆ® ÀÚ°£ ÁöÁ¤Çϱâ
__03-4 À¥ ÆäÀÌÁö¿¡¼ ¿µ¿ªº° Å©±â Á¤Çϱâ
____³Êºñ¿Í ³ôÀÌ ÁöÁ¤Çϱâ
____¹Ù±ùÂÊ ¿©¹é ÁöÁ¤Çϱâ
____¾ÈÂÊ ¿©¹é ÁöÁ¤Çϱâ
____±âÁ¸ ¹Ú½º Å©±â¸¦ À¯ÁöÇÏ¸é¼ ¾ÈÂÊ ¿©¹é ÁöÁ¤Çϱâ
____Å׵θ®ÀÇ ÇüÅ ÁöÁ¤Çϱâ
____ºí·Ï ¿ä¼Ò¿Í ÀζóÀÎ ¿ä¼Ò ű×
03-5 À¥ ÆäÀÌÁöÀÇ ¹è°æ ²Ù¹Ì±â
____¹è°æ»ö ÁöÁ¤Çϱâ
____¹è°æ À̹ÌÁö »ðÀÔÇϱâ
____¹è°æ À̹ÌÁö Å©±â Á¶ÀýÇϱâ
____[Do it!] µÎ ¹è°æ À̹ÌÁö¸¦ À¥ ºê¶ó¿ìÀú¿¡ °íÁ¤Çϱâ
03-6 À¥ ÆäÀÌÁöÀÇ ·¹À̾ƿô ±¸¼ºÇϱâ
____CSS ÃʱâÈÇϱâ
____float - ºí·Ï ¿ä¼Ò Á¿ì·Î ¹èÄ¡Çϱâ
____position - ¿ä¼Ò¸¦ ÀÚÀ¯·Ó°Ô ¹èÄ¡Çϱâ
____object-fit - ÄÜÅÙÃ÷¸¦ ƯÁ¤ ¿µ¿ª¿¡ ä¿ì±â
____z-index - °ãÃÄ ÀÖ´Â ¿ä¼ÒÀÇ zÃà ¼ø¼ ÁöÁ¤Çϱâ
____opacity - ¿ä¼ÒÀÇ Åõ¸íµµ ¼³Á¤Çϱâ
__03-7 ´Ù¾çÇÑ ±×·¡ÇÈ È¿°ú Àû¿ëÇϱâ
____box-shadow, text-shadow - ¿ä¼ÒÀÇ ±×¸²ÀÚ ¸¸µé±â
____border-radius - ¸ð¼¸®¸¦ µÕ±Û°Ô ¸¸µé±â
____linear-gradient, radial-gradient - ±×·¹À̵ð¾ðÆ® Àû¿ëÇϱâ
____filter - Ư¼ö È¿°ú »ç¿ëÇϱâ
04Àå ÀÎÅÍ·¢Æ¼ºê À¥À» À§ÇÑ CSS ´Ù·ç±â
__04-1 ÄÜÅÙÃ÷ ¸ð¾çÀ» ÀÚÀ¯·Ó°Ô º¯ÇüÇϱâ
__04-2 »ç¿ëÀÚ Çൿ¿¡ ¹ÝÀÀÇÏ´Â Àüȯ È¿°ú ¸¸µé±â
__04-3 ÀÚµ¿À¸·Î ¿òÁ÷ÀÌ´Â ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú ¸¸µé±â
__04-4 º¤ÅÍ À̹ÌÁö ÆÄÀÏ Á¦¾îÇϱâ
____ºñÆ®¸Ê À̹ÌÁö¿Í º¤ÅÍ À̹ÌÁöÀÇ Â÷ÀÌ
____[Do it!] SVG ÆÄÀÏÀ» À¥ ºê¶ó¿ìÀú¿¡ Ãâ·ÂÇϱâ
____[Do it!] SVGÀÇ path ½ºÅ¸ÀÏ º¯°æÇϱâ
____ÆнºÀÇ stroke-dasharray¿Í stroke-dashoffset ¼Ó¼º ÀÌÇØÇϱâ
____¸¶¿ì½º Æ÷ÀÎÅ͸¦ ¿Ã¸®¸é ¼±ÀÌ ±×·ÁÁö´Â ¸ð¼Ç ¸¸µé±â
__04-5 È¸é ³Êºñ¿¡ µû¶ó À¥ ÆäÀÌÁö µðÀÚÀÎ º¯°æÇϱâ
____[Do it!] ¹Ìµð¾î Äõ¸®¸¦ »ç¿ëÇÏ¿© ¹è°æ»ö ¹Ù²Ù±â
05Àå flex ¹æ½ÄÀ¸·Î ·¹À̾ƿô ¸¸µé±â
__05-1 ºÎ¸ð ¿ä¼Ò¿¡ flex Àû¿ëÇϱâ
____display - ÀÚ½Ä ¿ä¼ÒÀÇ ¹èÄ¡ ¹æ¹ý ÁöÁ¤Çϱâ
____flex-direction - ÀÚ½Ä ¿ä¼ÒÀÇ Á¤·Ä ¹æÇâ º¯°æÇϱâ
____flex-wrap - ÀÚ½Ä ¿ä¼Ò¿¡ ÁÙ ¹Ù²Þ Àû¿ëÇϱâ
____flex-flow - flex-direction, flex-wrap ¼Ó¼ºÀ» ÇѲ¨¹ø¿¡ Àû¿ëÇϱâ
05-2 ÀÚ½Ä ¿ä¼Ò Á¤·ÄÇϱâ
____justify-content - ±âº» ÃàÀ¸·Î Á¤·ÄÇϱâ
____align-content, align-items - ¹Ý´ë ÃàÀ¸·Î Á¤·ÄÇϱâ
05-3 ÀÚ½Ä ¿ä¼ÒÀÇ ¼ø¼ ÁöÁ¤Çϱâ
05-4 ¿ä¼ÒÀÇ ¿©¹é ºñÀ² ÁöÁ¤Çϱâ
____flex-grow - ¿ä¼ÒÀÇ ¾ÈÂÊ ¿©¹é È®´ëÇϱâ
____flex-shirink - ¿ä¼ÒÀÇ ¾ÈÂÊ ¿©¹é Ãà¼ÒÇϱâ
____flex - Àüü ³Êºø°ªÀÇ ºñÀ² Á¶ÀýÇϱâ
06Àå ÀÚ¹Ù½ºÅ©¸³Æ®·Î À¥ ÆäÀÌÁö Á¦¾îÇϱâ
__06-1 ÀÚ¹Ù½ºÅ©¸³Æ® ½ÃÀÛÇϱâ
____[Do it!] HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ® ¿¬°áÇϱâ
__06-2 ÀÚ¹Ù½ºÅ©¸³Æ®·Î HTML ¿ä¼Ò ¼±ÅÃÇϱâ
____document.querySelector( ) - ¿ä¼Ò ¼±ÅÃÇϱâ
____document.querySelectorAll( ) - ¿ä¼Ò¸¦ ¸ðµÎ ¼±ÅÃÇϱâ
____[Do it!] ºÎ¸ð, ÀÚ½Ä, ÇüÁ¦ ¿ä¼Ò ¼±ÅÃÇϱâ
__06-3 ÀÚ¹Ù½ºÅ©¸³Æ®·Î ½ºÅ¸ÀÏ Á¦¾îÇϱâ
__06-4 ÀÚ¹Ù½ºÅ©¸³Æ®·Î À̺¥Æ® ¿¬°áÇϱâ
____Ŭ¸¯ À̺¥Æ® ¿¬°áÇϱâ
____È£¹ö À̺¥Æ® ¿¬°áÇϱâ
____¹Ýº¹µÇ´Â ¿ä¼Ò¿¡ À̺¥Æ® ÇѲ¨¹ø¿¡ ¿¬°áÇϱâ
____Ŭ¸¯ À̺¥Æ®°¡ ¹ß»ýÇÒ ¶§ ¼ýÀÚ¸¦ Áõ°¡, °¨¼ÒÇϱâ
____¹®ÀÚ ¾È¿¡ º¯¼ö »ðÀÔÇϱâ
____[Do it!] Ŭ¸¯Çϸé Á¿ì·Î ȸÀüÇÏ´Â ¹Ú½º ¸¸µé±â
__06-5 ÀÚ¹Ù½ºÅ©¸³Æ®·Î Ŭ·¡½º Á¦¾îÇϱâ
__06-6 ÇÔ¼ö¸¦ È°¿ëÇÏ¿© ÄÚµå ÆÐŰ¡Çϱâ
____ÇÔ¼ö Á¤ÀÇ ¹× È£Ãâ·Î ±â´É ÀçÈ°¿ëÇϱâ
____[Do it!] È°¼ºÈ ±â´É ÇÔ¼ö Á¤ÀÇÇÏ°í »ç¿ëÇϱâ
__06-7 HTML ¿ä¼ÒÀÇ ¼Ó¼º°ª Á¦¾îÇϱâ
____¼Ó¼º°ª ¾Ë¾Æ³»±â
____¼Ó¼º°ª º¯°æÇϱâ
__06-8 ÀÚ¹Ù½ºÅ©¸³Æ®·Î »ç¿ëÀÚ ºê¶ó¿ìÀú ÆÇ´ÜÇϱâ
-----------------
[½ÇÀü ¿¹Á¦]
½Ç¹«¿¡¼ ¹Ù·Î ¾²´Â
Æ÷Æ®Æú¸®¿À ¿Ï¼ºÇϱâ
-----------------
07Àå ¿Â¶óÀÎ ÇÁ·ÎÇÊ Ä«µå Á¦ÀÛÇϱâ
08Àå ±â¾÷Çü À¥ ÆäÀÌÁö Á¦ÀÛÇϱâ
09Àå ¸¶À» ¾Ö´Ï¸ÞÀÌ¼Ç Á¦ÀÛÇϱâ
10Àå Æijë¶ó¸¶ ȸ»ç ¼Ò°³ ÆäÀÌÁö Á¦ÀÛÇϱâ
11Àå flex ±â¹Ý µ¿¿µ»ó À¥ ÆäÀÌÁö Á¦ÀÛÇϱâ
12Àå ¹ÂÁ÷ Ç÷¹À̾î Á¦ÀÛÇϱâ
13Àå ÇÉÅÍ·¹½ºÆ® ½ºÅ¸ÀÏÀÇ ¹ÝÀÀÇü À¥ °¶·¯¸® Á¦ÀÛÇϱâ
[½ºÆä¼È] ±êÇãºê ÆäÀÌÁö¿¡ ÀÛ¾÷¹° ¹èÆ÷Çϱâ
ã¾Æº¸±â
[PDF Ã¥] ½º¿ÍÀÌÇÁ °¶·¯¸® Á¦ÀÛÇϱâ
HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®
ÇÑ ¹ø¿¡ ³¡³»±â
-----------------
01Àå À¥ ÆäÀÌÁö Á¦ÀÛ ÁغñÇϱâ
__01-1 À¥ ÆäÀÌÁö¸¦ ¸¸µé±â Àü¿¡
____ÀÎÅÍ·¢Æ¼ºê UI/UX
____UI/UX ÀÛ¾÷ ¹æ½ÄÀÇ º¯È¿Í ÄÚµùÀÇ Á߿伺
____ºñÀü°øÀÚ¿Í µðÀÚÀ̳ʵµ ÄÚµùÀ» ÇÒ ¼ö ÀÖ´Â ÀÌÀ¯
____HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¿ªÇÒ
__01-2 À¥ ºê¶ó¿ìÀú¿Í À¥ ¿¡µðÅÍ
____À¥ ºê¶ó¿ìÀú ¼³Ä¡Çϱâ
____À¥ ¿¡µðÅÍ ¼³Ä¡Çϱâ
____ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµå ¼³Ä¡Çϱâ
__01-3 Á¦ÀÛ ¼Óµµ¸¦ 2¹è ³ô¿© ÁÙ ÀÛ¾÷ µµ±¸
____[Do it!] ºñÁÖ¾ó ½ºÆ©µð¿À ÄÚµåÀÇ È®Àå ±â´É ¼³Ä¡Çϱâ
__01-4 À¥ ÆäÀÌÁöÀÇ Çʼö Àç·á
____[Do it!] ±âº» Æú´õ¿Í HTML ÆÄÀÏ ¸¸µé±â
02Àå HTML ±âº» ¹®¹ý ºü¸£°Ô ³¡³»±â
__02-1 HTML ÆÄÀÏ µÑ·¯º¸±â
____ű׶õ
____ºÎ¸ð ÅÂ±×¿Í ÀÚ½Ä Å±×
____HTMLÀÇ ±âº» ±¸Á¶
____[Do it!] ¿¡µðÅÍ¿¡¼ HTML ÆÄÀÏ ¼öÁ¤Çϱâ
__02-2 ½Ã¸Çƽ ÅÂ±× - À¥ ÆäÀÌÁö ±¸Á¶ ³ª´©±â
__02-3 ¼½Ä ÅÂ±× - ÅؽºÆ®¸¦ ³Ö¾î À¥ ÆäÀÌÁö ä¿ì±â
____¡´h1¡µ~¡´h6¡µ - ¹®¼ÀÇ Á¦¸ñ ÁöÁ¤Çϱâ
____¡´p¡µ - ¹®´Ü ÁöÁ¤Çϱâ
____¡´div¡µ - ÄÜÅÙÃ÷ ±×·ìÈÇϱâ
____¡´strong¡µ, ¡´em¡µ - ƯÁ¤ ´Ü¾î °Á¶Çϱâ
____¡´a¡µ - À¥ ÆäÀÌÁö¿¡ ¸µÅ© ¿¬°áÇϱâ
____¡´span¡µ - ÀζóÀÎ ¿ä¼Ò ÅÂ±× ±×·ìÈÇϱâ
____¡´img¡µ - ¹®¼¿¡ À̹ÌÁö »ðÀÔÇϱâ
____¡´br¡µ - °Á¦ ÁÙ ¹Ù²Þ ±¸ÇöÇϱâ
__02-4 ¸ñ·Ï ÅÂ±× - ¸Þ´º¸¦ ±ò²ûÇÏ°Ô Á¤¸®Çϱâ
____¡´ul¡µ - ¼ø¼°¡ ¾ø´Â ¸ñ·Ï ¸¸µé±â
____¡´ol¡µ - ¼ø¼°¡ ÀÖ´Â ¸ñ·Ï ¸¸µé±â
____¡´dl¡µ, ¡´dt¡µ, ¡´dd¡µ - Á¤ÀÇÇü ¸ñ·Ï ¸¸µé±â
____[Do it!] ÁßøµÈ ¸ñ·Ï ÀÛ¼ºÇϱâ
__02-5 Æû ÅÂ±× - »ç¿ëÀÚ Á¤º¸ ÀԷ¹ޱâ
____¡´input¡µ - ´Ù¾çÇÑ Á¤º¸ ÀԷ¹ޱâ
____¡´select¡µ - µå·Ó´Ù¿î ¸Þ´º·Î Ç׸ñ ¼±ÅÃÇϱâ
____¡´textarea¡µ - ÅؽºÆ®¸¦ ¿©·¯ ÁÙ ÀԷ¹ޱâ
____¡´form¡µ - ¿©·¯ ÀÔ·Â ¾ç½ÄÀ» ±×·ìÈÇÏ°í Àü¼ÛÇϱâ
__02-6 ºñµð¿À¡¤¿Àµð¿À ÅÂ±× - ¸ÖƼ¹Ìµð¾î ÄÜÅÙÃ÷ »ðÀÔÇϱâ
____¡´audio¡µ - ¿Àµð¿À ÆÄÀÏ Àç»ýÇϱâ
____¡´video¡µ - µ¿¿µ»ó ÆÄÀÏ Àç»ýÇϱâ
03Àå CSS ±âº» ¹®¹ý ºü¸£°Ô ³¡³»±â
__03-1 HTML¿¡ CSS ¿¬°áÇϱâ
____[Do it!] HTML ÆÄÀÏ¿¡ ¿ÜºÎ CSS ÆÄÀÏ ¿¬°áÇϱâ
__03-2 CSS·Î HTML ¿ä¼Ò ´Ù¾çÇÏ°Ô ¼±ÅÃÇϱâ
____Àüü ¼±ÅÃÀÚ - ¸ðµç HTML ¿ä¼Ò¸¦ ÇѲ¨¹ø¿¡ ¼±ÅÃÇϱâ
____ÅÂ±× ¼±ÅÃÀÚ - ű׸íÀ» ÀÌ¿ëÇÏ¿© ¼±ÅÃÇϱâ
____ÀÚ¼Õ ¼±ÅÃÀÚ - Àڽİú ÇÏÀ§ ¿ä¼Ò¸¦ ¸ðµÎ ¼±ÅÃÇϱâ
____ÀÚ½Ä ¼±ÅÃÀÚ - Á÷°è ÀÚ½Ä ¿ä¼Ò¸¸ ¼±ÅÃÇϱâ
____±×·ì ¼±ÅÃÀÚ - ¿©·¯ °³ÀÇ ¿ä¼Ò¸¦ ±×·ìÀ¸·Î ¼±ÅÃÇϱâ
____¼ø¼ ¼±ÅÃÀÚ - ÇüÁ¦ ¿ä¼ÒÀÇ ¼ø¼¸¦ ÀÌ¿ëÇÏ¿© ¼±ÅÃÇϱâ
____¼ö¿ ¼±ÅÃÀÚ - ¼ö½ÄÀ» ÀÌ¿ëÇÏ¿© ¼±ÅÃÇϱâ
____¸¶Áö¸· ¿ä¼Ò ¼±ÅÃÀÚ - ÇüÁ¦ ¿ä¼Ò Áß ¸¶Áö¸· ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
____Ȧ¼ö, ¦¼ö ¼±ÅÃÀÚ - Ȧ¼ö ¶Ç´Â ¦¼ö ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
____¼Ó¼º ¼±ÅÃÀÚ - ¼Ó¼º°ªÀ» ÀÌ¿ëÇÏ¿© ¼±ÅÃÇϱâ
____°¡»ó ¼±ÅÃÀÚ - °¡»óÀÇ ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
____Ŭ·¡½º ¼±ÅÃÀÚ - Ŭ·¡½º¸íÀ¸·Î ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
____¾ÆÀ̵𠼱ÅÃÀÚ - ¾ÆÀ̵ð¸íÀ¸·Î ¿ä¼Ò¸¦ ¼±ÅÃÇϱâ
__03-3 ÆùÆ® ½ºÅ¸ÀϸµÇϱâ
____ÆùÆ® ±½±â ¹Ù²Ù±â
____ÆùÆ® Å©±â ¹Ù²Ù±â
____ÆùÆ® ¸ð¾ç ¹Ù²Ù±â
____[Do it!] ±¸±Û À¥ ÆùÆ® »ç¿ëÇϱâ
____[Do it!] À¥ ÆùÆ® ¾ÆÀÌÄÜ Àû¿ëÇϱâ
____ÆùÆ® »ö»ó ¹Ù²Ù±â
____ÅؽºÆ® ÁÙ °£°Ý ¹Ù²Ù±â
____ÅؽºÆ® Á¤·Ä ¹æÇâ ÁöÁ¤Çϱâ
____ÅؽºÆ® ÀÚ°£ ÁöÁ¤Çϱâ
__03-4 À¥ ÆäÀÌÁö¿¡¼ ¿µ¿ªº° Å©±â Á¤Çϱâ
____³Êºñ¿Í ³ôÀÌ ÁöÁ¤Çϱâ
____¹Ù±ùÂÊ ¿©¹é ÁöÁ¤Çϱâ
____¾ÈÂÊ ¿©¹é ÁöÁ¤Çϱâ
____±âÁ¸ ¹Ú½º Å©±â¸¦ À¯ÁöÇÏ¸é¼ ¾ÈÂÊ ¿©¹é ÁöÁ¤Çϱâ
____Å׵θ®ÀÇ ÇüÅ ÁöÁ¤Çϱâ
____ºí·Ï ¿ä¼Ò¿Í ÀζóÀÎ ¿ä¼Ò ű×
03-5 À¥ ÆäÀÌÁöÀÇ ¹è°æ ²Ù¹Ì±â
____¹è°æ»ö ÁöÁ¤Çϱâ
____¹è°æ À̹ÌÁö »ðÀÔÇϱâ
____¹è°æ À̹ÌÁö Å©±â Á¶ÀýÇϱâ
____[Do it!] µÎ ¹è°æ À̹ÌÁö¸¦ À¥ ºê¶ó¿ìÀú¿¡ °íÁ¤Çϱâ
03-6 À¥ ÆäÀÌÁöÀÇ ·¹À̾ƿô ±¸¼ºÇϱâ
____CSS ÃʱâÈÇϱâ
____float - ºí·Ï ¿ä¼Ò Á¿ì·Î ¹èÄ¡Çϱâ
____position - ¿ä¼Ò¸¦ ÀÚÀ¯·Ó°Ô ¹èÄ¡Çϱâ
____object-fit - ÄÜÅÙÃ÷¸¦ ƯÁ¤ ¿µ¿ª¿¡ ä¿ì±â
____z-index - °ãÃÄ ÀÖ´Â ¿ä¼ÒÀÇ zÃà ¼ø¼ ÁöÁ¤Çϱâ
____opacity - ¿ä¼ÒÀÇ Åõ¸íµµ ¼³Á¤Çϱâ
__03-7 ´Ù¾çÇÑ ±×·¡ÇÈ È¿°ú Àû¿ëÇϱâ
____box-shadow, text-shadow - ¿ä¼ÒÀÇ ±×¸²ÀÚ ¸¸µé±â
____border-radius - ¸ð¼¸®¸¦ µÕ±Û°Ô ¸¸µé±â
____linear-gradient, radial-gradient - ±×·¹À̵ð¾ðÆ® Àû¿ëÇϱâ
____filter - Ư¼ö È¿°ú »ç¿ëÇϱâ
04Àå ÀÎÅÍ·¢Æ¼ºê À¥À» À§ÇÑ CSS ´Ù·ç±â
__04-1 ÄÜÅÙÃ÷ ¸ð¾çÀ» ÀÚÀ¯·Ó°Ô º¯ÇüÇϱâ
__04-2 »ç¿ëÀÚ Çൿ¿¡ ¹ÝÀÀÇÏ´Â Àüȯ È¿°ú ¸¸µé±â
__04-3 ÀÚµ¿À¸·Î ¿òÁ÷ÀÌ´Â ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú ¸¸µé±â
__04-4 º¤ÅÍ À̹ÌÁö ÆÄÀÏ Á¦¾îÇϱâ
____ºñÆ®¸Ê À̹ÌÁö¿Í º¤ÅÍ À̹ÌÁöÀÇ Â÷ÀÌ
____[Do it!] SVG ÆÄÀÏÀ» À¥ ºê¶ó¿ìÀú¿¡ Ãâ·ÂÇϱâ
____[Do it!] SVGÀÇ path ½ºÅ¸ÀÏ º¯°æÇϱâ
____ÆнºÀÇ stroke-dasharray¿Í stroke-dashoffset ¼Ó¼º ÀÌÇØÇϱâ
____¸¶¿ì½º Æ÷ÀÎÅ͸¦ ¿Ã¸®¸é ¼±ÀÌ ±×·ÁÁö´Â ¸ð¼Ç ¸¸µé±â
__04-5 È¸é ³Êºñ¿¡ µû¶ó À¥ ÆäÀÌÁö µðÀÚÀÎ º¯°æÇϱâ
____[Do it!] ¹Ìµð¾î Äõ¸®¸¦ »ç¿ëÇÏ¿© ¹è°æ»ö ¹Ù²Ù±â
05Àå flex ¹æ½ÄÀ¸·Î ·¹À̾ƿô ¸¸µé±â
__05-1 ºÎ¸ð ¿ä¼Ò¿¡ flex Àû¿ëÇϱâ
____display - ÀÚ½Ä ¿ä¼ÒÀÇ ¹èÄ¡ ¹æ¹ý ÁöÁ¤Çϱâ
____flex-direction - ÀÚ½Ä ¿ä¼ÒÀÇ Á¤·Ä ¹æÇâ º¯°æÇϱâ
____flex-wrap - ÀÚ½Ä ¿ä¼Ò¿¡ ÁÙ ¹Ù²Þ Àû¿ëÇϱâ
____flex-flow - flex-direction, flex-wrap ¼Ó¼ºÀ» ÇѲ¨¹ø¿¡ Àû¿ëÇϱâ
05-2 ÀÚ½Ä ¿ä¼Ò Á¤·ÄÇϱâ
____justify-content - ±âº» ÃàÀ¸·Î Á¤·ÄÇϱâ
____align-content, align-items - ¹Ý´ë ÃàÀ¸·Î Á¤·ÄÇϱâ
05-3 ÀÚ½Ä ¿ä¼ÒÀÇ ¼ø¼ ÁöÁ¤Çϱâ
05-4 ¿ä¼ÒÀÇ ¿©¹é ºñÀ² ÁöÁ¤Çϱâ
____flex-grow - ¿ä¼ÒÀÇ ¾ÈÂÊ ¿©¹é È®´ëÇϱâ
____flex-shirink - ¿ä¼ÒÀÇ ¾ÈÂÊ ¿©¹é Ãà¼ÒÇϱâ
____flex - Àüü ³Êºø°ªÀÇ ºñÀ² Á¶ÀýÇϱâ
06Àå ÀÚ¹Ù½ºÅ©¸³Æ®·Î À¥ ÆäÀÌÁö Á¦¾îÇϱâ
__06-1 ÀÚ¹Ù½ºÅ©¸³Æ® ½ÃÀÛÇϱâ
____[Do it!] HTML°ú ÀÚ¹Ù½ºÅ©¸³Æ® ¿¬°áÇϱâ
__06-2 ÀÚ¹Ù½ºÅ©¸³Æ®·Î HTML ¿ä¼Ò ¼±ÅÃÇϱâ
____document.querySelector( ) - ¿ä¼Ò ¼±ÅÃÇϱâ
____document.querySelectorAll( ) - ¿ä¼Ò¸¦ ¸ðµÎ ¼±ÅÃÇϱâ
____[Do it!] ºÎ¸ð, ÀÚ½Ä, ÇüÁ¦ ¿ä¼Ò ¼±ÅÃÇϱâ
__06-3 ÀÚ¹Ù½ºÅ©¸³Æ®·Î ½ºÅ¸ÀÏ Á¦¾îÇϱâ
__06-4 ÀÚ¹Ù½ºÅ©¸³Æ®·Î À̺¥Æ® ¿¬°áÇϱâ
____Ŭ¸¯ À̺¥Æ® ¿¬°áÇϱâ
____È£¹ö À̺¥Æ® ¿¬°áÇϱâ
____¹Ýº¹µÇ´Â ¿ä¼Ò¿¡ À̺¥Æ® ÇѲ¨¹ø¿¡ ¿¬°áÇϱâ
____Ŭ¸¯ À̺¥Æ®°¡ ¹ß»ýÇÒ ¶§ ¼ýÀÚ¸¦ Áõ°¡, °¨¼ÒÇϱâ
____¹®ÀÚ ¾È¿¡ º¯¼ö »ðÀÔÇϱâ
____[Do it!] Ŭ¸¯Çϸé Á¿ì·Î ȸÀüÇÏ´Â ¹Ú½º ¸¸µé±â
__06-5 ÀÚ¹Ù½ºÅ©¸³Æ®·Î Ŭ·¡½º Á¦¾îÇϱâ
__06-6 ÇÔ¼ö¸¦ È°¿ëÇÏ¿© ÄÚµå ÆÐŰ¡Çϱâ
____ÇÔ¼ö Á¤ÀÇ ¹× È£Ãâ·Î ±â´É ÀçÈ°¿ëÇϱâ
____[Do it!] È°¼ºÈ ±â´É ÇÔ¼ö Á¤ÀÇÇÏ°í »ç¿ëÇϱâ
__06-7 HTML ¿ä¼ÒÀÇ ¼Ó¼º°ª Á¦¾îÇϱâ
____¼Ó¼º°ª ¾Ë¾Æ³»±â
____¼Ó¼º°ª º¯°æÇϱâ
__06-8 ÀÚ¹Ù½ºÅ©¸³Æ®·Î »ç¿ëÀÚ ºê¶ó¿ìÀú ÆÇ´ÜÇϱâ
-----------------
[½ÇÀü ¿¹Á¦]
½Ç¹«¿¡¼ ¹Ù·Î ¾²´Â
Æ÷Æ®Æú¸®¿À ¿Ï¼ºÇϱâ
-----------------
07Àå ¿Â¶óÀÎ ÇÁ·ÎÇÊ Ä«µå Á¦ÀÛÇϱâ
08Àå ±â¾÷Çü À¥ ÆäÀÌÁö Á¦ÀÛÇϱâ
09Àå ¸¶À» ¾Ö´Ï¸ÞÀÌ¼Ç Á¦ÀÛÇϱâ
10Àå Æijë¶ó¸¶ ȸ»ç ¼Ò°³ ÆäÀÌÁö Á¦ÀÛÇϱâ
11Àå flex ±â¹Ý µ¿¿µ»ó À¥ ÆäÀÌÁö Á¦ÀÛÇϱâ
12Àå ¹ÂÁ÷ Ç÷¹À̾î Á¦ÀÛÇϱâ
13Àå ÇÉÅÍ·¹½ºÆ® ½ºÅ¸ÀÏÀÇ ¹ÝÀÀÇü À¥ °¶·¯¸® Á¦ÀÛÇϱâ
[½ºÆä¼È] ±êÇãºê ÆäÀÌÁö¿¡ ÀÛ¾÷¹° ¹èÆ÷Çϱâ
ã¾Æº¸±â
[PDF Ã¥] ½º¿ÍÀÌÇÁ °¶·¯¸® Á¦ÀÛÇϱâ
¡°¾Æ¹«°Íµµ ¸ð¸£´Â ºñÀü°øÀÚµµ À¥ °³¹ßÀÚ°¡ µÉ ¼ö ÀÖ³ª¿ä?¡±
¡°¹°·ÐÀÌÁÒ! Àúµµ ±×·¨°Åµç¿ä.¡±
--------------------------
ºñÀü°øÀÚ¿´Áö¸¸ ÇÁ·±Æ®¿£µå À¥ °³¹ßÀÚ°¡ µÈ ÀúÀÚ´Â ºñÀü°øÀÚ³ª ÄÚµù ¿ÕÃʺ¸¿¡°Ô´Â °á°ú¹°ºÎÅÍ ¸¸µé¸é¼ ÀÌ·ÐÀ» ¹è¿ì´Â °ÍÀÌ È¿°úÀûÀ̶ó°í ¸»ÇÑ´Ù. ±×·¡¼ ÀÌ Ã¥Àº ºñÀü°øÀÚ ´«³ôÀÌ¿¡ ¸ÂÃç¼ ÃÖ¼ÒÇÑÀÇ ¹®¹ý¸¸ È°¿ëÇÏ¿© ´Ù¾çÇÑ °á°ú¹°À» °è¼ÓÇؼ ¸¸µé ¼ö ÀÖµµ·Ï ±¸¼ºÇß´Ù. ¶ÇÇÑ Ãʺ¸ÀÚ°¡ Çò°¥¸± ¼ö ÀÖ´Â CSS ¼±ÅÃÀÚ, Ç÷º½º ·¹À̾ƿô, ¹Ìµð¾î Äõ¸®, ¹ÝÀÀÇü À¥, ÀÚ¹Ù½ºÅ©¸³Æ® ÇÔ¼ö µîÀÇ ³»¿ëµµ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï Á¤¸®Çß´Ù. ÀÌ ¸ðµç °úÁ¤À» ¸¶Ä¡¸é HTML5, CSS3, ES6ÀÇ ÃֽŠÀ¥ Ç¥ÁØ ±â¼úÀ» ¿Ïº®ÇÏ°Ô ÀÍÈ÷°í, ÀÎÅÍ·¢Æ¼ºê À¥ »çÀÌÆ® ÇϳªÂëÀº °Å¶áÈ÷ ¸¸µé ¼ö ÀÖ´Â À¥ °³¹ßÀÚ°¡ µÉ ¼ö ÀÖ´Ù.
--------------------------
ÇöÁ÷ À¥ µðÀÚÀ̳ÊÀÇ ÁøÂ¥ Æ÷Æ®Æú¸®¿À¸¦
Ŭ·Ð ÄÚµùÇÏ¸é¼ ³» °ÍÀ¸·Î ¸¸µç´Ù!
--------------------------
ÀÌ Ã¥¿¡¼ Á¦°øÇÏ´Â 8°¡Áö Æ÷Æ®Æú¸®¿À´Â »ç¿ëÀÚÀÇ ½Ã¼±À» »ç·ÎÀâ¾Æ »óÈ£ ÀÛ¿ëÇÒ ¼ö ÀÖ´Â ¡®ÀÎÅÍ·¢Æ¼ºê À¥¡¯ ±â¼úÀ» Àû¿ëÇØ ¸¸µé¾ú´Ù. µ¿¿µ»ó, À½¾Ç Ç÷¹À̾î´Â ¹°·Ð »ç¿ëÀÚ°¡ À̹ÌÁö¸¦ ½º¿ÍÀÌÇÁÇϰųª 3D ȸéÀ» Á¦¾îÇÏ´Â µîÀÇ È·ÁÇÑ »çÀÌÆ®¸¦ ¸¸µé ¼ö ÀÖ¾î Ãë¾÷À̳ª °úÁ¦ÀÇ Æ÷Æ®Æú¸®¿À·Î È°¿ëÇϱ⿡ ÁÁ´Ù. ¶ÇÇÑ Çö¾÷¿¡¼ »ç¿ëÇÏ´Â À¥ ¹®¹ý°ú ÃֽŠÀ¥ ±â¼ú±îÁö ¸ðµÎ ´Ù·ðÀ¸´Ï ½Ç¹« ´É·ÂÀ» Å°¿ì¸é¼ Æ÷Æ®Æú¸®¿Àµµ ¿Ï¼ºÇÏ´Â Àϼ®ÀÌÁ¶ÀÇ È¿°ú¸¦ ¾ò¾î º¸ÀÚ.
--------------------------
[Çʼö ¹®¹ý]°ú [½ÇÀü ¿¹Á¦] Áß °ñ¶ó¼ °øºÎÇÏÀÚ!
Çö¾÷ °³¹ßÀÚ¶ó¸é Æ÷Æ®Æú¸®¿À »çÀÌÆ®ºÎÅÍ ½ÃÀÛ!
--------------------------
ÀÌ Ã¥ÀÇ 1~6ÀåÀº [Çʼö ¹®¹ý], 7~13ÀåÀº [½ÇÀü ¿¹Á¦] ÆÄÆ®·Î ±¸¼ºÇß´Ù. Ãʺ¸ÀÚ¶ó¸é 1ÀåºÎÅÍ Â÷±ÙÂ÷±Ù °øºÎÇÏ¸é µÈ´Ù. ±×·¯³ª À¥ ¹®¹ýÀ» °øºÎÇÑ ÀûÀÌ ÀÖ´Ù¸é 7~13ÀåºÎÅÍ Àо ÁÁ´Ù. À¥ »çÀÌÆ®¸¦ ¸¸µå´Â µ¥ ÇÊ¿äÇÑ HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®´Â Çʼö ¹®¹ý ÆÄÆ®¿¡ ¸ðµÎ ´ã°Ü ÀÖ´Ù. ÄÚµùÀ» ÇÏ´Ù°¡ ±âÃÊ ¹®¹ýÀÌ ±Ã±ÝÇØÁö¸é ÀÌ Ã¥¿¡¼ ¾È³»ÇÏ´Â ´ë·Î Çʼö ¹®¹ý ÆÄÆ®·Î µ¹¾Æ°¡ °øºÎÇØ º¸ÀÚ. ÀÌ·¸°Ô ¹®¹ý°ú ½ÇÀü ¿¹Á¦¸¦ °°ÀÌ °øºÎÇÏ´Ù º¸¸é ¾î´À»õ źźÇÑ ±âº»±â¿Í ¼öÁØ ³ôÀº ÄÚµù ½Ç·ÂÀ» °âºñÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
--------------------------
¸¶Áö¸· Æ÷Æ®Æú¸®¿À ¡¸½º¿ÍÀÌÇÁ °¶·¯¸®¡¹
¿Â¶óÀÎ ¹«·á ÀüÀÚÃ¥À¸·Î °ø°³!
--------------------------
µ¶ÀÚ¿¡°Ô À¥ »çÀÌÆ® Á¦ÀÛ °æÇèÀ» ´õ¿í dzºÎÇÏ°Ô Á¦°øÇϱâ À§ÇØ ¿ø·¡ 7°³¿´´ø Æ÷Æ®Æú¸®¿À¿¡ Çϳª¸¦ Ãß°¡Çß´Ù! ÀÌ 8¹ø° Æ÷Æ®Æú¸®¿À´Â ´©±¸³ª ½±°Ô üÇèÇØ º¼ ¼ö ÀÖµµ·Ï ¹«·á ÀüÀÚÃ¥À¸·Î Á¦°øÇÑ´Ù. ÃÑ 30ÂÊ ºÐ·®À¸·Î °£´ÜÇϸ鼵µ ¾÷°è¿¡¼ Çʼö·Î »ç¿ëÇÏ´Â ½º¿ÍÀÌÇÁ ¸ð¼Ç°ú Ç÷¯±×ÀÎ ±â´ÉÀ» ´ã¾Æ À¥ °¶·¯¸® ÆäÀÌÁö¸¦ ¿Ï¼ºÇÒ ¼ö ÀÖ°Ô ¸¸µé¾ú´Ù. Ã¥À» ¹Þ±â Àü ¹Ì¸® ¿¹½ÀÇÑ´Ù´Â ¸¶À½À¸·Î Àо ÁÁ°í, ¿Ïµ¶ ÈÄ¿¡ º¹½ÀÇÏ´Â ÀÚ¼¼·Î ÀÐÀ¸¸é ÇнÀ È¿°ú¸¦ ¹è·Î ¾òÀ» ¼ö ÀÖ´Ù.
[ÀüÀÚÃ¥ ÆÄÀÏ ´Ù¿î·Îµå: ÀÌÁö½ºÆÛºí¸®½Ì ȨÆäÀÌÁö www.easyspub.co.kr ¡æ ÀÚ·á½Ç]¿¡¼ µµ¼¸í °Ë»ö ÈÄ ³»·Á¹Þ±â
--------------------------
´ëÇÐ, Çпø °ÀÇ¿¡ ÃÖÀûÈµÈ ±³Àç!
¸ðµç ¿¹Á¦ ¼Ò½º ÆÄÀÏ ¹«·á Á¦°ø!
--------------------------
16ÁÖ Â÷·Î °ÀÇ °èȹÀ» ¼¼¿ö¼ ÀÌ·Ð ½Ã°£¿¡´Â [Çʼö ¹®¹ý] ÆÄÆ®¸¦, ½Ç½À ½Ã°£¿¡´Â [½ÇÀü ¿¹Á¦] ÆÄÆ®¸¦ ÁøÇàÇÒ ¼ö ÀÖÀ¸´Ï ÇпøÀ̳ª ´ëÇÐ ±³Àç·Îµµ ÀûÇÕÇÏ´Ù. ±×¸®°í Ã¥¿¡¼ ´Ù·ç´Â ¸ðµç ¿¹Á¦ ÆÄÀÏÀº [ÀÌÁö½ºÆÛºí¸®½Ì ȨÆäÀÌÁö ¡æ ÀÚ·á½Ç]¿¡¼ ¹«·á·Î ³»·Á¹ÞÀ» ¼ö ÀÖ´Ù. ¿¹Á¦¸¦ ÇϳªÇϳª Á÷Á¢ ÀÔ·ÂÇØ º¸´Â °Íµµ ÁÁ°í, ¼Ò½º ÆÄÀÏÀ» ³»·Á¹ÞÀº ÈÄ ¿Ï¼º ¿¹Á¦¸¦ ½ÇÇàÇØ °á°ú ȸéÀ» º¸¸é¼ ÀÍÈ÷´Â °Íµµ ÁÁ´Ù.
[¿¹Á¦ ÆÄÀÏ ´Ù¿î·Îµå: ÀÌÁö½ºÆÛºí¸®½Ì ȨÆäÀÌÁö www.easyspub.co.kr ¡æ ÀÚ·á½Ç]¿¡¼ µµ¼¸í °Ë»ö ÈÄ ³»·Á¹Þ±â
--------------------------
1:1 °ú¿Ü¸¦ ¹Þ´Â µíÇÑ
ÀúÀÚ Á÷° µ¿¿µ»ó ¹«·á Á¦°ø!
--------------------------
º£Å׶û À¥ µðÀÚÀ̳Ê
¡°¹°·ÐÀÌÁÒ! Àúµµ ±×·¨°Åµç¿ä.¡±
--------------------------
ºñÀü°øÀÚ¿´Áö¸¸ ÇÁ·±Æ®¿£µå À¥ °³¹ßÀÚ°¡ µÈ ÀúÀÚ´Â ºñÀü°øÀÚ³ª ÄÚµù ¿ÕÃʺ¸¿¡°Ô´Â °á°ú¹°ºÎÅÍ ¸¸µé¸é¼ ÀÌ·ÐÀ» ¹è¿ì´Â °ÍÀÌ È¿°úÀûÀ̶ó°í ¸»ÇÑ´Ù. ±×·¡¼ ÀÌ Ã¥Àº ºñÀü°øÀÚ ´«³ôÀÌ¿¡ ¸ÂÃç¼ ÃÖ¼ÒÇÑÀÇ ¹®¹ý¸¸ È°¿ëÇÏ¿© ´Ù¾çÇÑ °á°ú¹°À» °è¼ÓÇؼ ¸¸µé ¼ö ÀÖµµ·Ï ±¸¼ºÇß´Ù. ¶ÇÇÑ Ãʺ¸ÀÚ°¡ Çò°¥¸± ¼ö ÀÖ´Â CSS ¼±ÅÃÀÚ, Ç÷º½º ·¹À̾ƿô, ¹Ìµð¾î Äõ¸®, ¹ÝÀÀÇü À¥, ÀÚ¹Ù½ºÅ©¸³Æ® ÇÔ¼ö µîÀÇ ³»¿ëµµ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖµµ·Ï Á¤¸®Çß´Ù. ÀÌ ¸ðµç °úÁ¤À» ¸¶Ä¡¸é HTML5, CSS3, ES6ÀÇ ÃֽŠÀ¥ Ç¥ÁØ ±â¼úÀ» ¿Ïº®ÇÏ°Ô ÀÍÈ÷°í, ÀÎÅÍ·¢Æ¼ºê À¥ »çÀÌÆ® ÇϳªÂëÀº °Å¶áÈ÷ ¸¸µé ¼ö ÀÖ´Â À¥ °³¹ßÀÚ°¡ µÉ ¼ö ÀÖ´Ù.
--------------------------
ÇöÁ÷ À¥ µðÀÚÀ̳ÊÀÇ ÁøÂ¥ Æ÷Æ®Æú¸®¿À¸¦
Ŭ·Ð ÄÚµùÇÏ¸é¼ ³» °ÍÀ¸·Î ¸¸µç´Ù!
--------------------------
ÀÌ Ã¥¿¡¼ Á¦°øÇÏ´Â 8°¡Áö Æ÷Æ®Æú¸®¿À´Â »ç¿ëÀÚÀÇ ½Ã¼±À» »ç·ÎÀâ¾Æ »óÈ£ ÀÛ¿ëÇÒ ¼ö ÀÖ´Â ¡®ÀÎÅÍ·¢Æ¼ºê À¥¡¯ ±â¼úÀ» Àû¿ëÇØ ¸¸µé¾ú´Ù. µ¿¿µ»ó, À½¾Ç Ç÷¹À̾î´Â ¹°·Ð »ç¿ëÀÚ°¡ À̹ÌÁö¸¦ ½º¿ÍÀÌÇÁÇϰųª 3D ȸéÀ» Á¦¾îÇÏ´Â µîÀÇ È·ÁÇÑ »çÀÌÆ®¸¦ ¸¸µé ¼ö ÀÖ¾î Ãë¾÷À̳ª °úÁ¦ÀÇ Æ÷Æ®Æú¸®¿À·Î È°¿ëÇϱ⿡ ÁÁ´Ù. ¶ÇÇÑ Çö¾÷¿¡¼ »ç¿ëÇÏ´Â À¥ ¹®¹ý°ú ÃֽŠÀ¥ ±â¼ú±îÁö ¸ðµÎ ´Ù·ðÀ¸´Ï ½Ç¹« ´É·ÂÀ» Å°¿ì¸é¼ Æ÷Æ®Æú¸®¿Àµµ ¿Ï¼ºÇÏ´Â Àϼ®ÀÌÁ¶ÀÇ È¿°ú¸¦ ¾ò¾î º¸ÀÚ.
--------------------------
[Çʼö ¹®¹ý]°ú [½ÇÀü ¿¹Á¦] Áß °ñ¶ó¼ °øºÎÇÏÀÚ!
Çö¾÷ °³¹ßÀÚ¶ó¸é Æ÷Æ®Æú¸®¿À »çÀÌÆ®ºÎÅÍ ½ÃÀÛ!
--------------------------
ÀÌ Ã¥ÀÇ 1~6ÀåÀº [Çʼö ¹®¹ý], 7~13ÀåÀº [½ÇÀü ¿¹Á¦] ÆÄÆ®·Î ±¸¼ºÇß´Ù. Ãʺ¸ÀÚ¶ó¸é 1ÀåºÎÅÍ Â÷±ÙÂ÷±Ù °øºÎÇÏ¸é µÈ´Ù. ±×·¯³ª À¥ ¹®¹ýÀ» °øºÎÇÑ ÀûÀÌ ÀÖ´Ù¸é 7~13ÀåºÎÅÍ Àо ÁÁ´Ù. À¥ »çÀÌÆ®¸¦ ¸¸µå´Â µ¥ ÇÊ¿äÇÑ HTML, CSS, ÀÚ¹Ù½ºÅ©¸³Æ®´Â Çʼö ¹®¹ý ÆÄÆ®¿¡ ¸ðµÎ ´ã°Ü ÀÖ´Ù. ÄÚµùÀ» ÇÏ´Ù°¡ ±âÃÊ ¹®¹ýÀÌ ±Ã±ÝÇØÁö¸é ÀÌ Ã¥¿¡¼ ¾È³»ÇÏ´Â ´ë·Î Çʼö ¹®¹ý ÆÄÆ®·Î µ¹¾Æ°¡ °øºÎÇØ º¸ÀÚ. ÀÌ·¸°Ô ¹®¹ý°ú ½ÇÀü ¿¹Á¦¸¦ °°ÀÌ °øºÎÇÏ´Ù º¸¸é ¾î´À»õ źźÇÑ ±âº»±â¿Í ¼öÁØ ³ôÀº ÄÚµù ½Ç·ÂÀ» °âºñÇÒ ¼ö ÀÖÀ» °ÍÀÌ´Ù.
--------------------------
¸¶Áö¸· Æ÷Æ®Æú¸®¿À ¡¸½º¿ÍÀÌÇÁ °¶·¯¸®¡¹
¿Â¶óÀÎ ¹«·á ÀüÀÚÃ¥À¸·Î °ø°³!
--------------------------
µ¶ÀÚ¿¡°Ô À¥ »çÀÌÆ® Á¦ÀÛ °æÇèÀ» ´õ¿í dzºÎÇÏ°Ô Á¦°øÇϱâ À§ÇØ ¿ø·¡ 7°³¿´´ø Æ÷Æ®Æú¸®¿À¿¡ Çϳª¸¦ Ãß°¡Çß´Ù! ÀÌ 8¹ø° Æ÷Æ®Æú¸®¿À´Â ´©±¸³ª ½±°Ô üÇèÇØ º¼ ¼ö ÀÖµµ·Ï ¹«·á ÀüÀÚÃ¥À¸·Î Á¦°øÇÑ´Ù. ÃÑ 30ÂÊ ºÐ·®À¸·Î °£´ÜÇϸ鼵µ ¾÷°è¿¡¼ Çʼö·Î »ç¿ëÇÏ´Â ½º¿ÍÀÌÇÁ ¸ð¼Ç°ú Ç÷¯±×ÀÎ ±â´ÉÀ» ´ã¾Æ À¥ °¶·¯¸® ÆäÀÌÁö¸¦ ¿Ï¼ºÇÒ ¼ö ÀÖ°Ô ¸¸µé¾ú´Ù. Ã¥À» ¹Þ±â Àü ¹Ì¸® ¿¹½ÀÇÑ´Ù´Â ¸¶À½À¸·Î Àо ÁÁ°í, ¿Ïµ¶ ÈÄ¿¡ º¹½ÀÇÏ´Â ÀÚ¼¼·Î ÀÐÀ¸¸é ÇнÀ È¿°ú¸¦ ¹è·Î ¾òÀ» ¼ö ÀÖ´Ù.
[ÀüÀÚÃ¥ ÆÄÀÏ ´Ù¿î·Îµå: ÀÌÁö½ºÆÛºí¸®½Ì ȨÆäÀÌÁö www.easyspub.co.kr ¡æ ÀÚ·á½Ç]¿¡¼ µµ¼¸í °Ë»ö ÈÄ ³»·Á¹Þ±â
--------------------------
´ëÇÐ, Çпø °ÀÇ¿¡ ÃÖÀûÈµÈ ±³Àç!
¸ðµç ¿¹Á¦ ¼Ò½º ÆÄÀÏ ¹«·á Á¦°ø!
--------------------------
16ÁÖ Â÷·Î °ÀÇ °èȹÀ» ¼¼¿ö¼ ÀÌ·Ð ½Ã°£¿¡´Â [Çʼö ¹®¹ý] ÆÄÆ®¸¦, ½Ç½À ½Ã°£¿¡´Â [½ÇÀü ¿¹Á¦] ÆÄÆ®¸¦ ÁøÇàÇÒ ¼ö ÀÖÀ¸´Ï ÇпøÀ̳ª ´ëÇÐ ±³Àç·Îµµ ÀûÇÕÇÏ´Ù. ±×¸®°í Ã¥¿¡¼ ´Ù·ç´Â ¸ðµç ¿¹Á¦ ÆÄÀÏÀº [ÀÌÁö½ºÆÛºí¸®½Ì ȨÆäÀÌÁö ¡æ ÀÚ·á½Ç]¿¡¼ ¹«·á·Î ³»·Á¹ÞÀ» ¼ö ÀÖ´Ù. ¿¹Á¦¸¦ ÇϳªÇϳª Á÷Á¢ ÀÔ·ÂÇØ º¸´Â °Íµµ ÁÁ°í, ¼Ò½º ÆÄÀÏÀ» ³»·Á¹ÞÀº ÈÄ ¿Ï¼º ¿¹Á¦¸¦ ½ÇÇàÇØ °á°ú ȸéÀ» º¸¸é¼ ÀÍÈ÷´Â °Íµµ ÁÁ´Ù.
[¿¹Á¦ ÆÄÀÏ ´Ù¿î·Îµå: ÀÌÁö½ºÆÛºí¸®½Ì ȨÆäÀÌÁö www.easyspub.co.kr ¡æ ÀÚ·á½Ç]¿¡¼ µµ¼¸í °Ë»ö ÈÄ ³»·Á¹Þ±â
--------------------------
1:1 °ú¿Ü¸¦ ¹Þ´Â µíÇÑ
ÀúÀÚ Á÷° µ¿¿µ»ó ¹«·á Á¦°ø!
--------------------------
º£Å׶û À¥ µðÀÚÀ̳Ê