목차 일부

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

더보기 닫기