1장: 반응형 웹디자인 살펴보기1.1PC와 모바일의 현실
PC 환경과 해상도의 이해
OS 및 브라우저 점유율
모바일 환경과 해상도의 이해
모바일 OS 및 브라우저 점유율
HTML5 지원 브라우저 현황
1.2반응형 웹디자인이란?
1.3반응형 웹디자인의 예
해외사례
국내사례
1.4반응형 웹디자인의 3가지 핵심 기법
Fluid Grids
Flexible Image
Media Queries
1.5반응형 웹디자인의 단점
미디어 쿼리를 지원하지 않는 브라우저
필요없는 코드, 이미지의 비합리적인 사용
2장: 퍼센트와 CSS3를 이용하자2.1픽셀, 퍼센트, 이엠 단위
2.2뷰포트(viewport)
2.3CSS3
시각효과
폰트사용
트랜지셔널(Transitional)
CSS3 벤더 프리픽스
CSS3에서 추가된 대표 기능
border-radius
미리보기
text-shadow
box-shadow
multiple background images
opacity
RGBA
Gradient
2.4HTML5, CSS3의 브라우저 호환성
HTML5, CSS3 호환성 통계
Reset CSS
Reset CSS의 의미
에릭 마이어의 Reset CSS 2.0
HTML5 Doctor CSS Reset
Yahoo! (YUI 3) Reset CSS
Universal Selector '*' Reset
Normailze CSS 1.0
Naver.com Reset CSS
Daum.net Reset CSS
Nate.com Reset CSS
UhBee Reset CSS
3장: 반응형 웹디자인 기획부터 시작이다3.1반응형 웹디자인 기획 방법
IA(Information Architecture) 설계
UI(User Interface) 설계
UI(User Interface) 디자인기획
3.2반응형 웹디자인 패턴스타일
Mostly Fluid
레이아웃
디자인 예시
실무 소스로 살펴보기
Column Drop
레이아웃
디자인 예시
실무 소스로 살펴보기
Shifter
레이아웃
디자인 예시
실무 소스로 살펴보기
Tiny
레이아웃
디자인 예시
실무 소스로 살펴보기
Off Canvas
레이아웃
디자인 예시
실무 소스로 살펴보기
4장: 실무! 반응형 웹디자인 사이트 함께 만들어 보기4.1디자인 살펴보기
디자인 파악하기
4.2레이아웃 만들기
레이아웃 파악하기
기본 HTML 설정하기
meta태그, 아이콘, 파비콘 설정
웹폰트 설정
모바일 웹일 때 주소창 사라지게 설정
기본 HTML 설정 완료
HTML로 만들어보는 레이아웃
CSS로 만들어보는 레이아웃
Reset CSS, Layout 최종 완성
레이아웃 제작 실무 노하우
4.3반응형 웹으로 레이아웃 제작하기
디자인 파악하기
미디어 쿼리를 활용한 반응형 웹디자인 기초 설정
#wrap 영역 설정
#header 영역 설정
#main 영역 설정
#contents 영역 설정
#foot 영역 설정
미디어 쿼리 설정 완성 및 확인하기
4.4PC버전 마크업 하기
헤더 완성하기
디자인 파악하기
H1 로고 만들기
내비게이션 만들기
CSS3 활용 - nth-child, nth-last-child 구조적 가상 클래스 배우기
전화걸기 만들기
Follow 썸네일 만들기(고정영역 썸네일 목록)
뉴스 목록 만들기
블로그 최근 게시물 만들기
헤더 완성 확인하기
4.5메인/푸터 완성하기
디자인 파악하기
이미지 배너와 검색창 영역
가변적인 검색창 배우기
max-width 배우기
어비 폰트 목록 만들기
주가정보 만들기
유튜브 만들기
HTML5 활용 ? video, audio 배우기
콘텐츠 목록 만들기
푸터 만들기
전체 코딩 소스 확인하기
1200픽셀 이하의 해상도에서 최적화하기
4.6반응형 웹디자인으로 완성하기
1200픽셀 이하의 해상도에서 최적화 하기
1024픽셀 이하의 해상도에서 최적화 하기
768픽셀 이하의 해상도에서 최적화 하기
600픽셀 이하의 해상도에서 최적화 하기
480픽셀 이하의 해상도에서 최적화 하기
4.7최종 완성 및 확인하기
전체 소스보기
모든 브라우저에서 테스트해보기
5장: 실무 2탄! HTML5 보일러플레이트를 활용한 반응형 웹디자인 사이트 함께 만들어 보기5.1HTML5 보일러플레이트란?
HTML5 보일러플레이트란
HTML5 보일러플레이트 활용법
국내 사용자를 위한 어비의 HTML5 보일러플레이트
5.2디자인 살펴보기
디자인 파악하기
5.3레이아웃 만들기
레이아웃 파악하기
어비의 HTML5 보일러플레이트 준비하기
HTML로 만들어보는 레이아웃
CSS로 만드는 레이아웃
반응형 웹 레이아웃으로 만들기
5.4PC 버전용 코드 완성하기
배경/헤더/떠 있는 배너 완성하기
메인 배너 부분 완성하기
콘텐츠 부분 완성하기
푸터 완성하기
5.5반응형 웹디자인으로 완성하기
480px 해상도에서 최적화하기
5.6최종 완성 및 확인
전체 소스
6장: 실무 팁 & 테크 모음 6.1반응형 웹디자인 사이트 테스팅하기
사이트에 접속해서 확인하기
Mattkersley.com
Reponsinator.com
Screenqueri.es
Firefox 부가기능을 이용하여 테스팅하기
Web Developer - Responsive Layouts
Firebug
User Agent Switcher
6.2반응형 웹에 활용 가능한 HTML5 애니메이션 툴
어도비 엣지 애니메이트
구글 웹디자이너
별책부록(동영상 강의) 모바일 웹, 반응형 웹 실무 노하우 살펴보기
Adobe Edge Animate를 활용한 스마트 웹/모바일 만들기
반응형 웹디자인 제작을 위한 실무 노하우를 알려드립니다!이 책은 반응형 웹디자인을 제작하는 기획, 디자인, 개발의 실무 노하우를 담은 책입니다. 실무에 도움되는 유용한 설명과 예제를 통해 초보자부터 고급 독자가 모두 쉽고 빠르게 이해할 수 있게 도와줍니다. 데스크톱 웹사이트를 비롯해 태블릿 웹사이트, 모바일 웹사이트 제작까지, 이제는 반응형 웹디자인으로 한 번에 모든 고민을 해결해 보세요. 모든 디바이스에서 최적화할 수 있는 노하우를 단계별 과정을 통해 하나씩 자세히 소개합니다.
또한 저자가 직접 강의한 동영상 강좌를 직접 들을 수 있습니다. 아래 소개한 링크를 클릭하거나 책과 함께 제공하는 도서 앱을 내려받으면 저자분의 강의를 들을 수 있습니다.
1. 도서앱
QR 코드를 스캔해서 도서 앱을 내려받으면 책에서 설명한 웹사이트를 확인하거나 동영상 강좌를 들을 수 있습니다.
2. 아래 링크에서 직접 동영상 강좌를 들을 수도 있습니다
모바일 웹, 반응형 웹 실무 노하우 살펴보기 1-1 :
http://youtu.be/0iLCsQRgQPE
모바일 웹, 반응형 웹 실무 노하우 살펴보기 1-2 :
http://youtu.be/eD_AORjf9Wo
모바일 웹, 반응형 웹 실무 노하우 살펴보기 1-3 :
http://youtu.be/qqFNrMMBrJ4
Adobe Edge Animate를 활용한 스마트 웹/모바일 만들기:
http://youtu.be/6lPr39xJqRQ
총 
바보 빅터
