추가 적립 안내

웹 디자인 분야 베스트셀러! 전면 개정판으로 돌아오다!
최신 웹 디자인 트렌드를 반영한 6대 기술을 담았다!

‘웹 사이트 이 기능은 도대체 어떻게 만들지?’ 당신이 만들고 싶은 그 기능, 더 이상 인터넷 검색해서 짜깁기하지 말고 이 책을 보자. 유명 웹 에이전시 열에 아홉은 사용한다는 반응형 웹, 패럴렉스 스크롤링, 풀 스크린 배경, 구글 웹 폰트, 플렉스 박스, 부트스트랩까지 당신이 꼭 알아야할 웹 디자인 기법만을 골라 담았다. 5년 연속 베스트셀러, <>의 고경희 저자가 국내외 최신 웹 사이트를 분석하고 웹 디자인의 이론과 실습에 가장 알맞은 예제를 엄선하여 내용을 구성했기 때문에 믿을 수 있다. 뭐부터 시작해야할지 모르는 입문자에게는 웹 디자인 개념을 확실하게 잡아주고, 실무자는 원하는 기능만 찾아 바로 써먹을 수 있는 이 책으로 지금 당장 웹 디자인을 시작하자!

웹 퍼블리셔&웹 기획자&웹 디자이너의 필수 코스!
잘 나가는 웹 에이전시 선배들에게나 배울 수 있는 기법을 모아 놓았다.

웹 디자인 전문가가 되기 위한 6대 기술을 마스터 해보자!

- 접속 기기에 따라 레이아웃을 다르게 보여주는 반응형 웹 디자인
- 화면을 스크롤 할 때마다 애니메이션처럼 화면이 바뀌는 패럴렉스 스크롤링
- 이미지나 동영상으로 만드는 풀 스크린 배경
- 어느 기기에서도 동일한 폰트로 정보를 전달하기 위해 사용하는 구글 웹 폰트
- 그리드 레이아웃을 손쉽게 만들 수 있도록 도와주는 플렉스 박스
- 간단하게 반응형 웹을 제작하는 부트스트랩 프레임워크

<> 전면 개정판 무엇이 바뀌었나?

1. 입문자를 위한 이론 부분 강화
프런트엔드 웹 디자인을 이해하기 위한 반응형 웹과 구현방법을 자세하게 설명합니다. 그리고 다양한 웹 디자인 종류들을 소개하고, 최신 사이트에서 많이 쓰는 디자인 요소들을 장별로 나눠 실었습니다.

2. 더 많은 실습과 예제들
초판에서는 실습과 예제를 둘째마당에서만 다뤘지만, 개정판에서는 더 많은 실습과 예제를 모아 둘째마당, 셋째마당에 나눠 담았습니다. 다양해진 실습과 예제로 코딩하면 웹 디자인 기법들을 확실하게 익힐 수 있습니다.

3. 브라우저 웹 개발 도구 창 활용
웹 개발에 필요한 소스를 보거나 리소스, CSS 파일의 확인, 자바스크립트 디버깅 등 다양하게 활용하고 있는 브라우저 웹 개발 도구 창의 사용방법을 실었습니다.

4. 플렉스 박스로 손쉽게 그리드 레이아웃 제작
웹 사이트에서 널리 사용되는 그리드 레이아웃을 간단하게 만들 수 있는 플렉스 박스의 사용법을 실었습니다.

5. 최신 부트스트랩 4.0 반영
개발 경험이 부족해도 쉽게 반응형 웹을 만들 수 있게 해주는 부트스트랩 프레임워크의 최신 버전을 반영했습니다. 또한, 최신 부트스트랩 프레임워크로 실습하여 실제 웹 사이트를 제작해 볼 수 있습니다.

6. 저자 직강 동영상 제공
코딩이 두려운 입문자는 개발 도구 설치부터 실습까지 저자가 제공하는 동영상으로 1:1 과외를 받을 수 있습니다.

입문자는 앞에서부터 차근차근, 실무자는 당장 필요한 기술부터 골라서 공부하자!

HTML5, CSS3의 기본 지식은 가지고 있지만, 웹 디자인은 처음인 입문자는 이론이 실린 첫째마당부터 공부해 보세요. 이해하기 어려운 용어는 배제하고 입문자의 눈높이에서 맞춰 쉬운 말로 풀어서 설명했습니다.
웹 디자인을 해본 경력자들은 바로 필요한 기술의 실습부터 시작해 보세요. 둘째마당, 셋째마당은 반응형 웹을 위한 레이아웃 제작부터 방문자의 눈길을 사로잡는 웹 요소를 직접 제작해 보는 실습까지 담겨 있습니다. 마지막으로 넷째마당에서는 앞에서 실습해 본 여러 웹 디자인 요소들을 활용하여 직접 최신 웹 사이트를 제작해 봅니다.

웹 디자인 코딩, 웹 분야 전문가와 함께라면 더 이상 겁먹을 필요 없다!

이 책의 저자는 2017년 웹 분야 1위 <>의 저자입니다.
웹 분야 전문가인 저자가 입문자의 눈높이에 맞춰 웹 디자인 기법을 익히기에 가장 적합한 실습과 예제 60여 개를 선택했습니다. 또한, 아직 코딩이 두려운 입문자를 위해 이 책의 모든 실습은 코드를 조금씩 나눠서 차근차근 만들도록 구성했습니다. 그리고 실습 코드 내용을 완벽하게 이해할 수 있도록 한 줄의 코드도 허투루 지나치지 않고 꼼꼼하게 설명했습니다. 혼자서 공부하는 독자들을 위해 저자가 직접 제공하는 동영상도 만나보세요.

맞춤형 진도표 제공 - 흔들리지 말고 이대로 공부하라!

이 책은 초급자와 중급자를 위한 맞춤형 학습 진도표를 제공합니다. 이제 막 웹 디자인을 공부하기 시작했다면 15일 완성 진도표를, 웹 디자인을 해 본 경험이 있다면 10일 완성 진도표로 공부할 수 있습니다. 자신에게 맞는 진도표로 공부하다 보면 어느새 멋진 웹 사이트를 완성할 수 있습니다.

공부하다 어려움에 부딪히면 혼자 끙끙 앓지 말고 물어보자!

혼자 공부하다가 모르는 문제가 나오면 검색으로 시간 낭비하지 말고 바로 저자가 운영하는 네이버 카페(cafe.naver.com/doithtml5)에 질문을 올려보세요. 당신의 질문에 저자가 직접 답변을 해줍니다. 또한, 이 책에서 다루지 못한 내용이나 업그레이드되는 자료는 저자의 네이버 카페와 페이스북(facebook.com/do.it.html5)을 통해서 지속적으로 제공합니다.

함께 공부하고 정보도 공유하자! - Do it! 스터디룸

지금 바로 Do it! 스터디룸 네이버 카페(cafe.naver.com/doitstudyroom)를 방문해 보세요. 함께 공부할 멤버도 찾을 수 있고, 웹 디자인 정보도 공유할 수 있습니다.


※ 책의 실습 파일은 저자의 네이버 카페(cafe.naver.com/doithtml5) 또는 저자의 깃허브(github.com/kyrieko/webd)와 이지스퍼블리싱 홈페이지(www.easyspub.co.kr)에서 회원가입 후 다운로드 받을 수 있습니다.

안인순(안동과학대학교 교수)
“누구도 속 시원히 알려주지 않던 그 기술이 궁금하다면?”

“웹 디자인 트렌드를 이렇게 배우기 쉽게 정리한 책은 처음인 것 같습니다”

대학에서도 웹 디자인 수업은 필수로 가르치고 있습니다. 하지만 웹 디자인 분야를 꿈꾸는 학생들이 초보 딱지를 떼고 실무자로서 일하기 위해서는 HTML5, CSS3만으로는 부족한 것이 현실입니다. 그런 점에서 웹 디자인 트렌드를 배우기 쉽게 정리해서 알려주는 《Do it! 프런트엔드 웹 디자인 입문》의 출간이 정말 반갑고 기쁩니다.
고경희 저자의 이전 책, 《Do it! HTML5+CSS3 웹 표준의 정석》의 명성에 걸맞게 이 책 역시 초보자도 쉽게 프런트엔드 웹 디자인에 입문할 수 있도록 배려하고 있습니다. 특히 이론부터 실습을 거쳐 웹 디자인 트렌드를 반영한 사이트의 소스를 분석해 볼 수 있도록 유도하는 흐름은 이 책의 큰 장점이라고 생각합니다. 웹을 시작하려는 학생들에게도, 웹 디자인 트렌드를 가르치려는 교육 현장에도 정말 유용한 책입니다.

신성철(야놀자 서비스 기획실장)
“웹 디자인 분야 실무 경쟁력을 갖추기 위한 필수 도서”

모두가 Mobile first를 지나 Mobile only를 외치는 시대입니다. 앱으로 몰리고 있죠. 시계를 과거로 돌려보면 PC에 응용프로그램을 설치하여 작업을 수행하고 있는 사람들이 보입니다. 하지만 지금은 어떤가요? SaaS(Softwareas a Service)를 넘어 PaaS(Platform as a Service)까지 이제는 거의 모든 중요한 애플리케이션이 웹으로 서비스됩니다. 모바일에서도 마찬가지입니다. 앱을 통해서만 가능하다고 생각했던 기능은 웹에서도 제한적으로 구현할 수 있습니다. 웹보다 유니버셜(universal)한 것이 있을까요? 그 무엇보다 빠르게 적용하고 눈으로 확인할 수 있으며 그 즉시 사용자에게 전달됩니다. 앱의 미래는 웹입니다. 코딩, UI 개발, 퍼블리싱 등 여러 용어로 불리는 프런트엔드 웹 디자인 기술을 익히는 것은 곧 다가올 미래의 실무 경쟁력을 쌓기 위한 좋은 투자이며 이 책이 바로 그 시작점이 될 것입니다.

김은규(커넥티드에잇 부설연구소 소장)
“다양한 웹 디자인 기법을 저자 특유의 친절함으로 이해하기 쉽게 풀어 쓴 책!”

열정만으로는 안 되던 초보 시절, 아무리 책을 읽어도 어떻게 시작할지 막막하던 때, 정말 좋은 책 한 권으로 엉켜 있던 실타래가 풀리는 경험을 해 보셨는지요. 1998년 제가 웹 개발을 시작할 때나 현재나 관련 분야 전공자가 아닌 상태에서 오직 책과 씨름하며 독학으로 실력을 키워 온 저로서는 좋은 책만큼 체계적인 학습 방법은 없다고 생각합니다. 이 책은 저처럼 웹 디자인에 대한 열정은 가득하나 어떻게 시작해야 할지 모르는 이들에게 마른 사막에 내리는 단비 같은 지식을 줄 것입니다. 누구도 제대로 알려주지 않았던 다양한 웹 기술을 이해하기 쉽게 풀어서 설명하고 있어서 이제 입문하는 웹 디자이너뿐 아니라 웹 퍼블리셔, 웹 개발자 모두에게 충분히 좋은 길잡이가 되어 줄 것입니다.

유영경(㈜엠피알디 대표이사)
“인터넷을 헤매며 최신 웹 디자인 정보를 찾고 있는 사람들의 필독서”

웹 분야 종사자라면 누구든지 웹 디자인의 변화를 포착하기 위해 다양한 채널을 벤치마킹할 것입니다. 이 책은 지금의 트렌드에 걸맞은 ‘프런트엔드’ 웹 디자인 기술에 입문할 수 있도록 책에 나온 기술이 실제 적용된 사이트를 예로 들어 쉽고 명확하게 설명해 주고 있습니다. 현직 웹 디자이너, HTML5 & CSS3 지식은 있으나 최신 웹 디자인 경향에 어두운 분, 또 웹 디자인을 처음 배우지만 HTML5와 CSS3까지 한 번에 배우고 싶은 학생이나 초보자 등 누구나 프런트엔드 웹 디자이너가 될 수 있는 기회를 안겨 줄 것입니다.

김운아(Do it! 반응형 웹 디자인 저자)
“취업용 포트폴리오를 준비하는 초보자에게 이 책을 강력히 추천합니다”

사실 프런트엔드 분야는 여러 분야가 접목되어 있어 접근하기가 쉽지 않습니다. 하지만 《Do it! 프런트엔드 웹 디자인 입문》은 누구라도 쉽게 예제를 따라 할 수 있습니다.
웹 업계에 종사하는 사람은 이 책에서 최신 웹 기술을 접할 수 있어 웹 업계의 동향을 파악할 수 있을 뿐만 아니라 자신의 기술을 향상시키는 계기가 될 것입니다. 특히 꼼꼼하게 짜인 둘째마당의 실습을 차근차근 따라해 보면, 최신 트렌드를 반영한 취업용 포트폴리오를 준비하는 데 큰 도움이 될 것입니다.

배영(멀티미디어공학과 4학년)
HTML과 CSS에 대한 기초 지식만 있다면 충분히 혼자 따라할 수 있는 웹 디자인 예제들이 풍부했어요! 스스로 웹사이트를 분석할 수 있는 힘을 길러주는 책입니다.

신지연(멀티미디어공학과 4학년)
개념부터 차근차근 설명하면서 실습과 심화 단계까지 알차게 구성되어 있습니다. 무엇보다 설명에 맞는 디자인과 다양한 웹사이트를 예시로 보여줘서 이해도 쉽고 재미있었어요!

강석원(컴퓨터공학과 2학년)
그동안 웹사이트 디자인에 대해 막연히 생각만 하고 어떻게 구현해야 할지 막막했는데, 이 책에서 코드를 한 줄 한 줄 자세히 설명해 주는 점이 정말 친절해서 좋았어요!

첫째마당 최신 웹 디자인 트렌드 살펴보기

01장 다양한 화면 크기에 최적화하다! - 반응형 웹
01-1 반응형 웹이란?
01-2 반응형 웹은 만능일까?
01-3 반응형 웹 디자인 패턴
01-4 반응형 웹을 만드는 여러 가지 방법

02장 입체에서 평면으로! - 플랫 디자인
02-1 불필요한 요소는 최소화하다! - 플랫 디자인
02-2 플랫 디자인, 이렇게 만들어야 한다!
02-3 구글의 디자인 철학 - 머티리얼 디자인
02-4 콘텐츠에 집중하다! - 카드형 디자인

03장 반응형 웹에 어울리는 그리드 레이아웃 디자인
03-1 그리드 시스템
03-2 그리드 레이아웃을 만드는 방법 4가지

04장 클릭보다 스크롤로! - 원 페이지 사이트
04-1 한 페이지에 모든 내용을 담다! - 원 페이지 사이트
04-2 동적인 효과로 강한 인상을 준다! - 패럴랙스 스크롤링

05장 풀 스크린 배경과 캐러셀
05-1 풀 스크린 배경
05-2 이미지로 만드는 풀 스크린 배경
05-3 동영상으로 만드는 풀 스크린 배경
05-4 풀 스크린 배경에 어울리는 고스트 버튼
05-5 여러 가지 중용한 정보를 슬라이드로 보여준다! - 캐러셀

06장 웹의 기본은 텍스트 - 타이포그래피
06-1 웹과 타이포그래피
06-2 빅 타이포그래피
06-3 웹 폰트
06-4 무료로 사용하는 구글 웹 폰트


둘째마당. 반응형 웹을 위한 레이아웃 제작하기

07장 화면 크기에 반응하는 미디어 쿼리
07-1 뷰포트와 미디어 쿼리 알아보기
07-2 미디어 쿼리 사용하기
07-3 가변 이미지
07-4 가변 동영상

08장 원 페이지 사이트와 패럴랙스 스크롤링 효과 만들기
08-1 원 페이지 사이트 만들기
08-2 패럴랙스 스크롤링 효과 만들기

09장 그리드 레이아웃 제작하기
09-1 다단 칼럼을 사용해 그리드 레이아웃 만들기
09-2 jQuery 플러그인을 사용해 그리드 레이아웃 만들기
09-3 플렉스 박스 사용하기

10장 풀 스크린 랜딩 페이지 만들기
10-1 풀 스크린 배경 이미지 직접 만들기
10-2 풀 스크린 배경 동영상 직접 만들기

셋째마당 방문자의 눈길을 사로잡는 웹 요소 제작하기

11장 하나씩 회전하며 보여주기 - 캐러셀
11-1 캐러셀이란?
11-2 캡션, 비디오, 반응형 등 다향한 옵션 설정이 가능한 bxSlider 플러그인
11-3 한 화면에 여러 개의 이미지를 보여줄 수 있는 Owl Carousel 플러그인
11-4 그 밖의 캐러셀 플러그인

12장 코드로 만든 이미지 - SVG 이미지
12-1 SVG 이미지란?
12-2 SVG 이미지 사용하기

13장 다양한 웹 폰트 사용하기
13-1 웹 폰트 표시 단위
13-2 CSS로 웹 폰트 사용하기
13-3 구글 웹 폰트 사용하기

넷째마당 내가 직접 만드는 최신 웹 사이트

14장 웹 사이트 분석해 보기
14-1 웹 사이트의 소스를 들여다보기 전에
14-2 웹 개발에 도움이 되는 확장 프로그램
14-3 웹 사이트 들여다보기

15장 플렉스 박스를 사용해 웹 사이트 만들기
15-1 웹 사이트 구상하기
15-2 캐러셀 삽입하기
15-3 플렉스 박스 사용하기

16장 부트스트랩을 사용해 웹 사이트 만들기
16-1 부트스트랩 시작하기
16-2 미디어 쿼리와 그리드 시스템
16-3 버튼과 내비게이션 바