목차 일부
저자 소개 ... 7
기술 감수자 소개 ... 8
옮긴이 소개 ... 10
옮긴이의 말 ... 11
들어가며 ... 20
1장 HTML5와 CSS3, <B><FONT color ... #0000
왜 스마트폰이 중요한가?(구형 IE가 중요하지 않은 이유) ... 27
반응형 디자인이 항상 올바른 선택인가? ... 28
<B><FONT colo...
더보기
목차 전체
저자 소개 ... 7
기술 감수자 소개 ... 8
옮긴이 소개 ... 10
옮긴이의 말 ... 11
들어가며 ... 20
1장 HTML5와 CSS3, <B><FONT color ... #0000
왜 스마트폰이 중요한가?(구형 IE가 중요하지 않은 이유) ... 27
반응형 디자인이 항상 올바른 선택인가? ... 28
<B><FONT color ... #0000
반응형 디자인이 전부인가? ... 30
<B><FONT color ... #0000
뷰포트 테스트 툴 ... 31
영감을 주는 온라인 소스 ... 40
HTML5가 왜 좋은가? ... 41
HTML5 코딩으로 시간 절약하기 ... 41
새로운 HTML5 시맨틱 태그 요소 ... 42
<B><FONT color ... #0000
결론: CSS3는 아무런 문제도 발생시키지 않는다 ... 44
어떻게 CSS3로 일상적인 디자인 문제를 해결할 수 있는가? ... 45
이미지가 필요 없다 ... 48
CSS3의 여타 기능 ... 49
지금 바로 HTML5와 CSS3를 사용할 수 있을까? ... 52
<B><FONT color ... #0000
고객에게 웹사이트가 모든 브라우저에서 동일하게 보이지 않는다는 사실을 가르치자 ... 54
정리 ... 56
2장 미디어 쿼리: 다양한 뷰포트의 지원 ... 57
지금 바로 미디어 쿼리를 사용할 수 있다 ... 58
왜 반응형 디자인에 미디어 쿼리가 필요한가? ... 59
미디어 쿼리 구문 ... 59
미디어 쿼리로 판단할 수 있는 사항 ... 62
미디어 쿼리로 디자인 변경 ... 63
반응형 디자인을 위해 미디어 쿼리를 사용하는 가장 좋은 방법 ... 64
첫 번째 반응형 디자인 ... 64
당황스럽겠지만, 우리의 디자인은 고정폭으로 되어 있다 ... 65
반응형 디자인: 이미지를 가능한 한 경제적으로 만들기 ... 69
작은 뷰포트에서의 콘텐츠 클리핑 문제 ... 71
최신 브라우저의 페이지 자동 크기 조정 기능 중단하기 ... 73
다양한 크기의 뷰포트를 지원하기 위한 고정 디자인 ... 76
반응형 디자인에서는 콘텐츠가 항상 먼저 와야 한다 ... 78
미디어 쿼리는 솔루션의 일부일 뿐이다 ... 82
유동형 레이아웃이 필요하다 ... 83
정리 ... 83
3장 유동형 레이아웃 적용 ... 85
고정 레이아웃은 미래 경쟁력이 없다 ... 87
왜 비례형 레이아웃이 <B><FONT color ... #0000
고정 레이아웃을 비례형 레이아웃으로 수정 ... 88
기억해야 할 공식 ... 88
비례 요소를 위한 컨텍스트 설정 ... 91
항상 컨텍스트를 염두에 두자 ... 98
타이포그래피를 위해 픽셀보다는 ems를 사용 ... 101
유동형 이미지 ... 103
뷰포트에 맞게 이미지 크기 조절하기 ... 104
특정 이미지를 위한 특정 규칙 ... 106
유동형 이미지에 제동 장치 추가 ... 108
다양한 max-width 속성 ... 109
화면 크기에 따른 다양한 이미지 제공 ... 110
적응형 이미지 설정 ... 111
배경 이미지를 별도로 보관하기 ... 113
유동형 그리드와 미디어 쿼리를 함께 사용 ... 116
CSS 그리드 시스템 ... 116
그리드 시스템으로 빠른 사이트 구축 ... 117
정리 ... 124
4장 반응형 디자인을 위한 HTML5 ... 125
HTML5의 어떤 부분을 지금 바로 사용할 수 있는가? ... 126
대부분의 사이트를 HTML5로 작성할 수 있다 ... 127
폴리필과 심, 그리고 모더나이저 ... 127
HTML5 페이지 작성 방법 ... 128
HTML5의 경제성 ... 130
HTML5 마크업으로의 합리적인 접근 방법 ... 131
강력한〈a〉태그 ... 131
더 이상 사용하지 않는 HTML 기능 ... 132
HTML5의 새로운 시맨틱 요소 ... 133
〈section〉요소 ... 134
〈nav〉요소 ... 134
〈article〉요소 ... 134
〈aside〉요소 ... 135
〈hgroup〉요소 ... 135
HTML5의 개요 알고리즘 ... 136
〈header〉요소 ... 137
〈footer〉요소 ... 138
〈address〉요소 ... 138
HTML5 구조적 요소의 실제 사용법 ... 138
사이트의 메인 콘텐츠는 어떤가? ... 146
HTML5 텍스트 레벨 시맨틱 ... 146
〈b〉요소 ... 146
〈em〉요소 ... 146
〈i〉요소 ... 147
마크업에 텍스트 레벨 시맨틱 적용하기 ... 147
WAI-ARIA로 사이트에 웹 접근성 추가하기 ... 149
ARIA의 랜드마크 역할 ... 150
HTML5의 미디어 삽입 ... 153
HTML5 방식으로 비디오와 오디오 추가하기 ... 154
대체 소스 파일 제공 ... 155
구형 브라우저를 위한 폴백 제공 ... 156
거의 동일하게 동작하는 오디오와 비디오 태그 ... 157
반응형 비디오 ... 157
오프라인 웹 애플리케이션 ... 161
오프라인 웹 애플리케이션 핵심 요약 ... 161
웹 페이지를 오프라인에서 동작하게 만들기 ... 162
매니페스트 파일 이해하기 ... 163
오프라인 매니페스트 파일에서 자동으로 페이지 로딩하기 ... 164
버전 주석 ... 164
오프라인으로 사이트 보기 ... 164
오프라인 웹 애플리케이션 문제 해결 ... 165
정리 ... 166
5장 CSS3: 선택자, 타이포그래피, 색상 모드 ... 167
프론트엔드 개발자가 CSS3로 할 수 있는 일 ... 168
인터넷 익스플로러 버전 6, 7, 8에서의 CSS3 지원 ... 169
CSS3를 사용한 웹 페이지 설계와 개발 ... 170
CSS 규칙 분석 ... 170
벤더 프리픽스의 사용법 ... 170
빠르고 유용한 CSS3 트릭 ... 173
반응형 디자인을 위한 CSS3 다중 열 ... 173
열 간격과 구분선 추가 ... 175
단어 넘김 ... 176
새로운 CSS3 선택자와 사용법 ... 178
CSS3 속성 선택자 ... 178
CSS3 서브스트링 매칭 속성 선택자 ... 178
실제 적용 사례 ... 180
CSS3 구조 의사클래스 ... 181
:last-child 선택자 ... 182
:nth-child 선택자 ... 185
n번째 규칙 ... 186
부정(:not) 선택자 ... 190
의사엘리먼트 개정 ... 190
:first-line은 반응형 디자인에 유용한가? ... 191
사용자 정의 웹 타이포그래피 ... 192
font-face CSS 규칙 ... 193
font-face로 웹 폰트 구현 ... 194
font-face 제목 문제 해결 ... 198
사용자 정의 font-face 타이포그래피와 반응형 디자인 ... 200
새로운 CSS3의 색상 포맷과 알파 투명도 ... 200
RGB 색상 ... 200
HSL 색상 ... 202
IE6, IE7, IE8을 위한 폴백 색상 ... 203
알파 채널 ... 203
정리 ... 205
6장 CSS3의 멋진 기능 ... 207
CSS3 텍스트 섀도 ... 209
16진수, HSL, RGB 색상 ... 209
픽셀 또는 em, rem ... 210
텍스트 섀도 방지 ... 211
왼쪽 상단 섀도 적용 ... 212
양각 텍스트 섀도 효과 ... 213
다중 텍스트 섀도 ... 214
박스 섀도 ... 214
인셋 섀도 ... 215
다중 섀도 ... 217
배경색 그레이디언트 ... 218
선형 배경색 그레이디언트 ... 218
선형 그레이디언트 구문 분석 ... 221
원형 배경색 그레이디언트 ... 222
원형 그레이디언트 구문 분석 ... 223
그레이디언트 반복 ... 225
배경색 그레이디언트 패턴 ... 227
반응형 디자인을 위한 CSS3 고려사항 ... 229
CSS3 속성 함께 사용하기 ... 231
다중 배경 이미지 ... 236
배경 크기 ... 238
배경 위치 ... 238
배경 속성을 약식으로 사용하기 ... 238
그 외의 CSS3 기능 ... 239
반응형 디자인에 꼭 필요한 크기 조절이 가능한 아이콘 ... 239
정리 ... 240
7장 CSS3 트랜지션, 트랜스폼 그리고 애니메이션 ... 243
CSS3 트랜지션의 정의와 사용법 ... 245
트랜지션 속성 ... 246
트랜지션 약식 속성 ... 247
속성별로 각기 다른 트랜지션 시간 적용 ... 248
시간 함수 ... 248
반응형 웹사이트를 위한 재미있는 트랜지션 효과 ... 250
CSS3 2D 트랜스폼 ... 250
트랜스폼할 수 있는 것 ... 252
확대/축소 ... 252
이동 ... 252
회전 ... 253
왜곡 ... 253
매트릭스 ... 254
transform-origin 속성 ... 255
CSS3 3D 트랜스폼 ... 256
3D 효과 분석 ... 259
3D 트랜스폼은 아직 준비가 되어 있지 않다 ... 262
CSS3 애니메이션 ... 263
CSS3 트랜스폼과 애니메이션의 동시 적용 ... 267
정리 ... 270
8장 HTML5와 CSS3로 폼 정복 ... 273
HTML5 폼 ... 274
HTML5 폼의 구성요소 ... 276
플레이스홀더 ... 277
필수 ... 278
오토포커스 ... 279
자동완성 ... 280
리스트와 데이터리스트 요소 ... 281
HTML5 입력 형식 ... 282
email ... 282
number ... 283
url ... 284
tel ... 285
search ... 287
pattern ... 287
color ... 288
날짜와 시간 입력 ... 289
date ... 289
month ... 290
week ... 290
time ... 291
datetime과 datetime-local ... 291
range ... 293
비지원 브라우저를 위한 폴리필 ... 294
CSS3로 HTML5 폼 스타일링하기 ... 296
폼에 특화된 CSS3 의사클래스 선택자 ... 301
정리 ... 303
9장 크로스 브라우저 반응형 도전 과제 해결 ... 305
점진적인 향상과 우아한 성능 저하 ... 310
현실 ... 311
구형 인터넷 익스플로러를 수정할 것인가? ... 311
통계 ... 312
개인적인 선택 ... 313
모더나이저: 프론트엔드 개발자의 만능칼 ... 314
모더나이저로 스타일 문제 해결 ... 316
모더나이저로 구형 IE에 HTML5 요소 지원 추가 ... 318
인터넷 익스플로러 6, 7, 8 버전에 min과 max 미디어 쿼리 기능 추가 ... 319
모더나이저로 조건부 로딩하기 ... 321
내비게이션 링크를 드롭 메뉴로 변경(조건부) ... 324
고해상도 디바이스(미래) ... 328
정리 ... 331
찾아보기 ... 333
더보기 닫기