HTML5와 CSS3로 작성하는 반응형 웹 디자인

최신 웹 사용자들의 요구를 충족하는 응답과 미래지향적 사이트 구축

벤 프레인 지음 | 류영선 옮김

정보문화사 2016년 09월 19일 출간 국내도서 : 2016년 04월 25일 출간

작품소개

책소개

『HTML5와 CSS3로 작성하는 반응형 웹 디자인』은 반응형 웹 디자인의 모든 핵심내용을 다루고 있다. 그리고 반응형 디자인 방법론에, HTML5와 CSS3가 제공하는 가장 최신의, 그리고 유용한 기술을 적용해 그 어느 때보다 훨씬 더 유지하기 쉽고 간결한 디자인을 만드는 방법을 제시한다. 또한 코드와 이미지, 파일을 작성하고 배포하는 공통적인 모범사례도 설명한다.

목차

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 프레임워크를 사용하지 마라
실용적인 코딩 솔루션
가능한 가장 단순한 코드를 사용하라
뷰포트에서 내용을 숨기거나 표시하고 로딩하기
유효성 검사기와 린팅 도구
성능
다음 큰 변화
요약

출판사 서평

■ 책 소개

반응형 웹 디자인은 스마트폰부터 데스크톱에 이르는 모든 디바이스에서 잘 어울리는 단일 솔루션을 제공해 줍니다. 반응형 웹 디자인은 쉽게 모든 사용자의 스크린 크기에 반응하여, 현재뿐 아니라 미래의 디바이스에 이르기까지 모든 디바이스에서 최상의 사용자 경험을 제공할 것입니다.

이 책은 반응형 웹 디자인의 모든 핵심내용을 다루고 있습니다. 그리고 반응형 디자인 방법론에, HTML5와 CSS3가 제공하는 가장 최신의, 그리고 유용한 기술을 적용해 그 어느 때보다 훨씬 더 유지하기 쉽고 간결한 디자인을 만드는 방법을 제시합니다. 또한 코드와 이미지, 파일을 작성하고 배포하는 공통적인 모범사례(Best Practice)도 설명합니다.

HTML5와 CSS3만 이해하고 있다면, 지금 바로 반응형 웹 디자인을 작성할 수 있습니다.

■ 출판사 서평

반응형 웹 디자인을 신기술로 구축할 수 있는 좋은 지침서

그 어느 때보다 웹에 접근하는 스크린의 크기가 다양해짐에 따라 사용자 경험에 대한 여러 사항을 고려해야 합니다. 반응형으로 작성된 웹 페이지는 현재의 디바이스뿐만 아니라 미래에 등장할 디바이스에도 최적화된 콘텐츠를 제공할 수 있습니다.

큰 노력 없이도 웹사이트에 접근하는 모든 디바이스에 잘 표시되도록 해주는 “반응형과 모바일 우선” 원칙으로 웹 사이트를 구축하는 방법을 알려줍니다. 풍부한 예제와 최신 기술과 구문에 대한 완벽한 설명으로, 이 책은 “반응형 디자인”에 필요한 모든 자원을 제공해 줍니다.

반응형 웹 디자인 2판은 여러분의 프로젝트를 미래지향적으로 멋지게 만들어주는 반응형 디자인 구축에 필요한 가장 최신 기술과 도구를 다룹니다.

작가정보

저자(글) 벤 프레인

저자 벤 프레인(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)’이 있다.