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

¸¸µé¸é¼­ ¹è¿ì´Â ¸ð´ø À¥»çÀÌÆ® Á¦ÀÛ
¸¸µé¸é¼­ ¹è¿ì´Â ¸ð´ø À¥»çÀÌÆ® Á¦ÀÛ
  • ÀúÀھ߹«(ÁöÈÆ) Àú
  • ÃâÆÇ»çÇѺû¹Ìµð¾î
  • ÃâÆÇÀÏ2016-06-01
  • µî·ÏÀÏ2019-08-29
º¸À¯ 2, ´ëÃâ 0, ¿¹¾à 0, ´©Àû´ëÃâ 11, ´©Àû¿¹¾à 0

Ã¥¼Ò°³

¡°Front-End ¸ð´ø ¿öÅ©Ç÷θ¦ À§ÇÑ ÃֽŠÅ×Å©´ÐÀ» ¸ðµÎ ´ã¾Ò´Ù.¡±

Gulp´Â ¿À´Ã³¯ Front-End °³¹ß ȯ°æ¿¡ ¾ø¾î¼­´Â ¾ÈµÉ Çʼö µµ±¸·Î ÀÚ¸® Àâ¾Ò´Ù. ÇÏÁö¸¸ ¾ÈŸ±õ°Ôµµ ±¹³» ½Ç¹« ȯ°æ¿¡¼­´Â ÀÌ·± µµ±¸¸¦ È°¿ëÇÏ´Â °æ¿ì¸¦ ã±â°¡ ½±Áö ¾Ê´Ù. ¾Æ¹«·¡µµ ¸í·É¾î ÀÎÅÍÆäÀ̽º ±â¹Ý Node.js ȯ°æÀÌ »ý¼ÒÇϱ⵵ ÇÏ°í, °ü·Ã µµ¼­°¡ ¸¹Áö ¾Ê±â ¶§¹®ÀÏ °ÍÀÌ´Ù. ÀÌ Ã¥Àº Node.js ȯ°æ¿¡¼­ Gulp¸¦ »ç¿ëÇÏ¿© Jade, Sass, Susy, CoffeeScript µîÀ» È°¿ëÇÏ´Â ¹æ¹ýÀ» Ä£ÀýÇÏ°Ô ¼³¸íÇÑ´Ù.

¶ÇÇÑ ½Ç¹«ÀÚµéÀÌ Front-End °³¹ß ȯ°æÀ» °£Á¢ÀûÀ¸·Î °æÇèÇÒ ¼ö ÀÖµµ·Ï ¸ð´ø ¿öÅ©Ç÷θ¦ È°¿ëÇÑ À¥»çÀÌÆ® Á¦ÀÛ µ¿¿µ»ó °­ÀǸ¦ Á¦°øÇϸç ÀúÀÚ´Â ÀÌ Ã¥À» ÅëÇØ ½Ç¹«ÀÚµéÀÌ °üÇàÀûÀÎ ÀÛ¾÷ ¹æ½Ä¿¡¼­ ¹þ¾î³ª º¸´Ù ³ªÀº °³¹ß ȯ°æÀ» ±¸¼ºÇÏ±æ ¹Ù¶ó¸ç, ÀÛ¾÷¿¡ ÇÊ¿äÇÑ Äڵ峪 ÀÚ·á, ±Ã±ÝÁõÀ» ÇØ°áÇÒ ¼ö ÀÖµµ·Ï ¾ß¹«ÀÇ GitHub¸¦ °ø°³ÇÏ°í ÀÖ´Ù.

µ¿¿µ»ó °­ÀÇ : http://url.yamoo9.net/makingmodernweb
¾ß¹«ÀÇ GitHub : http://url.yamoo9.net/modernworkprocess

¸ñÂ÷

[1Àå ¸ð´ø ÅؽºÆ® ¿¡µðÅÍ, Sublime Text]
Sublime Text 3 ¿¡µðÅÍ ¼³Ä¡ ¹× ÆÐÅ°Áö °ü¸®
- Sublime Text 3 ´Ù¿î·ÎµåÇϱâ 
- Sublime Text 3 ¼³Ä¡Çϱâ 
Sublime Text 3 ±âº» »ç¿ë ¹æ¹ý ¹× È¯°æ ¼³Á¤ 
- »õ ¹®¼­ ¸¸µé¾î ÀúÀåÇϱâ
- ºü¸¥ HTML ¸¶Å©¾÷ ±â´É È°¿ëÇϱâ
- »çÀ̵堹٠ǥ½ÃÇÏ°í ¼û±â±â
- Sublime Text ±âº» ¼³Á¤ ¹× ´ÜÃàÅ° º¯°æÇϱâ 
Sublime Text 3 ±â´ÉÀ» º¸¿ÏÇϴ ´Ù¾çÇÑ ÆÐÅ°Áö 
- Çѱ۠ÀԷ ¹®Á¦¸¦ º¸¿ÏÇϴ IME Support ¼³Ä¡Çϱâ 
- Side Bar Enhancements ÆÐÅ°Áö È¯°æ ¼³Á¤Çϱâ
- ConvertToUTF8 ÆÐÅ°Áö·Î Çѱ۠ÀÎÄÚµù ¹®¼­ÀÇ ÆíÁý ¹®Á¦ º¸¿ÏÇϱâ
- Color Picker ÆÐÅ°Áö·Î Æí¸®ÇÏ°Ô »ö»ó ¼öÁ¤Çϱâ 
- ¿ø°ÝÀ¸·Î ÆÄÀÏÀ» ¿­°í ÆíÁýÇϴ SFTP ÆÐÅ°Áö 
Sublime Text 3 Å׸¶/Ä÷¯ ½ºÅ´ º¯°æ 
- Sublime Text Å׸¶ º¯°æÇϱâ 
- Color SchemeÀ¸·Î Äڵ堻ö»ó ½ºÅ¸ÀÏ º¯°æÇϱâ

[2Àå ÇÁ·ÎÁ§Æ® ¹öÀü °ü¸® µµ±¸, Git & GitHub]
Git & GitHub¸¦ È°¿ëÇÑ ÇÁ·ÎÁ§Æ® ¹öÀü °ü¸® 
- GitHub·Î ÇÁ·ÎÁ§Æ® °ü¸® ¿³º¸±â 
- ÇÁ·ÎÁ§Æ®¸¦ °ü¸®Çϴ Git ¼³Ä¡Çϱâ 
- Git GUI(Graphic User Interface) µµ±¸ ¼³Ä¡Çϱâ 
GitHub °èÁ¤ µî·Ï°ú ÇÁ·ÎÁ§Æ® ÀúÀå¼Ò »ç¿ë ¹æ¹ý 
- GitHub °èÁ¤ µî·ÏÇϱâ 
- GitHub for Windows¿¡ GitHub °èÁ¤ ¿¬°áÇϱâ 
- GitHub ·ÎÄàÀúÀå¼Ò »ý¼º ¹× ÀÌ¿ëÇϱâ 
- GitHub ¿Â¶óÀΠÀúÀå¼Ò¿¡¼­ ÆÄÀÏ »ý¼ºÇÏ°í Ä¿¹ÌÆ®Çϱâ
- Ä¿¹ÌÆ® °á°ú µÇµ¹¸®±â(Revert) 
- µ¿±âÈ­¿¡¼­ Æ¯Á¤ Æú´õ³ª ÆÄÀÏ Á¦¿ÜÇϱâ 
- ´Ù¸¥ GitHub »ç¿ëÀÚ¿Í Çù¾÷(Collaboration)Çϱâ 
mission 01 : ÆÄÀÏ ¼öÁ¤ÇÏ¿© Ä¿¹ÌÆ® ¹× µ¿±âÈ­Çϱâ
Gist¸¦ ÀÌ¿ëÇÑ Æí¸®ÇÑ ½º´ÏÆê ¹öÀü °ü¸® 
mission 02 : Sublime Text¿¡ GitGutter Ç÷¯±×ÀΠ¼³Ä¡Çϱâ

[3Àå ¸í·É¾î ±â¹Ý ÀÎÅÍÆäÀ̽º, CLI]
Windows ¸í·É¾î ±â¹Ý ÀÎÅÍÆäÀ̽º µµ±¸ 
Git Àü¿ë CLI µµ±¸, Git Bash 
- Git Bash ½ÇÇà ¹× Á¾·áÇϱâ 
- µð·ºÅ͸® À̵¿ ¹× »ý¼ºÇϱâ 
- ÆÄÀÏ »ý¼º?¸ñ·Ï Ãâ·Â?À̵¿Çϱâ
- ÆÄÀÏ°ú µð·ºÅ͸® À̸§ ¹Ù²Ù±â 
- Vim ¿¡µðÅͷΠÆÄÀÏ »ý¼ºÇÏ°í ÆíÁýÇϱâ 
- ÆÄÀÏ ¹× µð·ºÅ͸® º¹Á¦ÇÏ°í »èÁ¦Çϱâ 
- Git Bash¿¡¼­ Çѱ۠±úÁü ¹®Á¦ ÇØ°áÇϱâ 
- .bashrc ÆÄÀÏ ¼û±â±â 
¸í·É¾î ±â¹Ý ÀÎÅÍÆäÀ̽º·Î Git »ç¿ë 
- git init·Î CLI È¯°æ¿¡¼­ Git °ü¸®Çϱâ 
- git status·Î CLI È¯°æ¿¡¼­ Git »óÅ ȮÀÎÇϱâ 
- git add·Î Git °ü¸® ´ë»ó Ãß°¡Çϱâ 
- git commit·Î Git °ü¸® ÆÄÀÏÀ» ½º³À¼¦¿¡ ±â·ÏÇϱâ 
- Ä¿¹ÌÆ®ÇÑ ÀÌÈÄ ÆÄÀÏ °ü¸®(¼öÁ¤?È®ÀÎ?±â·Ï)Çϱâ 
- git commit --amend·Î ¿Ï·áÇÑ Ä¿¹ÌÆ® µ¤¾î¾²±â 
- git reset HEAD^·Î ÃÖ±Ù Ä¿¹ÌÆ® °á°ú Ãë¼ÒÇϱâ 
- git checkoutÀ¸·Î °³º° ÆÄÀÏ º¹±¸Çϱâ 
- git remote add·Î ¿ø°Ý ÀúÀå¼Ò µî·ÏÇϱâ 
- git push·Î ¿ø°Ý ÀúÀå¼Ò¿¡ ÇÁ·ÎÁ§Æ® ¾÷µ¥ÀÌÆ®Çϱâ 

[4Àå ÃÊ°í¼Ó ÄÚµù µµ±¸, Emmet]
ÇÁ·ÐÆ®-¿£µå °³¹ßÀÚ¸¦ À§ÇÑ ÃÊ°í¼Ó ÄÚµù µµ±¸, Emmet 
- Emmet ¼³Ä¡Çϱâ 
- Document ±âº»Çü Äڵ带 Sublime Text¿¡ Ãâ·ÂÇϱâ 
- ¹®¼­ À¯Çü Á¤ÀÇ(DTD) Äڵ带 Sublime Text¿¡ Ãâ·ÂÇϱâ 
- ¹®¼­ À¯Çü Á¤ÀÇ(DTD)   ¹®¼­ ±âº»Çü Äڵ带 Sublime Text¿¡ Ãâ·ÂÇϱâ 
CSS ¼±ÅÃÀÚ Ãà¾à Çü½ÄÀ» È°¿ëÇÑ HTML Äڵ堻ý¼º 
- ¼Ó¼º ¿¬»êÀڷΠHTML Äڵ報¸Á¶ »ý¼ºÇϱâ
- {} ¿¬»êÀÚ¸¦ »ç¿ëÇÏ¿© ÅؽºÆ® »ý¼ºÇϱâ 
- HTML Äڵ堽º´ÏÆê/Ãà¾à »ç¿ëÀÚ Á¤ÀÇ È®ÀåÇϱâ 
Ãà¾à Çü½ÄÀ» È°¿ëÇÑ CSS Äڵ堻ý¼º 
- Ãà¾à ÅؽºÆ®·Î CSS Äڵ堻ý¼ºÇϱâ 
- CSS Äڵ堽º´ÏÆê »ç¿ëÀÚ Á¤ÀÇ È®ÀåÇϱâ 
- CSS3 º¥´õ ÇÁ¸®ÇȽº ÀÚµ¿ ¿Ï¼ºÇϱâ 
- lg() ÇÔ¼ö·Î CSS3 ¼±Çü ±×·¹À̵ð¾ðÆ® Äڵ堻ý¼ºÇϱâ
ÄÚµù ½Ã°£À» ´ÜÃàÇϴ ÇÊÅÍ¿Í ¾×¼Ç
- Àß ¾²¸é ¸Å¿ì À¯¿ëÇÑ ÇÊÅÍ ¾Ë¾Æº¸±â
- Emment ¾×¼Ç(Actions)À¸·Î ÄÚµù ´É·Â Çâ»ó½ÃÅ°±â
mission 03 : Emmet ¾×¼Ç ´ÜÃàÅ° Á¤¸®Çϱâ

[5Àå Node.js È¯°æ ±¸¼º]
Chrome V8 ¿£Áø ±â¹ÝÀÇ Ç÷§Æû ±¸¼º, Node.js & NPM
- Node.js ¼³Ä¡Çϱâ 
- NPM - ³ëµå ÆÐÅ°Áö ¸Å´ÏÀú ¾Ë°í °¡±â 
Node.js È¯°æÀ» ÀÌÇØÇϴ °£´Ü ½Ç½À 
- node ¸í·É¾î »ç¿ëÇϱâ 
- ÀÚ¹Ù½ºÅ©¸³Æ® ÆÄÀÏÀ» Node.js·Î ½ÇÇàÇϱâ 
- Å¬¶óÀ̾ðÆ® ÀÚ¹Ù½ºÅ©¸³Æ® vs ¼­¹ö »çÀ̵å ÀÚ¹Ù½ºÅ©¸³Æ® 
Node.js È¯°æÀ» ÀÌÇØÇϴ ½ÉÈ­ ½Ç½À 
- File System ¸ðµâÀ» »ç¿ëÇÏ¿© ÆÄÀÏ Àбâ(Read File) 
- File System ¸ðµâÀ» »ç¿ëÇÏ¿© ÆÄÀÏ ¾²±â(Write File) 
- File System ¸ðµâ·Î ÆÄÀÏ º¯°æ ³»¿ëÀ» °è¼Ó °üÂû(Watch File)Çϱâ
NPM ³ëµå ÆÐÅ°Áö ¸Å´ÏÀú È°¿ë 
- NPM ¸í·É¾î·Î ¿ÜºÎ ÆÐÅ°Áö ¸ðµâ ¼³Ä¡Çϱâ
- http-server À¥¼­¹ö ¸ðµâ È°¿ëÇϱâ 
- »ç¿ëÀÚ Á¤ÀÇ ¸ðµâ(User Define Module) È°¿ëÇϱâ
- »ç¿ëÀÚ Á¤ÀÇ ¸ðµâ, NPM¿¡ ¹èÆ÷Çϱâ
mission 04 : NPM¿¡ ¹èÆ÷ÇÑ ¸ðµâ ´Ù¿î·ÎµåÇÏ¿© Å×½ºÆ®Çϱâ

[6Àå ¾÷¹«¸¦ Çâ»ó½ÃÅ°´Â ÀÚµ¿È­ ½Ã½ºÅÛ, Gulp]
Gulp.js¸¦ »ç¿ëÇϴ ±âÃÊ Áغñ 
- Gulp.js Àü¿ªÀûÀ¸·Î ¼³Ä¡Çϱâ 
- Gulp.js ÇÁ·ÎÁ§Æ® µð·ºÅ͸®¿¡ ·ÎÄ༳ġÇϱâ 
- gulpfile.js ÆÄÀÏ »ý¼º ¹× ¼öÇàÇÒ ¾÷¹«(Task) µî·ÏÇϱâ 
Gulp Ç÷¯±×ÀÎÀ» È°¿ëÇÑ ÆÄÀÏ °áÇÕ, ¾ÐÃà, ¹®¹ý °Ë»ç
- gulp-concat ¸ðµâ·Î ÀÚ¹Ù½ºÅ©¸³Æ® ÆÄÀÏ °áÇÕÇϱâ
- gulp-uglify ¸ðµâ·Î ÀÚ¹Ù½ºÅ©¸³Æ® ÆÄÀÏ ¾ÐÃàÇϱâ 
- uglify ¾ÐÃà°ú ÁÖ¼® ¿É¼Ç ¼³Á¤Çϱâ 
- gulp-jshint ¸ðµâ·Î ÀÚ¹Ù½ºÅ©¸³Æ® ÆÄÀÏ ¹®¹ý °Ë»çÇϱâ
- gulp-rename ¸ðµâ·Î ¾ÐÃà?ºñ¾ÐÃà ÆÄÀÏ Ãâ·ÂÇϱâ 
ÀÛ¼ºÇÑ scripts ¾÷¹« ¿ªÇÒº° ºÐ¸® 
- ºÐ¸®µÈ ¾÷¹«¸¦ Á¶ÇÕÇÏ¿© ½ÇÇàÇÒ »õ·Î¿î ¾÷¹« Á¤ÀÇÇϱâ
- ÆÄÀÏ °æ·Î È¯°æ ¼³Á¤(Configuration) °´Ã¼·Î À¯Áöº¸¼öÇϱâ 
del ¸ðµâ·Î Æ¯Á¤ µð·ºÅ͸® ¹× ÆÄÀÏ »èÁ¦ 
scripts ¾÷¹« ÇÁ·Î¼¼½º¿Í µ¿ÀÏÇÑ CSS ¾÷¹« Á¤ÀÇ 
- ÆÄÀÏ °æ·Î È¯°æ ¼³Á¤ °´Ã¼¿¡ CSS ¼³Á¤ ¿É¼Ç Ãß°¡Çϱâ
- CSS @import ±ÔÄ¢À¸·Î ÆÄÀÏ º´Çՠó¸®Çϱâ 
- CSS ¾ÐÃàÇÏÁö ¾ÊÀº ÆÄÀÏ°ú ¾ÐÃàÇÑ ÆÄÀϷΠÃâ·Â ¼³Á¤Çϱâ
gulp-if ¸ðµâ·Î Á¶°Ç¿¡ µû¸¥ ¾÷¹« Ã³¸® 
Áö¼ÓÀû °üÂû ¾÷¹« µî·Ï 
ȯ°æ ¼³Á¤ ¿ÜºÎ·Î ºÐ¸® 
GitHub¿¡¼­ Gulp ÇÁ·ÎÁ§Æ® ÆÄÀÏ ´Ù¿î·ÎµåÇÏ¿© ½ÇÇà

[7Àå °í¼º´É HTML ÅÛÇø´ ¿£Áø, Jade]
Jade ÇнÀÀ» À§ÇÑ ±âº» Áغñ 
- Gulp ±â¹Ý ÇÁ·ÎÁ§Æ® ´Ù¿î·Îµå ¹× ¸ðµâ ¼³Ä¡Çϱâ
- Gulp ÇÁ·ÎÁ§Æ®¿¡ Jade ¸ðµâ ¼³Ä¡Çϱâ
- Sublime Text¿¡ Jade ¹®¹ý ¸ðµå ¼³Ä¡Çϱâ 
Jade ¼Ó±â ¸¶Å©¾÷(Shorthand Markup)
- ¹®¼­ À¯Çü Á¤ÀÇ(DTD) Äڵ堾˾ƺ¸±â 
- HTML ¿ä¼Ò »ç¿ëÇϱâ 
- HTML ¼Ó¼º »ç¿ëÇϱâ 
- ³»¿ë(Contents) ÀÔ·ÂÇϱâ 
- ºí·Ï ¿ä¼Ò ¾È¿¡¼­ ÀζóÀΠ¿ä¼Ò »ç¿ëÇϱâ
- script, style Äڵ堺í·Ï »ç¿ëÇϱâ 
- ÁÖ¼® »ç¿ëÇϱâ 
Jade ½ºÅ©¸³ÆÃ(Scripting) 
- Jade º¯¼ö¿Í 3Ç× ¿¬»ê ¾Ë¾Æº¸±â 
- ÇöÀç ÆäÀÌÁöÀÇ ³»ºñ°ÔÀ̼Ǡ¸Þ´º È°¼ºÈ­Çϱâ
- Æ¯¼ö¹®ÀÚ À̽ºÄÉÀÌÇÁ Ã³¸®Çϱâ
- ¹è¿­·Î class ¼Ó¼º Á¦¾îÇϱâ 
- &attributes()¸¦ È°¿ëÇÑ ¼Ó¼º ¼³Á¤Çϱâ
- Á¶°Ç¹® »ç¿ëÇϱâ
- ¹Ýº¹¹® »ç¿ëÇϱâ
- ¹Í½ºÀΠ»ç¿ëÇϱâ
Jade ÅÛÇ÷¹ÀÌÆÃ(Templating) 
- Æ÷ÇÔ(Includes) »ç¿ëÇϱâ 
- È®Àå & »ó¼Ó(Extends & Inheritance) »ç¿ëÇϱâ
- ³»ºñ°ÔÀ̼Ǡ¾ÆÀÌÅÛ Ãß°¡Çϱâ 
- ÅÛÇø´ »ó¼Ó ±âº» °ª ¼³Á¤(Inheritance Default Value)Çϱâ
- block ¾ÕµÚ¿¡ ³»¿ë Ãß°¡(prepend/append block)Çϱâ
- È¯°æ ¼³Á¤(Configuration) ºÐ¸®Çϱâ 
- È¯°æ ¼³Á¤ µ¤¾î¾²±â(Overriding)

[8Àå °­·ÂÇÑ CSS È®Àå ¾ð¾î, Sass & Compass, Bourbon]
Sass »ç¿ëÀ» À§ÇÑ ¸ðµâ ¼³Ä¡ ¹× Áغñ 
- Sass ¾Ë¾Æº¸±â 
- gulp-sass ¸ðµâ ¼³Ä¡Çϱâ 
- gulp-sass ¸ðµâ È£Ãâ ¹× sass ¾÷¹« µî·ÏÇϱâ 
- gulp-compass ¸ðµâ È£Ãâ ¹× compass ¾÷¹« µî·ÏÇϱâ 
Sass ±âº»(Basic) »ç¿ë ¹æ¹ý 
- Sass »ç¿ë ±ÔÄ¢ ÆľÇÇϱâ
- Sass È£Ãâ(Import)Çϱâ 
Sass ½ºÅ©¸³Æ®(Script) »ç¿ë ¹æ¹ý 
- Sass º¯¼ö(Variables : $) È°¿ëÇϱâ 
- Sass ¿¬»ê(Operation) Ã³¸®Çϱâ 
- Sass ¹Í½ºÀÎ(Mixin) »ç¿ëÇϱâ 
- Sass Á¶°Ç¹®(Conditions) »ç¿ëÇϱâ 
- Sass ¹Ýº¹¹®(Loops) »ç¿ëÇϱâ 

[9Àå ½ÉÇÃÇÑ ÀÚ¹Ù½ºÅ©¸³Æ® ÄÄÆÄÀÏ·¯, CoffeeScript]
CoffeeScript »ç¿ëÀ» À§ÇÑ ¸ðµâ ¼³Ä¡ ¹× Áغñ 
- gulp-coffee ¸ðµâ ¼³Ä¡ ¹× ¾÷¹« µî·ÏÇϱâ 
- CoffeeScript¿¡¼­ ÀÚ¹Ù½ºÅ©¸³Æ®·Î º¯È¯ °üÂûÇϱâ 
CoffeeScript ¹®¹ý(Syntax) 
- ÁÖ¼®(Comments) »ç¿ëÇϱâ 
- º¯¼ö¿Í È£À̽ºÆ® »ç¿ëÇϱâ 
- CoffeeScript µ¥ÀÌÅÍ À¯Çü ÀÔ·ÂÇϱâ 
- ÇÔ¼ö(Function) ¼±¾ðÇÏ°í ½ÇÇàÇϱâ 
- ÇÔ¼ö Àü´ÞÀÎÀÚ ±âº» °ª ¼³Á¤Çϱâ 
- CoffeeScript ÇÔ¼ö¿¡ Áö¿ª º¯¼ö ¼±¾ðÇϱâ 
- Á¶°Ç¹® if, else, then »ç¿ëÇϱâ 
- ¿¬»êÀÚ¿Í º°Äª »ç¿ëÇϱâ 
- Á¸Àç ¿¬»êÀÚ »ç¿ëÇϱâ 
- ¹®ÀÚ º¸°£¹ý°ú ºí·Ï ¹®ÀÚ »ç¿ëÇϱâ 
- ¹Ýº¹¹® for, in, when, by »ç¿ëÇϱâ 
- ¹Ýº¹¹® while, until, break, loop »ç¿ëÇϱâ
gulpfile.js ÆÄÀÏÀ» CoffeeScript ¹®¹ýÀ¸·Î º¯°æ

[10Àå ½º¸¶Æ®ÇÑ ¹ÝÀÀÇü À¥ ±×¸®µå ½Ã½ºÅÛ, Susy]
Susy »ç¿ëÀ» À§ÇÑ ¸ðµâ ¼³Ä¡ ¹× Áغñ 
- Bower ÆÐÅ°Áö ¸Å´ÏÀú ¹× ÆÐÅ°Áö ¼³Ä¡Çϱâ 
- Bower·Î ÇÁ·ÎÁ§Æ® ¶óÀ̺귯¸® ´Ù¿î·Îµå ¹× °ü¸®Çϱâ
- preenÀ¸·Î Bower ÄÄÆ÷³ÍÆ®¿¡¼­ ºÒÇÊ¿äÇÑ ÆÄÀÏ »èÁ¦Çϱâ
- ¶óÀ̺귯¸®¸¦ ÇÊ¿äÇÑ À§Ä¡¿¡ º¹»çÇϴ bower:copy ¾÷¹« »ý¼ºÇϱâ
- À¯Áöº¸¼ö¸¦ °í·ÁÇÑ bower:copy ¾÷¹« ¼³Á¤ Äڵ堼öÁ¤Çϱâ 
mission 05 : ¼öÁ¤ »çÇ×ÀÌ ¹ß»ýÇÒ ¶§ À¯Áöº¸¼öÇϱâ
Susy ±âº» »ç¿ë ¹æ¹ý 
- Susy2 ±×¸®µå ½Ã½ºÅÛ ±âº» »ç¿ë ¹æ¹ý ÀÍÈ÷±â 
- Susy2 ±×¸®µå ½Ã½ºÅÛ ±Û·Î¹ú ¼³Á¤Çϱâ 
- layout() ¹Í½ºÀÎÀ¸·Î Susy2 ±Û·Î¹ú ¼Ó¼º ´ÜÃà ¼³Á¤Çϱâ 
- with-layout() ¹Í½ºÀÎÀ¸·Î Susy2 Áö¿ª ¼Ó¼º ´ÜÃà ¼³Á¤Çϱâ
- span() ¹Í½ºÀÎÀ¸·Î Susy2 Ä÷³ ¼Ó¼º ´ÜÃà ¼³Á¤Çϱâ 
¹ÝÀÀÇü ±×¸®µå ½Ã½ºÅÛ(Responsive Grid System)
- Breakpoint ¼³Ä¡ ¹× ¼³Á¤Çϱâ 
- Breakpoint »ç¿ëÇϱâ 
Susy2 Breakpoint·Î ¹ÝÀÀÇü À¥ µðÀÚÀΠ·¹À̾ƿô ±¸Çö
- ¸ð¹ÙÀÏ ·¹À̾ƿô ¼³Á¤Çϱâ 
- ÅÂºí¸´ ·¹À̾ƿô ¼³Á¤Çϱâ 
- µ¥½ºÅ©Åé ·¹À̾ƿô ¼³Á¤Çϱâ

[11Àå ÇÁ·ÐÆ®-¿£µå °³¹ß µµ±¸, yamoo9_ProjectKit]
yamoo9_ProjectKit µµ±¸ »ç¿ëÀ» À§ÇÑ Áغñ 
yamoo9_ProjectKit µµ±¸ »ç¿ë ¹æ¹ý 
- Ãʱ⠼³Á¤ ¾÷¹«, gulp settings ½ÇÇàÇϱâ 
- Jade, Sass, CoffeeScript¸¦ È°¿ëÇϴ ±âº» ¾÷¹« ½ÇÇàÇϱâ
- HTML, CSS, JS¸¦ È°¿ëÇϴ À¥ ¾÷¹« ½ÇÇàÇϱâ 
- »ý¼ºµÈ µð·ºÅ͸®¿Í ÆÄÀÏ »èÁ¦Çϱâ 
- À̹ÌÁö ÃÖÀûÈ­ ¾÷¹« ½ÇÇàÇϱâ 
- SVG ÆÄÀÏ¿¡¼­ PNG ÆÄÀÏ ÀÚµ¿ »ý¼ºÇϱâ 
- ½ºÇÁ¶óÀÌÆ® À̹ÌÁö/CSS ÆÄÀÏ ÀÚµ¿ »ý¼ºÇϱâ

ÇÑÁÙ ¼­Æò