이미 소장하고 있다면 판매해 보세요.
|
1장 웹 플랫폼
1.1 용어에 대한 참고사항 1.2 대상 독자와 필요 지식 1.3 정확한 용어 이해 1.4 진정한 HTML5 ___HTML5 템플릿 ___새로운 모범 사례 1.5 CSS3와 그 이후 ___벤더 전용 접두사 ___CSS 프레임워크와 프리프로세서 1.6 브라우저 지원 1.7 테스트, 테스트, 그리고 더 많은 테스트 1.8 요약 1.9 추가 자료 2장 구조와 시맨틱 2.1 HTML5의 새로운 요소 ___왜 만들었나 ___HTML5 섹셔닝 요소의 단점 2.2 WAI-ARIA 2.3 시맨틱 마크업의 중요성 2.4 마이크로포맷 2.5 RDFa 2.6 마이크로데이터 ___마이크로데이터 API ___마이크로데이터, 마이크로포맷, RDFa ___Schema.org ___리치 스니펫 2.7 데이터 속성 ___데이터 속성 API ___제이쿼리와 데이터 속성 ___시장에서의 데이터 속성 2.8 웹 컴포넌트: 마크업의 미래? 2.9 요약 2.10 추가 자료 3장 기기 반응형 CSS 3.1 미디어 쿼리 ___크기를 기반으로 한 미디어 기능 ___미디어 쿼리 결합과 부정 ___잠깐 참고: 픽셀에 대한 모든 것 ___화면 해상도 미디어 쿼리 ___기기 적응 ___입력 매커니즘의 미디어 기능 ___그밖의 미디어 기능 3.2 자바스크립트에서의 미디어 쿼리 3.3 적응형 웹 디자인과 반응형 웹 디자인의 비교 ___box-sizing 프로퍼티 ___길이 값의 동적 계산 3.4 뷰포트에 상대적인 길이 단위 ___루트에 상대적인 단위 ___모바일 퍼스트와 콘텐츠 분기점 3.5 반응형 디자인과 대체 객체 ___이미지 문제 ___HTML5 반응형 이미지 해결책 3.6 요약 3.7 추가 자료 4장 CSS 레이아웃에 대한 새로운 접근법 4.1 다중 열 ___간격과 규칙 ___병합과 줄바꿈 4.2 유연한 박스 ___유연한 박스모델 선언 ___콘텐츠 순서 변경 ___컨테이너 내부 정렬 ___유연성 추가 ___줄바꿈과 흐름 4.3 그리드 레이아웃 ___그리드 선언과 정의 ___그리드 선 반복 ___그리드에 항목 배치 ___정렬과 스택 ___그리드 레이아웃 구문 ___그리드 레이아웃 용어에 대해 ___그리드 템플릿 4.4 향후 전망 4.5 요약 4.6 추가 자료 5장 모던 자바스크립트 5.1 자바스크립트의 새로운 기능 ___async와 defer 속성 ___addEventListener 메소드 ___DOMContentLoaded 이벤트 ___입력 이벤트 ___자바스크립트에서의 CSS 선택자 ___getElementsByClassName() 메소드 ___클래스와의 상호작용 5.2 자바스크립트 라이브러리 ___제이쿼리 ___옙놉 ___모더나이저 ___머스타시 5.3 폴리필과 심 5.4 테스트와 디버깅 5.5 요약 5.6 추가 자료 6장 기기 API 6.1 지오로케이션 6.2 방향전환 6.3 전체 화면 6.4 진동 6.5 배터리 상태 6.6 네트워크 정보 6.7 카메라와 마이크 6.8 웹 스토리지 6.9 드래그앤드롭 6.10 파일 작업 6.11 모질라의 파이어폭스 OS와 WebAPI 6.12 폰갭과 네이티브 래퍼 6.13 요약 6.14 추가 자료 7장 이미지와 그래픽 7.1 벡터와 비트맵 비교 7.2 SVG ___SVG 이미지 분석 ___링크된 SVG 파일 ___내장된 SVG ___SVG 필터 ___SVG와 CSS의 융합 ___SVG의 단점 7.3 canvas 요소 ___이미지 처리 ___WebGL 7.4 SVG와 캔버스 선택 시점 7.5 요약 7.6 추가 자료 8장 새로운 폼 8.1 새로운 입력 타입 8.2 새로운 속성 ___autofocus ___placeholder ___autocomplete ___spellcheck ___multiple ___form 8.3 datalist 8.4 화면상 컨트롤과 위젯 ___number ___date ___color 8.5 사용자에게 정보 표시하기 ___progress ___meter ___output 8.6 클라이언트 측 폼 유효성 검사 8.7 제약 조건 유효성 검사 API 8.8 폼과 CSS 8.9 요약 8.10 추가 자료 9장 멀티미디어 9.1 미디어 요소 ___video 요소의 추가 속성 ___다중 소스 파일 ___대체 방안 ___자막과 캡션 ___인코딩 9.2 미디어 분할 9.3 미디어 API ___네트워크와 준비 상태 ___오디오와 비디오를 위한 추가 프로퍼티 9.4 미디어 이벤트 9.5 고급 미디어 상호작용 ___웹 오디오 API ___WebRTC 9.6 요약 9.7 추가 자료 10장 웹 앱 10.1 웹 앱 ___호스트형 앱과 패키지형 앱 ___매니페스트 파일 ___W3C 위젯 10.2 하이브리드 앱 ___폰갭 ___티타늄 10.3 TV 앱 10.4 웨비노스 10.5 애플리케이션 캐시 ___앱 캐시 파일의 콘텐츠 ___캐싱 순서 ___앱 캐시 API 10.6 요약 10.7 추가 자료 11장 향후 전망 11.1 웹 컴포넌트 ___템플릿 ___데코레이터 ___커스텀 요소 ___섀도 DOM ___통합 11.2 CSS의 미래 ___리전 ___익스클루전 ___머나먼 미래의 레이아웃 ___기능 쿼리 ___캐스케이딩 변수 11.3 요약 11.4 추가 자료 부록 A 브라우저 지원 부록 B 참고자료 |
|
★ 이 책에서 다루는 내용 ★
■ 다양한 기기에서 콘텐츠를 알맞게 표시하는 방법 ■ 지오로케이션(Geolocation), 방향 전환(Orientation), 웹스토리지(Web Storage)를 비롯한 최신 API를 사용해 기기와 상호 작용하도록 웹사이트를 디자인하는 방법 ■ 성가신 플러그인을 사용하지 않고 크로스 플랫폼오디오와 비디오를 통합하는 방법 ■ SVG로 고해상도 기기에서 이미지와 그래픽을 확장 가능하게 만드는 방법 ■ 강력한 HTML5 요소를 사용해 더 나은 웹사이트를 디자인하는 방법 ★ 이 책의 구성 ★ 이 책에서 설명하지 않을 내용을 솔직히 말하는 것에서부터 시작하겠다. 플랫폼마다의 우수성을 목표로 한 디자인 방법은 이 책에서 다루지 않는다. 내가 잘 모르는 것을 가르칠 수는 없기 때문이다. 내가 디자이너가 아닌 개발자가 된 데는 이유가 있다. 내가 포토샵 작업을 하면 마치 권투 글로브를 낀 둔한 손으로 마우스를 움직여 만든 것처럼 보이는 결과물이 나오기 때문이다. 이 책에서 설명할 내용은 다중 기기에서 작동하거나 목표로 삼는 단일 기기 종류에 맞춘 사이트를 구축할 수 있는 최신 코딩 방법과 기술이다(기술 자체는 모두 1장에서 설명하므로 여기서 세부내용을 다루지는 않겠다). 다음과 같이 매우 중요한 두 가지 사항을 유념하며 이 책을 읽어야 한다. ■ 웹 개발 기술의 범위는 매우 방대해서 이 책 한 권에서 모두를 다룰 수는 없다. 따라서 이 책에서는 다양한 기기에 걸쳐 웹 프로젝트를 구축할 때 필요하다고 여겨지는 핵심 기법이나 기술을 위주로 다루었다. ■ 이 책에 있는 내용이 모두 폭넓게 적용될 수 있는 것은 아니다. 적어도 이 책에서 설명하는 유형은 그렇지 않다. 웹은 지속적으로 발달하고 있고, 책 출판이란 특정한 한 순간을 하나의 스냅샷으로 담는다는 것을 의미한다. 몇 가지는 변화할 것이고, 몇 가지는 쇠퇴하여 사라질 것이다. 시간이 흘러도 비교적 내용이 유효한 책을 만들기 위해, 벤더 전용 기술보다는 공개 표준을 기반으로 한 기술과 브라우저에서 이미 어느 정도 구현된 기술만을 책에서 다뤘다. 웹 개발자라면 다음과 같은 태도를 보여야 한다. 지속적으로 정보를 얻어라. 웹 표준 개발에 있어 최신 상태를 유지하라. 호기심과 함께 즐기면서 이들을 가장 중요시하라. 여러분은 지식 공유를 기반으로 한 산업분야에서 작업할 정도로 운이 좋은 사람들이다. 이 책에서 언급되는 인물들과 웹 사이트를 찾아보고 스스로 자원을 구하고 트위터에도 가입하고 웹 개발자 커뮤니티 지역 모임에 참석해보라. 웹 개발 작업을 할 때만큼 흥분되는 시간도 없지만, 추가적으로 다른 활동에도 참여해서 이를 진정으로 이용할 필요가 있다. 무엇보다도 구축하고자 하는 대상에 대해 가장 훌륭한 구상방법을 생각하라. 웹 사이트를 구축하려 한다면 ‘웹과 모바일을 위한 사이트 구축’만을 생각하지 말고 어디에서나 작동할 수 있는 사이트 구축을 생각하라. 사용자가 사이트를 사용하는 방식, 사이트로부터 원하는 정보, 그리고 지금 당장은 아니더라도 미래에 개발자로서 그들의 목표를 충족시킬 수 있도록 수행해야 하는 작업을 생각해야 한다. 지난 5년간 웹은 크게 변화해왔다. 다음 5년 후 웹이 어떻게 될지 누가 장담할 수 있겠는가? |