[POD] 어비의 반응형 웹디자인 : 초고(First Draft)

0장 반응형 웹디자인 출판 기획서
1) 출판 기획서의 목적
2) 반응형 웹디자인 출판 기획서 원본

머리말
저자소개

1장 반응형 웹디자인 살펴보기
1) PC와 모바일의 현실
1- PC 환경과 해상도의 이해
2- 모바일 환경과 해상도의 이해
2) 반응형 웹디자인이란?
3) 반응형 웹디자인의 예
1- 해외사례
2- 국내사례
4) 반응형 웹디자인의 3가지 중요점
1- Fluid Grid
2- Flexible Image
3- Media Queries
5) 반응형 웹디자인의 단점
1- 미디어 쿼리 미지원 브라우저
2- 필요없는 코드, 이미지의 비합리적인 사용

2장 퍼센트와 CSS3를 이용하자
1) Pixel, Percent, Em
2) CSS3
1- CSS3 벤더 프리픽스
2- CSS3에서 추가된 대표 기능
가- border-radius
나- text-shadow
다- box-shadow
라- multiple background images
마- opacity
바- RGBA
사- Gradient
3) HTML5, CSS3의 브라우저 호환성
1- HTML5, CSS3 호환성 통계
2- Reset CSS
가- Reset CSS의 의미
나- Eric Meyer’s Reset CSS2.0
다- HTML5 Doctor CSS Reset
라- Yahoo! (YUI 3) Reset CSS
마- Universal Selector ‘*’ Reset
바- Normailze CSS1.0
사- Naver.com Reset CSS
아- Daum.net Reset CSS
자- Nate.com Reset CSS
차- UhBee Reset CSS

3장 반응형 웹디자인 기획부터 시작이다
1) 반응형 웹디자인 기획 방법
1- IA 설계
2- UI 설계
3- UI 디자인 기획
2) 반응형 웹디자인 패턴스타일
1- Mostly Fluid
가- 레이아웃
나- 디자인예시
다- 실무 소스로 살펴보기
2- Column Drop
가- 레이아웃
나- 디자인 예시
다- 실무 소스로 살펴보기
3- Shifter
가- 레이아웃
나- 디자인 예시
다- 실무 소스로 살펴보기
4- Tiny
가- 레이아웃
나- 디자인 예시
다- 실무 소스로 살펴보기
5- Off Canvas
가- 레이아웃
나- 디자인 예시
다- 실무 소스로 살펴보기

4장 실무! 반응형 웹디자인 사이트 함께 만들어 보기
1) 디자인 살펴보기
1- 디자인 파악하기
2) 레이아웃 만들기
1- 레이아웃 파악하기
2- 기본 html 세팅하기
가- meta태그, 아이콘, 파비콘 설정
나- 웹폰트 설정
다- 모바일 웹일 경우 주소창 사라지기 설정
라- 기본 HTML 세팅 완료
3- HTML로 만들어보는 레이아웃
4- CSS로 만들어보는 레이아웃
5- 최종 완성 Reset CSS, Layou
6- 레이아웃 제작시 실무 노하우
3) 반응형 웹 으로 레이아웃 만들어 놓기
1- 디자인 파악하기
2- 미디어 쿼리를 활용한 반응형 웹 디자인 기초 설정
가- #wrap 영역 설정
나- #header 영역 설정
다- #main 영역 설정
라- #contents 영역 설정
마- #footer 영역 설정
바- 미디어 쿼리 설정 완성 및 확인하기
4) PC버전 마크업 하기
1- 헤더 완성하기
가- 디자인 파악하기
나- H1 로고 만들기
다- 네비게이션 만들기
a- CSS3활용 - nth-child, nth-last-child
가상클래스 배우기
라- 전화걸기 만들기
마- Follow 썸네일 만들기(고정영역 썸네일 리스트)
바- 뉴스 리스트 만들기
a- CSS3활용 - display:box, line-clamp 배우기
사- 블로그 최근 게시물 만들기
아- 헤더 완성 확인하기
2- 메인/푸터 완성하기
가- 디자인 파악하기
나- 이미지 배너와 검색창 영역
a- 가변적인 검색창 배우기
b- max-width 배우기
다- 어비 폰트 리스트 만들기
라- 주가정보 만들기
a- table, colgroup qodnrl
마- 유튜브 만들기
a- Html5 활용 ? video, audio 배우기
바- 컨텐츠 리스트 만들기
사- 푸터 만들기
3- 전체 코딩 소스 확인하기
5) 반응형 웹디자인으로 완성하기
1- 1200px 해상도 최적화 하기
2- 1024px 해상도 최적화 하기
3- 768px 해상도 최적화 하기
4- 600px 해상도 최적화 하기
5- 480px 해상도 최적화 하기
6) 최종 완성 및 확인하기
1- 전체 소스보기
2- 모든 브라우저에서 테스트 해보기

5장 실무! 2탄
HTML5보일러플레이트를 활용한 반응형 웹디자인 사이트 함께 만
들어 보기

1) HTML5보일러플레이트란?
1- HTML5보일러플레이트의 의미
2- HTML5보일러플레이트 활용법
3- 국내 사용을 위한 커스텀 어비의 HTML5보일러플레이트
2) 디자인 살펴보기
1- 디자인 파악하기
3) 레이아웃 만들기
1- 레이아웃 파악하기
2- 커스텀 어비의 HTML5보일러플레이트 세팅하기
3- HTML로 만들어보는 레이아웃
4- CSS로 만들어보는 레이아웃
5- 반응형 웹 레이아웃으로 만들기
4) PC버전 코딩 완성하기
1- 이미지 슬라이스 하기
2- 배경/헤더/떠있는 배너 완성하기
3- 메인 배너부분 완성하기
4- 컨텐츠 부분 완성하기
5- 푸터 완성하기
5) 반응형 웹디자인으로 완성하기
1- 480px해상도에서 최적화하기
6) 최종 완성 및 확인하기
1- 전체 소스보기
2- 모든 브라우저에서 확인하기

6장 실무 팁&테크 모음
1) 반응형 웹디자인 사이트 검사하기
1- 사이트에 접속해서 확인하기
가- Mattkersley.com
나- Reponsinator.com
다- Screenqueri.es
2- Fire Fox Add-on
가- Web Developer? Responsive Layouts
나- Firebug
다- User Agent Switcher
2) 반응형 웹에 활용가능한 HTML5 애니메이션 툴 알아보기
1- 어도비 엣지 애니메이트
2- 구글 웹디자이너
3- 어도비 뮤즈