메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

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

한빛미디어

집필서

판매중

  • 저자 : 야무(지훈)
  • 출간 : 2015-04-20
  • 페이지 : 460 쪽
  • ISBN : 9788968481871
  • 물류코드 :2187
TAG :
초급 초중급 중급 중고급 고급
4.7점 (3명)
좋아요 : 31

“Front-End 모던 워크플로를 위한 최신 테크닉을 모두 담았다.”


Gulp는 오늘날 Front-End 개발 환경에 없어서는 안될 필수 도구로 자리 잡았습니다. 하지만 안타깝게도 국내 실무 환경에서는 이런 도구를 활용하는 경우를 찾기가 쉽지 않습니다. 아무래도 명령어 인터페이스 기반 Node.js 환경이 생소하기도 하고, 관련 도서가 많지 않기 때문일 것입니다. 이 책은 Node.js 환경에서 Gulp를 사용하여 Jade, Sass, Susy, CoffeeScript 등을 활용하는 방법을 친절하게 설명합니다. 또한 실무자들이 Front-End 개발 환경을 간접적으로 경험할 수 있도록 모던 워크플로를 활용한 웹사이트 제작 동영상 강의를 제공합니다. 저자는 이 책을 통해 실무자들이 관행적인 작업 방식에서 벗어나 보다 나은 개발 환경을 구성하길 바라며, 작업에 필요한 코드나 자료, 궁금증을 해결할 수 있도록 야무의 GitHub를 공개하고 있습니다.

 

 

 

워크플로 개선을 위한 최신 기술을 모두 담았다!

1장부터 10장까지 Sublime Text, Git&GitHub, CLI, Emmet, Node.js, Gulp, Jade, Sass, Compass, Bourbon, CoffeeScript, Susy에 대해 배우고, 11장에서는 모든 기술을 총망라한 저자의 프론트-엔드(Front-End) 개발 도구인 yamoo9_ProjectKit 사용 방법을 배웁니다. 최신 기술을 익혀 모던 웹사이트 제작을 위한 효율성을 높일 수 있습니다.

 

동영상 강의로 모던 워크플로를 경험한다!
책에서는 공개되지 않은 디자인 시안을 웹 데이터로 옮기는 과정을 포함하여 반응형 웹 디자인을 실제 웹사이트로 완성하는 내용을 담고 있습니다. http://url.yamoo9.net/makingmodernweb에서 동영상 강의를 볼 수 있으며, 책에서 배운 신기능이 실제 프로젝트 중에 어떻게 활용되는지, 얼마나 유용한지 확인할 수 있습니다. 

 

작성한 코드 확인부터 궁금증 해결까지 야무쌤이 도와준다!
새로운 테크닉을 익힐 때 가장 쉽고, 재미있게, 그리고 확실히 배울 수 있는 방법은 직접 따라해 보면서 자신의 것으로 체득하는 것입니다. 책에서 소개하는 모던 테크닉을 직접 따라하다가 궁금증이 생길 때, 작성한 코드가 헷갈릴 때, 언제든 야무쌤에게 도움을 청하세요. http://url.yamoo9.net/modernworkprocess에서는 실습을 위한 각종 자료와 코드를 확인할 수 있고, [ISSUES] 게시판을 통해 야무쌤에게 질문하고 답을 들을 수 있습니다.

 

 

저자

야무(지훈)

웹을 사랑하는 비주얼 디자이너로 웹 표준과 웹 그래픽 관련 강의를 하고 있습니다. 전공인 비주얼 디자인뿐만 아니라 프론트-앤드 프로그래밍에도 관심이 많습니다. 웹 표준 플랫폼 테크닉을 활용하여 UI를 구현하는 것을 즐거워하며, 늘 새롭고 놀라운 것을 익히기를 좋아합니다. 아카데미 정글을 비롯 신한은행, 매일유업, 한국인터넷전문가협회(Kipfa)에서 웹 디자인/표준 강의를 진행했으며 현재는 모노디(monod.co.kr)에서 교육 기획/운영을 하고 있습니다.

홈페이지_ yamoo9.com
커뮤니티_cafe.naver.com/webstandardproject
SNS_ facebook.com/yamoo9

[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 모듈로 압축, 비압축 파일 출력하기 


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

  • 20161214_224735.png

     

  • 한빛리더스 활용서 시즌2 -3

    지난번 3번째 미션에서 리뷰를 너무 늦게 작성해서

    이번에는 빨리 한다고 했는데

    역시나 미션 마지막나레 부랴부라 작성하게 되었네요.

    4번째 미션은 만들면서 배우는 모던 웹사이트 제작으로 선택했습니다.

     

     

    img01.jpg

     

     

    예전에 책의 전작이라 있는 만들면서 배우는 모던 웹사이트 디자인에서 후속작을 기획하고 있다고 해서 많은 기대하고 있었는데

    이제서야 책을 정독하게 되었네요.

     

    책의 저자 야무님의 약력을 보면 재밌는 있는데 디자이너 출신의 개발자라는 거죠^^

     

    그래서인지 전작의 만들면서 배우는 모던 웹사이트 디자인 책도 기존 디자인 서적과 다르게 포토샵 기본 설정이라던가 실무에서 후반 프로그래밍 작업을 염두에 듯한 디자인 서적이라 매우 도움이 되었습니다.

    만들면서 배우는 모던 웹사이트 제작 서적도 읽다 보면 기존 프로그래밍 서적과 다르게 하나의 언어나 저작도구를 설명하는 것이 아니라 개발 실무에 도움이 만한 도구들을 들어 자세히 알려주고 있습니다.

     

    책의 목차를 보게 되면

    1 모던 텍스트 에디터, Sublime Text

    2 프로젝트 버전 관리도구, Git & GitHub

    3 명령어 기반 인터페이스, CLI

    4 초고속 코딩 도구 Emmet

    5 Node.js 환경 구성

    6 업무를 향상시키는 자동화 시스템 Gulp

    7 고성틍 HTML 템플릿 엔진 Jade

    8 강력한 CSS 확장 언어 Sass & Compass, Bourbon

    9 심플한 자바스크립트 컴파일러 GoffeeScript

    10 스마트한 반응형 그리드 시스템 Susy

    11 프론트-엔드 개발 도구 yamoo9_ProjectKit

    으로 되어 있는데, 웹사이트 제작을 필요한 도구들을 하나 하나 들어 설명하는 구조 입니다

     

    img02.jpg

     

    undefined

     

    코딩을 하기 위해서는 여러가지 툴들이 있고, 각자마다 선호하는 프로그램들이 있습니다. 무료툴도 있고 유료 툴도 있는데...

    책은 Sublime Text 3 설치부터 주요 기능을 들어 설명하고 있습니다

     

    img04.jpg

     

    또한 플러그인 설치 안내까지 하고 있어 부족해보이는 기능까지 개선 방안을 안내하고 있습니다. 이런 깨알같은 팁은 선배들에게 한잔은 사줘야 나오는 건데^^ 

     

    그리고 말로만 듣던 Git GitHub 대해 별도의 챕터를 두어 설명하고 있습니다

     

    img05.jpg

     

    프로젝트 버전관리가 너무 힘들었는데... 예를 들면 최종1, 2, 3, 진짜최종, 파이널 ㅠㅠ 파일을 만들 때마다 너무 고생했습니다. 나중에는 뭐가 마지막인지 수가 없어서 일일이 열어보고 확인하거나, 다른 사람에게 공유할 힘드었는데, 다음 프로젝트 때는 활용해 봐야겠습니다.

     

    nodo.js 개념과 설치에 대해 알려주고 있습니다

     

    img06.jpg

     

    Nodo.js 환경을 이해하면 이어서 Gulp.js 배워 자동화 시스템을 구성할 있도록 구성되어 있습니다.

     

    마지막에는 yamoo9_ProjectKit이라는 저자가 제작한 도구를 제공하고 사용방법을 설명하고 있는데, 것만 빼먹어도 완전 이득인 같습니다.

     

    img07.jpg

     

    전반적인 내용을 보면 책의 구성은 하나의 언어나. 로그램을 배우는 책이 아닙니다. 저자가 프로젝트를 진행하기 위한 개발 환경, 일종의 공부잘하는 친구의 책상 셋팅 방법, 요약정리집, 연필, 강조나 정리용 색상펜, 즐겨쓰는 사전 등을 알려주는 공부잘하는 비법이 담긴 책입니다.

     

     

    readers_emblem_250.gif

     

     

  • sublime text
    html로 규격을 만들고, css로 디자인, 색깔, 모양을 만든다.
    단축키 사용에 따라 사용자지정방식을 적용할 수 있다는 강점이 있다.
    한글 인코딩 문서의 편집 문제 해결하기 방법 적용하는법을 알게 되었다.
    프로젝트 버전 관리 도구 Git, GitHub를 사용하게 되면 프로젝트를
    다른 사람과 공유하거나 공동 작업으로 진행할 수 있습니다.
    Gist를 이용해서 편리한 스니펫 버전 관리도 할 수 있습니다.
    Gist가 자주 사용하는 코드 조각을 버전 관리할 수 있는 도구를 의미합니다.
    그리고 CLI환경에서 컴퓨터 명령어를 통해 프로그램을 수행할수도 있습니다.
    프론트-엔드 개발자를 위한 초고속 코딩 도구인 Emmet 도구를 이용해서 개발을
    수행할 수 있습니다.
    HTML 코드 생성, CSS코드 생성도 할 수 있습니다.
    node.js설치하여서 심화 실습을 할 수도 있습니다.
    실무 업무 수행을 향상시키는 자동화 시스템인 Gulp를 배우는 방법을 알게 되었습니다.
    Gulp 플러그인을 활용하여서 파일 결합, 압축, 문법 검사 등을 수행할 수 있습니다.
    작성한 scripts 업무 역할별 분리도 가능하다.
    특정 디렉토리 및 파일 삭제도 가능하다.
    scripts 업무 프로세스와 동일한 css 업무 정의도 할 수 있다.
    gulp-if 모듈로 조건에 따른 업무 처리도 할 수 있다.
    업무 등록, 환경 설정 외부로 분리, 프로젝트 파일 다운로드하여 실행을 할 수 있습니다.
    마지막으로 반응형 웹에 대한 기술에 대해 알게 되었습니다.
    설치, 관리, 수정 등을 수행하면서 반응형 웹에 대한 만드는 것을 수행할 수 있었습니다.
    나름대로 반응형 웹을 만들려면 어떤기술이 필요하고 어떻게 접근할 수 있는지를
    이책을 통해 알게 되었습니다. 전자책 웹디자인 등에 대한 고민들을 이책을 통해 더
    잘 알 수 있어서 유익했습니다.

결재하기
• 문화비 소득공제 가능
• 배송료 : 0원배송료란?

배송료 안내

  • 책, 아이템 등 상품을 3만원 이상 구매시 무료배송
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

리뷰쓰기

닫기
* 도서명 :
만들면서 배우는 모던 웹사이트 제작
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
만들면서 배우는 모던 웹사이트 제작
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
만들면서 배우는 모던 웹사이트 제작
구입처*
구입일*
부가기호*
부가기호 안내

* 회원가입후 도서인증을 하시면 마일리지 500점을 드립니다.

* 한빛 웹사이트에서 구입한 도서는 자동 인증됩니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한됩니다.

* 절판도서, eBook 등 일부 도서는 도서인증이 제한됩니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실