만들면서 배우는 모던 웹사이트 제작

[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 실행 및 종료하기
-. 디렉터리 이동 및 생성하기
-. 파일 생성o목록 출력o이동하기
-. 파일과 디렉터리 이름 바꾸기
-. Vim 에디터로 파일 생성하고 편집하기
-. 파일 및 디렉터리 복제하고 삭제하기
-. Git Bash에서 한글 깨짐 문제 해결하기
-. .bashrc 파일 숨기기
명령어 기반 인터페이스로 Git 사용
-. git init로 CLI 환경에서 Git 관리하기
-. git status로 CLI 환경에서 Git 상태 확인하기
-. git add로 Git 관리 대상 추가하기
-. git commit로 Git 관리 파일을 스냅샷에 기록하기
-. 커미트한 이후 파일 관리(수정o확인o기록)하기
-. 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 모듈로 압축o비압축 파일 출력하기
작성한 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 파일 자동 생성하기