߹() | Ѻ̵
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 ڵ ϱ