Do it! 프런트엔드 웹 디자인 입문 HTML5, CSS3, jQuery로 시작하는

HTML5 CSS3 jQuery 웹 표준 코딩으로 시작하는

고경희 지음

이지스퍼블리싱 2016년 06월 21일 출간 종이책 : 2015년 10월 07일 출간

작품소개

책소개

잘나가는 웹 에이전시 선배들에게서 배울 수 있는 최신 웹 디자인 기법 총정리!

웹 퍼블리셔 & 웹 기획자 & 웹 디자이너의 필수 코스를 다룬 이 책은 “이렇게 생긴 웹사이트 UI는 뭐라고 부르나요?”라는 궁금증이 생겨도 대답해줄 사람이 없는 독자들을 위해 알기쉽게 소개한다. [프런트엔드 웹 디자인 입문]은 유명 웹 에이전시에서 열에 아홉은 사용한다는 반응형 웹, 부트스트랩, 카드 UI, 풀 스크린 배경, 패럴랙스 스크롤링, 구글 웹 폰트까지 최신의 웹 디자인 기법만을 골라 담았다. 웹사이트의 디자인을 어떻게 시작해야 할지 막막했던 초보자부터 웹 디자인 트렌드를 파악하는 데 어려움을 느꼈던 실무자까지 유용한 정보를 제공한다.

목차

첫째마당.
프런트엔드 웹 디자인, 눈으로 살펴보기

01장 다양한 화면 크기에 최적화하다! - 반응형 웹
01-1 반응형 웹이란-
01-2 반응형 웹 디자인 패턴
01-3 반응형 웹을 구현하는 여러 가지 방법
01-4 반응형 웹을 만드는 프레임워크 - 부트스트랩

02장 입체에서 평면으로! - 플랫 디자인&카드 UI
02-1 불필요한 요소는 최소화하다! - 플랫 디자인
02-2 플랫 디자인을 돋보이게 만드는 요소 - 고스트 버튼
02-3 콘텐츠에 집중하다! - 카드 UI

03장 큰 화면으로 방문자 시선 사로잡기! - 풀 스크린 배경
03-1 풀 스크린 배경이란-
03-2 이미지로 만드는 풀 스크린 배경
03-3 동영상으로 만드는 풀 스크린 배경

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

05장 웹 타이포그래피를 받쳐주는 기술 - 웹 폰트
05-1 웹과 타이포그래피
05-2 이제는 웹 폰트를 쓰자!
05-3 누구나 쉽게 사용할 수 있다! - 구글 웹 폰트

둘째마당.
프런트엔드 웹 디자인, 키보드 잡고 따라하기

06장 반응형 웹 사이트 만들기
06-1 반응형 웹을 만드는 기본 구성 요소 1 - 가변 그리드
06-2 반응형 웹을 만드는 기본 구성 요소 2 - 미디어 쿼리
06-3 반응형 웹을 만드는 기본 구성 요소 3 - 가변 이미지와 가변 동영상

07장 부트스트랩 프레임워크 사용하기
07-1 부트스트랩 시작하기
07-2 부트스트랩의 기본 - 미디어 쿼리와 그리드 시스템
07-3 다양한 요소를 위한 CSS
07-4 내비게이션과 컴포넌트
07-5 자바스크립트 요소들
07-6 부트스트랩으로 만드는 반응형 웹 사이트

08장 플랫 디자인 사이트와 카드 UI 만들기
08-1 코딩으로 플랫 디자인 사이트 만들기
08-2 투명한 고스트 버튼 만들기
08-3 카드 UI 만들기

09장 풀 스크린 배경 사이트 만들기
09-1 이미지 풀 스크린 배경 직접 만들어보기
09-2 동영상 풀 스크린 배경 직접 만들어보기

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

11장 다양한 웹 폰트 사용하기
11-1 웹 폰트를 사용하기 전 기억해야 할 것 - 폰트 표시 단위
11-2 CSS를 이용한 웹 폰트 사용 방법
11-3 구글 웹 폰트 사용하기
11-4 워드프레스 사이트를 한글 웹 폰트로 변경하기

셋째마당.
프런트엔드 웹 디자인,
이 사이트는 어떻게 활용했을까?

12장 웹 사이트의 소스를 들여다보기 전에
참고용으로만 사용하세요
웹 브라우저의 개발자 도구를 사용하는 방법
웹 사이트를 살펴볼 때 도움이 되는 확장 프로그램
크롬 확장 프로그램 설치하는 법
왓폰트(WhatFont)
반응형 웹 디자인 테스터(Responsive Web Design Tester)

13장 미디어 쿼리와 구글 웹 폰트를 활용한 사이트
활용 1 - 미디어 쿼리를 이용한 반응형 웹 디자인
화면 구성 요소 살펴보기
미디어 쿼리 소스 살짝 들여다보기
활용 2 - 구글 웹 폰트

14장 패럴랙스 스크롤링을 활용한 사이트
활용 1 - 패럴랙스 스크롤링
Stellar.js 플러그인
화면 구성 요소 살펴보기
플러그인 소스 들여다보기
플러그인을 실행하기 위한 소스 들여다보기

15장 풀 스크린 배경과 빅 타이포그래피, 카드 UI를 활용한 사이트
활용 1 - 풀 스크린 배경
화면 구성 요소 살펴보기
첫 번째 슬라이드 화면의 소스 들여다보기
두 번째 슬라이드 화면의 소스 들여다보기
활용 2 - 빅 타이포그래피
웹 폰트로 표시하는 빅 타이포그래피
활용 3 - 카드 UI

출판사 서평

코딩으로 만드는 웹 디자인, 이제는 선택이 아닌 필수다!
HTML5 ㆍ CSS3 ㆍ jQuery로 웹 디자인 트렌드를 따라잡는 비법 대공개!
그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 코딩을 이용한 웹 디자인이다. 이 책은 HTML과 CSS에 대한 기초적인 내용만 알고 있다면 누구든 쉽게 코딩으로 여러 기기에 대응할 수 있는 웹 디자인을 만들 수 있도록 기획되었다. jQuery를 몰라도 된다. jQuery 플러그인을 가져다 사용할 수 있는 방법을 소스 한 줄 한 줄 자세하고 친절하게 설명해 놓았으니까!

여기저기 흩어져있는 웹 디자인 정보를 짜깁기하는 것은 이제 그만!
취업용 포트폴리오에 바로 써먹을 수 있는 실전 웹 디자인 예제 수록!
이 책만 있다면 인터넷에서 웹 디자인 정보를 찾느라 더 이상 시간을 낭비하지 않아도 된다. 단순히 웹 디자인 기법에 대한 정보를 번역해서 나열해놓은 책이 아니다. 2014 국립 중앙 도서관 IT 분야 대출 1위 도서인 《Do it! HTML5+CSS3 웹 표준의 정석》의 저자가 엄선하여 수록한 100여 개의 웹 디자인 예제는 취업용 포트폴리오에 바로 사용해도 될 만큼 완성도가 높다. 책에서 제공하는 다양한 예시 사이트와 풍부한 스크린 샷까지 살펴보면 면접에 대비하기 위한 확실한 자신감도 얻을 수 있을 것이다.

최신 웹 디자인 6대 기술의 이론, 실습, 실제 공개되어 있는 웹사이트의 소스 코드 분석까지!
첫째마당 - 웹 디자인을 한다면 꼭 알아야 할 최신 웹 디자인 기술을 빠르게 정리한다. 웹 디자인 트렌드를 소개하는 잡지를 읽는 기분으로 가볍게 읽어볼 수 있다.
둘째마당 - 첫째마당에서 살펴본 기술들을 직접 실습한다. 이 과정에서 jQuery를 잘 모르더라도 jQuery 플러그인을 가져다 사용하는 방법을 알려준다.
셋째마당 - 이미 공개된 사이트들을 살펴보면서 총정리 한다. 어떤 기법과 소스들이 사용되었는지 하나씩 알아보고 실전 능력을 키울 수 있다.

이 책 한 권이면 독학으로 프로페셔널이 될 수 있다!
웹 디자인 초보자도 상관없다. 누구도 속 시원히 알려주지 않았던 최신 웹 디자인 6대 기술을 누구나 쉽게 배울 수 있도록 개념부터 차근차근 설명하면서 실습과 심화 단계까지 알차게 구성하였다. 또한 웹 디자인 기법에 사용되는 수많은 플러그인 중 가장 많이 사용되는 것들만 모아 사용법부터 세부적인 옵션까지 꼼꼼히 알려준다. 실제 공개된 사이트의 소스를 분석해보는 과정까지 거치고 나면 어떤 웹 디자인이라도 능숙하게 다룰 수 있는 실전 능력을 갖추게 될 것이다.

끊임없이 발전하는 웹 디자인 트렌드! 저자의 페이스북, 카페에서 도움 받기
웹 디자인 기법들은 계속해서 변화한다. 그래서 웹 분야 종사자들은 항상 공부할 수밖에 없다. 저자의 카페(cafe.naver.com/doithtml5)와 페이스북 페이지(facebook.com/do.it.html5)에서 웹 디자인 트렌드에 대한 더 많은 정보와 자료들이 업데이트될 예정이니 그 곳에서 도움을 받아 보자! 뿐만 아니라 저자가 운영하는 카페의 질문답변 게시판에 궁금한 내용을 올리면 저자의 답변을 직접 받을 수 있다.

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

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

그동안 웹사이트 디자인에 대해 막연히 생각만 하고 어떻게 구현해야 할지 막막했는데, 이 책에서 코드를 한 줄 한 줄 자세히 설명해 주는 점이 정말 친절해

작가정보

저자(글) 고경희

저자 : 고경희
저자 고경희는 국내 저자로는 처음으로 HTML5 버전을 소개한 도서인 《Do it! HTML5+CSS3》를 출간하였으며, HTML5와 CSS3의 모든 태그를 집대성하여 출간한 《Do it! HTML5+CSS3 웹 표준의 정석》은 HTML 분야 도서 1위로, 2014년, 국립 중앙 도서관에서 가장 많이 대출이 된 IT 분야 도서이다.
드림위버 1.2 시절부터 웹에 관심을 갖기 시작하여 이후 HTML과 DHTML(Dynamic HTML), CSS, 자바스크립트 등 웹 관련 기술들을 활용하는 데 관심을 두고 웹 디자인 및 프로그래밍 분야에 걸쳐 여러 권의 관련 서적을 집필했다.
이번 책, 《Do it! 프런트엔드 웹 디자인 입문》에서는 멀티 디바이스 시대에 따른 웹 디자인의 변화를 ‘HTML5, CSS3, jQuery’라는 주제로 누구나 이해하기 쉽게 풀어냈다.
한국디지털대학교, 한국전자정보통신산업진흥회 등에서도 강의를 진행했으며, 마이크로소프트 공인 최고기술전문가(Most Valuable Professional)와 마이크로소프트 HTML5 정보를 제공하는 UserAgents에서 웹 전문가로 활동 중이다.
홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부했다.

저서
《Do it! HTML5+CSS3 ? 단기완성》
《Do it! HTML5+CSS3 웹 표준의 정석》
《드림위버 CS6 무작정 따라하기》 등 30여종