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

목차 (Table of Contents)

• 자료제공 :
• [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 파일 자동 생성하기