책소개
『HTML5와 CSS3로 작성하는 반응형 웹 디자인』은 반응형 웹 디자인의 모든 핵심내용을 다루고 있다. 그리고 반응형 디자인 방법론에, HTML5와 CSS3가 제공하는 가장 최신의, 그리고 유용한 기술을 적용해 그 어느 때보다 훨씬 더 유지하기 쉽고 간결한 디자인을 만드는 방법을 제시한다. 또한 코드와 이미지, 파일을 작성하고 배포하는 공통적인 모범사례도 설명한다.
저자소개
저자 : 벤 프레인
저자 벤 프레인(Ben Frain)은 1996년부터 웹 디자이너이자 개발자로 일해 왔다. 현재는 bet365에서 수석 프런트엔드 개발자로 일하고 있다. 샐퍼드 대학교에서 미디어와 공연학을 전공했으며, TV 드라마의 무명 연기자 및 기술 저널리스트로 일했다.
잘 알려지지 않은(그의 말에 따르면) 네 편의 시나리오를 집필했으며, 아직도 그 중 하나는 팔릴 것이라 믿고 있다. 일 외적으로는, 체력과 그의 아내가 허락하는 한 계속해서 실내축구를 즐기려 하며, 그의 두 아들과 뛰어 놀기를 좋아한다. 그가 쓴 또 다른 책, ‘디자이너를 위한 사스와 컴파스’도 있다. 홈페이지 www.benfrain.com, 트위터 twitter.com/benfrain에서 그를 만날 수 있다.
역자 : 류영선
역자 류영선은 소프트웨어 엔지니어로서 오랫동안 웹 브라우저와 웹 서버를 개발했다. 그 경험을 바탕으로 현재는 W3C 및 다양한 국제 표준화 단체에서 웹과 관련된 표준화 업무를 담당하고 있다. 최근에는 웹 기술을 PC에서 벗어나 모바일이나 DTV, 디지털 사이니지(Digital Signage), 웨어러블(Wearable), 오토모티브(Automotive) 등 다양한 IoT 디바이스에 접목하는 오픈 웹 플랫폼(Open Web Platform)에 관심을 가지고 관련 기술을 계속 연구 중이다. 아울러 워크숍이나 세미나 강연 등을 통해 기술 전파에 힘쓰고 있다.
옮긴 책으로는 ‘반응형 웹 디자인 1판(2012)’과 ‘실전 예제로 배우는 반응형 웹 디자인(2014)’, ‘HTML5 웹소켓 프로그래밍(2014)’, ‘WebRTC 프로그래밍(2015)’이 있다.
목차
1장 반응형 웹 디자인 핵심
반응형 웹 디자인 시작하기
반응형 웹 디자인 정의
브라우저 지원 수준 결정
첫 번째 반응형 예제
예제에서 부족한 점
요약
2장 미디어 쿼리 - 다양한 뷰포트의 지원
왜 반응형 디자인에 미디어 쿼리가 필요한가?
미디어 쿼리 구문
미디어 쿼리 조합
미디어 쿼리로 디자인 변경하기
미디어 쿼리 작성 시 고려사항
미디어 쿼리를 결합할 것인가 나눌 것인가?
뷰포트 메타 태그
미디어 쿼리 레벨 4
요약
3장 유동형 레이아웃과 반응형 이미지
고정 픽셀 디자인을 유동형 비례 레이아웃으로 변환
플렉스박스 소개
플렉스박스 시작하기
반응형 이미지
요약
4장 반응형 웹 디자인을 위한 HTML5
모든 최신 브라우저에서 지원하는 HTML5 마크업
HTML5 페이지 시작
느긋한 HTML5
HTML5의 새로운 시맨틱 엘리먼트
HTML5 텍스트 레벨 시맨틱
폐기된 HTML 기능
HTML5 엘리먼트 사용하기
웹 애플리케이션의 더 나은 접근성을 위한 WCAG와 WAI-ARIA
반응형 HTML5 비디오와 iFrame
오프라인 우선
요약
5장 CSS3 - 선택자, 타이포그래피, 색상 모드 그리고 새로운 기능
모든 것을 다 알 수는 없다
CSS 규칙 분석
빠르고 유용한 CSS 트릭
단어 넘김
CSS의 기능 분기
새로운 CSS3 선택자와 사용법
CSS3 구조 의사 클래스
CSS 사용자정의 속성과 변수
CSS calc
CSS 레벨 4 선택자
웹 타이포그래피
새로운 CSS3의 색상 포맷과 알파 투명도
요약
6장 CSS3의 멋진 기능
CSS3 텍스트 섀도
박스 섀도
배경 그라디언트
그라디언트 반복
배경 그라디언트 패턴
다중 배경 이미지
고해상도 배경 이미지
CSS 필터
CSS 성능에 대한 고찰
요약
7장 독립적인 해상도 SVG의 사용
SVG의 간단한 역사
문서가 그래픽이다
인기 있는 이미지 편집 패키지 및 서비스로 SVG 만들기
SVG를 웹 페이지에 삽입
인라인으로 SVG를 삽입
각 SVG 삽입 방법으로 할 수 있는 일(inline과 object, background-image 그리고 img)
추가 SVG 성능과 특이성
자바스크립트로 SVG 애니메이션하기
SVG 최적화
SVG를 필터로 사용하기
SVG 안에서 미디어 쿼리 사용하기
요약
8장 CSS3 트랜지션, 트랜스폼 그리고 애니메이션
CSS3 트랜지션의 정의와 사용법
CSS3 2D 트랜스폼
CSS3 3D 트랜스폼
CSS3 애니메이션
요약
9장 HTML5와 CSS3로 폼 정복
HTML5 폼
HTML5 폼의 구성요소 이해
HTML5 입력 형식
비지원 브라우저를 위한 폴리필
CSS3로 HTML5 폼 스타일링하기
요약
10장 반응형 웹 디자인으로의 접근
가능한 한 빨리 브라우저에서 디자인하기
실제 디바이스에서 디자인을 보고 사용하기
점진적 향상 수용
브라우저 지원 매트릭스 정의
사용자 경험의 계층화 311
CSS 브레이크 포인트를 자바스크립트에 연결
제품에 CSS 프레임워크를 사용하지 마라
실용적인 코딩 솔루션
가능한 가장 단순한 코드를 사용하라
뷰포트에서 내용을 숨기거나 표시하고 로딩하기
유효성 검사기와 린팅 도구
성능
다음 큰 변화
요약
.png){kind=logo}
