검색

북큐브서점

마이페이지

로그아웃
  • 북캐시

    0원

  • 적립금

    0원

  • 쿠폰/상품권

    0장

  • 무료이용권

    0장

자동완성 기능이 꺼져 있습니다.

자동완성 끄기

네이버 인증이 완료되었습니다.

이미 북큐브 회원인 경우북큐브 ID로 로그인하시면, SNS계정이 자동으로 연결됩니다.

SNS 계정으로 신규 가입하기SNS계정으로 로그인 시 해당 SNS 계정으로 북큐브에 자동 가입되며 간편하게 로그인이 가능합니다.

비밀번호 찾기

북큐브 고객센터 : 1588-1925

아이디 찾기

북큐브 고객센터 : 1588-1925

아이디 조회 결과

비밀번호 조회 결과

으로
비밀번호를 발송했습니다.

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

도서 이미지 - 만들면서 배우는 모던 웹사이트 제작

야무

한빛미디어|2019.04.30

(0명)

서평(0)

시리즈 가격정보
전자책 정가 19,600원
구매 19,600원3% 적립
출간정보 2019.04.30|PDF|100.98MB

10년소장 안내

10년소장은 장기대여 상품으로 구매 상품과는 달리 다양한 프로모션 및 폭넓은 할인 혜택 제공이 가능합니다.

프로모션이 없는 경우 구매 상품과 가격이 동일하지만 프로모션이 진행되게 되면 큰 폭의 할인 및 적립이 제공됩니다.

close

지원 단말기 : IOS 8.0 이상, Android 4.1 이상, PC Window 7 OS 이상 지원

책소개

“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 파일 자동 생성하기

저자소개

저자 : 야무(지훈)

전공인 비주얼 디자인과 프론트-엔드 프로그래밍에 주력하면서 실무자를 위한 웹 디자인, 개발 강의 및 노하우를 전수하는 집필에도 힘씁니다. 글로 표현하는 것보다는 이야기하면서 소통하는 것을 더 좋아합니다. 하지만 현장에서 갈고 닦은 것들을 책으로 펴내 조금이라도 더 많은 이에게 효율적인 작업 방법을 알려 주려고 노력합니다. 현장에서 ‘야무쌤’이라고 불리며, 자신과 함께 성장해가는 학생들에게 무한한 애정을 느낍니다. 최근에는 자신을 찾는 학생 한 명 한 명이 만족할 수 있는 더욱 알찬 강의 준비로 바쁜 나날을 보내고 있습니다.

집필 도서 :
《만들면서 배우는 HTML5+CSS3+jQuery》, 2012
《만들면서 배우는 모던 웹사이트 디자인》, 2014

홈페이지 : yamoo9.net
커뮤니티 : cafe.naver.com/webstandardproject
메일 : yamoo9@naver.com
SNS : facebook.com/yamoo9

서평(0)

별점으로 평가해주세요.

서평쓰기

스포일러가 포함되어 있습니다.

0

(0명)

ebook 이용안내

  • 구매 후 배송이 필요 없이 다운로드를 통해 이용 가능한 전자책 상품입니다.
  • 전자책 1회 구매로 PC, 스마트폰, 태블릿PC, eBook 전용 단말기 등에서 이용하실 수 있습니다.
    (도서 특성에 따라 이용 가능한 기기의 제한이 있을 수 있습니다.)
  • 책파일 내 판권정보 정가와 북큐브 사이트 정가 표시가 다를 수 있으며, 실제 정가는 사이트에 표시된 정가를 기준으로 합니다.
  • 적립금 지급은 적립금 및 북큐브 상품권으로 결제한 금액을 뺀 나머지가 적립금으로 지급됩니다.
    (적립금 유효기간은 마이페이지>북캐시/적립금/상품권>적립금 적립내역에서 확인 가능합니다.)
  • 저작권 보호를 위해 인쇄/출력 기능은 지원하지 않습니다.
  • 구매하신 전자책은 “마이페이지 > 구매목록” 또는 “북큐브 내서재 프로그램 > 구매목록”에서 다운로드할 수 있습니다.
  • 스마트폰, 태블릿PC의 경우 북큐브 어플리케이션을 설치하여 이용할 수 있습니다. (모바일 페이지 바로가기)
  • PC에서는 PC용 내서재 프로그램을 통해 도서를 이용하실 수 있습니다.
  • ID 계정 당 총 5대의 기기에서 횟수 제한 없이 이용하실 수 있습니다.
도서.공연비 소득공제 사업자 관련 이미지

소득공제 대상 사업자 인증번호
312018060044

TOP