HTML5와 CSS3로 작성하는 반응형 웹 디자인

1장 HTML5와 CSS3, 반응형 웹 디자인 시작하기
___왜 스마트폰이 중요한가?(구형 IE가 중요하지 않은 이유)
___반응형 디자인이 항상 올바른 선택인가?
___반응형 웹 디자인의 정의
___반응형 디자인이 전부인가?
___반응형 웹 디자인의 예
______뷰포트 테스트 툴
______영감을 주는 온라인 소스
___HTML5가 왜 좋은가?
______HTML5 코딩으로 시간 절약하기
______새로운 HTML5 시맨틱 태그 요소
___반응형 웹 디자인 그 이상을 가능하게 하는 CSS3
______결론: CSS3는 아무런 문제도 발생시키지 않는다
______어떻게 CSS3로 일상적인 디자인 문제를 해결할 수 있는가?
___이미지가 필요 없다
___CSS3의 여타 기능
___지금 바로 HTML5와 CSS3를 사용할 수 있을까?
___반응형 웹 디자인이 마법의 해결책은 아니다
___고객에게 웹사이트가 모든 브라우저에서 동일하게 보이지 않는다는 사실을 가르치자
___정리

2장 미디어 쿼리: 다양한 뷰포트의 지원
___지금 바로 미디어 쿼리를 사용할 수 있다
___왜 반응형 디자인에 미디어 쿼리가 필요한가?
______미디어 쿼리 구문
______미디어 쿼리로 판단할 수 있는 사항
______미디어 쿼리로 디자인 변경
______반응형 디자인을 위해 미디어 쿼리를 사용하는 가장 좋은 방법
___첫 번째 반응형 디자인
______당황스럽겠지만, 우리의 디자인은 고정폭으로 되어 있다
______반응형 디자인: 이미지를 가능한 한 경제적으로 만들기
______작은 뷰포트에서의 콘텐츠 클리핑 문제
___최신 브라우저의 페이지 자동 크기 조정 기능 중단하기
___다양한 크기의 뷰포트를 지원하기 위한 고정 디자인
___반응형 디자인에서는 콘텐츠가 항상 먼저 와야 한다
___미디어 쿼리는 솔루션의 일부일 뿐이다
______유동형 레이아웃이 필요하다
___정리

3장 유동형 레이아웃 적용
___고정 레이아웃은 미래 경쟁력이 없다
___왜 비례형 레이아웃이 반응형 웹 디자인에 꼭 필요한가?
___고정 레이아웃을 비례형 레이아웃으로 수정
______기억해야 할 공식
______비례 요소를 위한 컨텍스트 설정
______항상 컨텍스트를 염두에 두자
___타이포그래피를 위해 픽셀보다는 ems를 사용
___유동형 이미지
______뷰포트에 맞게 이미지 크기 조절하기
______특정 이미지를 위한 특정 규칙
______유동형 이미지에 제동 장치 추가
______다양한 max-width 속성
___화면 크기에 따른 다양한 이미지 제공
______적응형 이미지 설정
___유동형 그리드와 미디어 쿼리를 함께 사용
___CSS 그리드 시스템
______그리드 시스템으로 빠른 사이트 구축
___정리

4장 반응형 디자인을 위한 HTML5
___HTML5의 어떤 부분을 지금 바로 사용할 수 있는가?
______대부분의 사이트를 HTML5로 작성할 수 있다
______폴리필과 심, 그리고 모더나이저
___HTML5 페이지 작성 방법
______HTML5의 경제성
______HTML5 마크업으로의 합리적인 접근 방법
______강력한 <a> 태그
______더 이상 사용하지 않는 HTML 기능
___HTML5의 새로운 시맨틱 요소
______<section> 요소
______<nav> 요소
______<article> 요소
______<aside> 요소
______<hgroup> 요소
______<header> 요소
______<footer> 요소
______<address> 요소
___HTML5 구조적 요소의 실제 사용법
______사이트의 메인 콘텐츠는 어떤가?
___HTML5 텍스트 레벨 시맨틱
______<b> 요소
______<em> 요소
______<i> 요소
______마크업에 텍스트 레벨 시맨틱 적용하기
___WAI-ARIA로 사이트에 웹 접근성 추가하기
______ARIA의 랜드마크 역할
___HTML5의 미디어 삽입
___HTML5 방식으로 비디오와 오디오 추가하기
______대체 소스 파일 제공
______구형 브라우저를 위한 폴백 제공
______거의 동일하게 동작하는 오디오와 비디오 태그
___반응형 비디오
___오프라인 웹 애플리케이션
______오프라인 웹 애플리케이션 핵심 요약
______웹 페이지를 오프라인에서 동작하게 만들기
______매니페스트 파일 이해하기
______오프라인 매니페스트 파일에서 자동으로 페이지 로딩하기
______버전 주석
______오프라인으로 사이트 보기
______오프라인 웹 애플리케이션 문제 해결
___정리

5장 CSS3: 선택자, 타이포그래피, 컬러 모드
___프론트엔드 개발자가 CSS3로 할 수 있는 일
______인터넷 익스플로러 버전 6, 7, 8에서의 CSS3 지원
______CSS3를 사용한 웹 페이지 설계와 개발
___CSS 규칙 분석
___벤더 프리픽스의 사용법
___빠르고 유용한 CSS3 트릭
______반응형 디자인을 위한 CSS3 다중 열
______단어 넘김
___새로운 CSS3 선택자와 사용법
______CSS3 속성 선택자
______CSS3 구조 의사클래스
______의사엘리먼트 개정
___사용자 정의 웹 타이포그래피
______@font-face CSS 규칙
______@font-face로 웹 폰트 구현
___@font-face 제목 문제 해결
______사용자 정의 @font-face 타이포그래피와 반응형 디자인
___새로운 CSS3의 컬러 포맷과 알파 투명도
______RGB 컬러
______HSL 컬러
______IE6, IE7, IE8을 위한 폴백 컬러
______알파 채널
___정리

6장 CSS3의 멋진 기능
___CSS3 텍스트 섀도
______16진수, HSL, RGB 색상
______픽셀 또는 em, rem
______텍스트 섀도 방지
______양각 텍스트 섀도 효과
______다중 텍스트 섀도
___박스 섀도
______인셋 섀도
______다중 섀도
___배경색 그레이디언트
______선형 배경색 그레이디언트
______원형 배경색 그레이디언트
______그레이디언트 반복
___배경색 그레이디언트 패턴
___반응형 디자인을 위한 CSS3 고려사항
___CSS3 속성 함께 사용하기
___다중 배경 이미지
______배경 크기
______배경 위치
______배경 속성을 약식으로 사용하기
___그 외의 CSS3 기능
___반응형 디자인에 꼭 필요한 크기 조절이 가능한 아이콘
___정리

7장 CSS3 트랜지션, 트랜스폼 그리고 애니메이션
___CSS3 트랜지션의 정의와 사용법
______트랜지션 속성
______반응형 웹사이트를 위한 재미있는 트랜지션 효과
___CSS3 2D 트랜스폼
______트랜스폼할 수 있는 것
___CSS3 3D 트랜스폼
______3D 효과 분석
______3D 트랜스폼은 아직 준비가 되어 있지 않다
___CSS3 애니메이션
______CSS3 트랜스폼과 애니메이션의 동시 적용
___정리

8장 HTML5와 CSS3로 폼 정복
___HTML5 폼
______HTML5 폼의 구성요소
______플레이스홀더
______필수
______오토포커스
______자동완성
______리스트와 데이터리스트 요소
______HTML5 입력 형식
______날짜와 시간 입력
___비지원 브라우저를 위한 폴리필
___CSS3로 HTML5 폼 스타일링하기
______폼에 특화된 CSS3 의사클래스 선택자
___정리

9장 크로스 브라우저 반응형 도전 과제 해결
___점진적인 향상과 우아한 성능 저하
______현실
___구형 인터넷 익스플로러를 수정할 것인가?
______통계
______개인적인 선택
___모더나이저: 프론트엔드 개발자의 만능칼
______모더나이저로 스타일 문제 해결
______모더나이저로 구형 IE에 HTML5 요소 지원 추가
______인터넷 익스플로러 6, 7, 8 버전에 min과 max 미디어 쿼리 기능 추가
______모더나이저로 조건부 로딩하기
___내비게이션 링크를 드롭 메뉴로 변경(조건부)
___고해상도 디바이스(미래)
___정리