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