DO IT 프런트엔드 웹 디자인 입문
책 소개
▣ 출판사서평
코딩으로 만드는 웹 디자인, 이제는 선택이 아닌 필수다!
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)에서 웹 디자인 트렌드에 대한 더 많은 정보와 자료들이 업데이트될 예정이니 그 곳에서 도움을 받아 보자! 뿐만 아니라 저자가 운영하는 카페의 질문답변 게시판에 궁금한 내용을 올리면 저자의 답변을 직접 받을 수 있다.
▣ 작가 소개
저자 : 고경희
국내 저자로는 처음으로 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에서 웹 전문가로 활동 중이다.
홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부했다.
▣ 주요 목차
첫째마당.
프런트엔드 웹 디자인, 눈으로 살펴보기
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)에서 웹 디자인 트렌드에 대한 더 많은 정보와 자료들이 업데이트될 예정이니 그 곳에서 도움을 받아 보자! 뿐만 아니라 저자가 운영하는 카페의 질문답변 게시판에 궁금한 내용을 올리면 저자의 답변을 직접 받을 수 있다.
▣ 작가 소개
저자 : 고경희
국내 저자로는 처음으로 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에서 웹 전문가로 활동 중이다.
홍익대학교 컴퓨터공학과를 졸업하고 동 대학원에서 인공지능을 공부했다.
▣ 주요 목차
첫째마당.
프런트엔드 웹 디자인, 눈으로 살펴보기
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
01. 반품기한
- 단순 변심인 경우 : 상품 수령 후 7일 이내 신청
- 상품 불량/오배송인 경우 : 상품 수령 후 3개월 이내, 혹은 그 사실을 알게 된 이후 30일 이내 반품 신청 가능
02. 반품 배송비
| 반품사유 | 반품 배송비 부담자 |
|---|---|
| 단순변심 | 고객 부담이며, 최초 배송비를 포함해 왕복 배송비가 발생합니다. 또한, 도서/산간지역이거나 설치 상품을 반품하는 경우에는 배송비가 추가될 수 있습니다. |
| 고객 부담이 아닙니다. |
03. 배송상태에 따른 환불안내
| 진행 상태 | 결제완료 | 상품준비중 | 배송지시/배송중/배송완료 |
|---|---|---|---|
| 어떤 상태 | 주문 내역 확인 전 | 상품 발송 준비 중 | 상품이 택배사로 이미 발송 됨 |
| 환불 | 즉시환불 | 구매취소 의사전달 → 발송중지 → 환불 | 반품회수 → 반품상품 확인 → 환불 |
04. 취소방법
- 결제완료 또는 배송상품은 1:1 문의에 취소신청해 주셔야 합니다.
- 특정 상품의 경우 취소 수수료가 부과될 수 있습니다.
05. 환불시점
| 결제수단 | 환불시점 | 환불방법 |
|---|---|---|
| 신용카드 | 취소완료 후, 3~5일 내 카드사 승인취소(영업일 기준) | 신용카드 승인취소 |
| 계좌이체 |
실시간 계좌이체 또는 무통장입금 취소완료 후, 입력하신 환불계좌로 1~2일 내 환불금액 입금(영업일 기준) |
계좌입금 |
| 휴대폰 결제 |
당일 구매내역 취소시 취소 완료 후, 6시간 이내 승인취소 전월 구매내역 취소시 취소 완료 후, 1~2일 내 환불계좌로 입금(영업일 기준) |
당일취소 : 휴대폰 결제 승인취소 익월취소 : 계좌입금 |
| 포인트 | 취소 완료 후, 당일 포인트 적립 | 환불 포인트 적립 |
06. 취소반품 불가 사유
- 단순변심으로 인한 반품 시, 배송 완료 후 7일이 지나면 취소/반품 신청이 접수되지 않습니다.
- 주문/제작 상품의 경우, 상품의 제작이 이미 진행된 경우에는 취소가 불가합니다.
- 구성품을 분실하였거나 취급 부주의로 인한 파손/고장/오염된 경우에는 취소/반품이 제한됩니다.
- 제조사의 사정 (신모델 출시 등) 및 부품 가격변동 등에 의해 가격이 변동될 수 있으며, 이로 인한 반품 및 가격보상은 불가합니다.
- 뷰티 상품 이용 시 트러블(알러지, 붉은 반점, 가려움, 따가움)이 발생하는 경우 진료 확인서 및 소견서 등을 증빙하면 환불이 가능하지만 이 경우, 제반 비용은 고객님께서 부담하셔야 합니다.
- 각 상품별로 아래와 같은 사유로 취소/반품이 제한 될 수 있습니다.
| 상품군 | 취소/반품 불가사유 |
|---|---|
| 의류/잡화/수입명품 | 상품의 택(TAG) 제거/라벨 및 상품 훼손으로 상품의 가치가 현저히 감소된 경우 |
| 계절상품/식품/화장품 | 고객님의 사용, 시간경과, 일부 소비에 의하여 상품의 가치가 현저히 감소한 경우 |
| 가전/설치상품 | 전자제품 특성 상, 정품 스티커가 제거되었거나 설치 또는 사용 이후에 단순변심인 경우, 액정화면이 부착된 상품의 전원을 켠 경우 (상품불량으로 인한 교환/반품은 AS센터의 불량 판정을 받아야 합니다.) |
| 자동차용품 | 상품을 개봉하여 장착한 이후 단순변심의 경우 |
| CD/DVD/GAME/BOOK등 | 복제가 가능한 상품의 포장 등을 훼손한 경우 |
| 상품의 시리얼 넘버 유출로 내장된 소프트웨어의 가치가 감소한 경우 | |
| 노트북, 테스크탑 PC 등 | 홀로그램 등을 분리, 분실, 훼손하여 상품의 가치가 현저히 감소하여 재판매가 불가할 경우 |