목차 일부
00장 단계적 기능 향상을 이용한 디자인 사례 ... 1
더 넓어진 웹 세상 ... 3
모든 사람이 웹을 이용하고 있거나 곧 그렇게 될 것이다 ... 3
사용자의 기대감 이끌기 ... 4
사용자 접근성 필요 증대 ... 5
다른 기기를 이용한 웹 접속의 증가 ... 7
기기와 브라우저의 질긴 생명의...
더보기
목차 전체
00장 단계적 기능 향상을 이용한 디자인 사례 ... 1
더 넓어진 웹 세상 ... 3
모든 사람이 웹을 이용하고 있거나 곧 그렇게 될 것이다 ... 3
사용자의 기대감 이끌기 ... 4
사용자 접근성 필요 증대 ... 5
다른 기기를 이용한 웹 접속의 증가 ... 7
기기와 브라우저의 질긴 생명의 끈 ... 8
웹 2.0의 지뢰들 ... 9
브라우저에 대한 편협한 관점 ... 10
"자바스크립트가 꼭 필요"하다면 많은 사용자가 떠날 것이다 ... 11
CSS는 또 다른 오류가 발생할 잠재성이 있다 ... 12
부가기능의 블랙 박스 ... 13
새로운 기기는 예상하지 못한 인터랙션 규칙을 동반한다 ... 14
단계적 기능 향상이 방법이다 ... 16
01장 접근 방식 ... 23
브라우저 성능 테스트 ... 25
단계적 기능 향상을 위한 계획 : 자세히 살펴보기 ... 27
설계에서 적용까지 : 단계적 기능 향상을 적용한 개발 요소 만들기 ... 29
실전에 적용하기 ... 31
02장 단계적 기능 향상 적용하기 : 자세히 살펴보기 ... 33
자세히 살펴보기 개요 ... 34
콘텐츠 계층구조 정의와 컴포넌트 HTML 매핑 ... 35
기초 마크업, 최소한의 안전 스타일 만들기 ... 37
마크업, 스타일, 스크립트 개선사항 적용하기 ... 39
사례 1 : 뉴스 웹 사이트에서의 구조와 구성 계획하기 ... 41
콘텐츠 구성과 네이밍 평가하기 ... 42
콘텐츠 구성을 위한 기본 HTML 계층구조 특성 이용 ... 43
내비게이션 구조잡기 ... 44
레이어 콘텐츠와 애니메이션 콘텐츠 적용 ... 45
동적인 필더링과 정렬 지원 ... 46
사례 2 : 결제 페이지 프로세스, 유효성, 데이터 전송 ... 48
결제 페이지 디자인 파헤치기 ... 48
접근성을 보장하기 위한 폼 마크업 ... 54
제약사항과 검증절차 적용하기 ... 55
기본 경험과 향상된 경험 결합하기 ... 56
사례 3 : 인터랙티브한 데이터의 시각화 ... 57
예산 라인 그래프를 위한 기초 마크업 선택 ... 57
접근성이 높은 슬라이더 폼의 기초 마크업 만들기 ... 60
파이 그래프 만들기 ... 61
사례 4 : 브라우저에서 모든 기능이 지원되는 포토 매니저 ... 62
글로벌 내비게이션 요소 마크업하기 ... 63
복잡한 앨범과 다중 인터랙션 지원하기 ... 66
사용자 정의 폼과 오버레이 메뉴 만들기 ... 70
뒤로 가기 버튼 지원하기 ... 71
'자세히 살펴보기'를 적용할 때 필요한 체크리스트 ... 72
03장 의미있는 마크업 만들기 ... 75
텍스트와 이미지 마크업 ... 77
의미있는 마크업 텍스트를 표현하기 위한 요소 ... 77
리스트(List) ... 83
표를 이용한 데이터(tabular data) ... 84
이미지(Images) ... 87
리치 미디어(Embedded rich media) ... 88
외부 페이지 콘텐츠 추가하기 ... 90
인터랙티브한 콘텐츠 마크업하기 ... 91
앵커 링크 ... 92
폼 구조 ... 92
폼 제어 ... 94
페이지의 문맥 작성하기 ... 101
블록 vs. 인라인 요소를 사용할 때 알아야 할 것 ... 101
ID와 class를 이용해 요소 인식하기 ... 103
WAI-ARIA 랜드마크 role을 이용해 메인 페이지 인식하기 ... 104
읽을 수 있는 코드 순서 유지하기 ... 105
title 어트리뷰트를 이용하라 ... 108
HTML 문서 설정하기 ... 109
DOCTYPE ... 110
문서의 헤더 ... 112
접근성 추가하기 ... 117
접근성 가이드라인과 법률 표준 ... 118
웹 콘텐츠 접근성 가이드라인 (Web Content Accessibility Guidelines, WCAG) ... 120
04장 효과적으로 스타일 적용하기 ... 123
페이지에 CSS 적용하기 ... 124
외부 스타일스트에서 스타일 운영하기 ... 124
외부 스타일시트 연결하기 ... 126
의미있는 명명 규칙 사용하기 ... 128
기본 경험과 향상된 경험 스타일 입히기 ... 129
기본 경험을 제공하는 안전한 스타일 ... 129
향상된 경험을 제공하는 스타일 적용하기 ... 131
접근성 고려하기 ... 132
브라우저의 비일관성과 버그 다루기 ... 134
조건부 주석 ... 135
일반적인 이슈와 해결책 ... 136
05장 스크립트를 이용한 향상과 인터랙션 ... 141
자바스크립트 올바르게 참조하기 ... 142
인라인 자바스크립트 사용 금지 ... 142
외부 자바스크립트 참조하기 ... 143
기본 경험에서 자바스크립트 위치 이해하기 ... 143
스크립트 향상을 위한 실무 사례 ... 144
콘텐츠가 준비되면 스크립트를 실행하라 ... 144
마크업에 동작 적용하기 ... 145
자바스크립트를 이용해 향상된 마크업 만들기 ... 147
콘텐츠의 노출 관리하기 ... 150
스타일 향상 적용하기 ... 152
사용성과 접근성의 유지와 강화 ... 153
키보드 접근 적용하기 ... 154
WAI-ARIA 어트리뷰트 지정하기 ... 155
접근성 테스트 ... 156
뒤로 가기 버튼의 관리 ... 157
06장 브라우저 성능 테스트 ... 159
EnhanceJS : 성능 테스트 프레임워크 ... 160
EnhanceJS의 매커니즘 : 테스트 방법 ... 161
EnhanceJS를 이용해 개선사항 적용하기 ... 164
EnhanceJS 설정 ... 167
추가 스타일시트 로딩하기 ... 167
추가 스크립트 로딩하기 ... 170
경험 토글 링크 수정하기 ... 170
EnhanceJS의 pass/fail 조정하기 ... 172
EnhanceJS 테스트 세트 확장하기 ... 173
EnhanceJS 옵션으로 테스트 세트 수정하기 ... 173
EnhanceJS의 인스턴스 생성하기 ... 174
디버깅을 위한 성능 테스트 경고 활성화 ... 175
서버에서 EnhanceJS 최적화하기 ... 176
07장 단계적 기능 향상을 적용한 위젯 만들기 ... 181
위젯 코딩 방법 ... 182
위젯 예제 다루기 ... 183
예제 코드 내려받기 ... 185
08장 접을 수 있는 콘텐츠 ... 187
자세히 살펴보기 ... 188
접근이 쉬운 접을 수 있는 콘텐츠 만들기 ... 190
기초 마크업과 스타일 ... 191
향상된 마크업과 스타일 ... 191
접을 수 있는 스크립트 적용 ... 196
접을 수 있는 스크립트 사용하기 ... 198
09장 탭 메뉴 ... 201
자세히 살펴보기 ... 202
탭 메뉴 만들기 ... 205
기초 마크업과 스타일 ... 205
향상된 마크업과 스타일 ... 207
탭 메뉴 스크립트 ... 212
좀 더 개선하기 ... 215
즐겨 찾기와 방문기록(뒤로 가기 버튼) 탐색 ... 215
자동으로 회전하는 탭 ... 219
외부 탭 콘텐츠 참조하기 ... 220
아코디언처럼 보이기 ... 220
탭 스크립트 이용하기 ... 221
10장 툴팁 ... 223
자세히 살펴보기 ... 224
title 콘텐츠로 툴팁 만들기 ... 227
기초 마크업과 스타일 ... 227
향상된 마크업과 스타일 ... 228
향상된 툴팁 스크립트 ... 230
앵커 링크로 툴팁 만들기 ... 233
외부 소스로 툴팁 만들기 ... 235
툴팁 스크립트 사용하기 ... 237
11장 트리구조 메뉴 ... 239
자세히 살펴보기 ... 240
트리 메뉴 만들기 ... 243
기초 마크업과 스타일 ... 243
향상된 마크업과 스타일 ... 245
향상된 트리 스크립트 ... 249
트리 메뉴 스크립트 이용하기 ... 257
12장 HTML5 canvas를 이용한 그래프 ... 259
자세히 살펴보기 ... 261
기초 마크업 ... 262
그래프에 접근성 추가하기 ... 266
테이블 데이터 파싱하기 ... 266
데이터를 가시화하기 위해 canvas 이용하기 ... 271
향상된 테이블 스타일 적용하기 ... 280
데이터 접근성 유지하기 ... 281
canvas 그래프 좀 더 살펴 보기 : visualize.js 플러그인 ... 283
13장 대화 상자와 오버레이 메뉴 ... 287
자세히 살펴보기 ... 288
대화상자 만들기 ... 291
기초 마크업과 스타일 ... 291
향상된 마크업과 스타일 ... 292
개선된 대화상자 스크립트 ... 298
대화상자 좀 더 깊이 살펴보기 ... 303
대화상자 스크립트 이용하기 ... 304
14장 버튼 ... 309
자세히 살펴보기 ... 310
input 기반 버튼 스타일 만들기 ... 312
기초 마크업과 스타일 ... 312
향상된 마크업과 스타일 ... 314
hover 상태 스크립트 작성 ... 319
버튼에 좀 더 복잡한 비주얼 적용하기 ... 320
기초 마크업과 스타일 ... 320
향상된 마크업과 스타일 ... 321
input을 button으로 변경하는 스크립트 ... 322
input을 button으로 변경하는 스크립트 이용하기 ... 325
버튼 좀 더 깊이 살펴보기 ... 326
15장 체크박스, 라디오 버튼, 별점 ... 329
자세히 살펴보기 ... 330
사용자 정의 체크박스 만들기 ... 333
기초 마크업 ... 333
향상된 마크업과 스타일 ... 335
체크박스 스크립트 ... 339
사용자 정의 라디오 버튼 만들기 ... 341
기초 마크업 ... 342
향상된 마크업과 스타일 ... 342
라디오 버튼 스크립트 ... 344
사용자 정의 input 좀 더 살펴보기 : 별점 위젯 ... 347
기초 마크업 ... 348
향상된 마크업과 스타일 ... 350
별점 위젯 스크립트 만들기 ... 351
사용자 정의 input과 별점 스크립트 사용하기 ... 354
16장 슬라이더 ... 357
자세히 살펴보기 ... 358
슬라이더 만들기 ... 363
기초 마크업과 스타일 ... 363
향상된 마크업과 스타일 ... 364
슬라이더 스크립트 ... 371
슬라이더 스크립트 이용하기 ... 377
17장 셀렉트 메뉴 ... 381
자세히 살펴보기 ... 382
접근성이 고려된 사용자 정의 셀렉트 만들기 ... 384
기초 마크업과 스타일 ... 385
향상된 마크업과 스타일 ... 386
향상된 사용자 정의 셀렉트 스크립트 ... 395
사용자 정의 셀렉트 좀 더 살펴보기 : 최신 옵션 스타일 적용 ... 404
사용자 정의 셀렉트 스크립트 이용하기 ... 407
18장 리스트 빌더 ... 409
자세히 살펴보기 ... 410
리스트 빌더 만들기 ... 412
기초 마크업과 스타일 ... 412
향상된 마크업과 스타일 ... 413
리스트 빌더 스크립트 ... 418
리스트 빌더 좀 더 살펴보기 : 다중 선택, 정렬, 자동완성, 문맥 메뉴 ... 424
다중 선택 ... 424
드래그 앤 드롭 정렬 ... 424
자동 완성 ... 425
문맥 메뉴 ... 425
리스트 빌더 스크립트 사용하기 ... 426
19장 파일첨부 ... 429
자세히 살펴보기 ... 431
사용자 정의 파일 input 만들기 ... 433
기초 마크업과 스타일 ... 434
향상된 마크업과 스타일 ... 434
사용자 정의 파일 input 스크립트 ... 438
사용자 정의 파일 input 스크립트 사용하기 ... 441
마무리 : 미래를 내다보다 ... 443
더보기 닫기