★ 요약 ★ 반응형 웹 디자인은 다양한 크기와 해상도의 디바이스가 증가함에 따라 폭발적으로 성장하고 있는 최신 웹 개발 분야이다. 이 책에서는 실전 예제를 통해 가장 인기 있고 강력한 세 가지 반응형 프레임워크(부트스트랩(Bootstrap), 스켈레톤(Skeleton), 저브 파운데이션(ZURB Foundation))를 설명한다. 또한 궁극적으로 어떤 프레임워크가 프로젝트에 적합하며, 요구사항에 맞게 각각의 프레임워크를 어떻게 효율적으로 사용하고 커스터마이즈 할 수 있는지 이해할 수 있다. 이 책은 이러한 반응형 프레임워크를 통해 프론트 엔드 개발자들이 실제 반응형 웹 사이트를 쉽고 빠르게 구축할 수 있도록 도움을 줄 것이다. ★ 이 책에서 다루는 내용 ★ ■ 오늘날 가장 강력한 세 가지 반응형 프레임워크인 부트스트랩(Bootstrap), 스켈레톤(Skeleton), 저브 파운데이션(ZURB Foundation) 설명 ■ 프로젝트에 적합한 반응형 프레임워크를 결정하는 방법 ■ 부트스트랩으로 손쉽게 멋진 제품 출시 페이지 구축 ■ 스켈레톤의 유연성을 활용해 독특한 포트폴리오 구축 ■ 저브 파운데이션으로 모든 디바이스에서 동작하는 온라인 비즈니스 사이트 구축 ■ CSS의 잠재력을 최대한 활용해 반응형 웹사이트를 개선하는 방법 ★ 이 책의 대상 독자 ★ 이 책은 HTML과 CSS에 대해 잘 알고 있으면서, 자신의 기술을 확장하여 모든 스크린 크기에 잘 맞는 반응형 웹사이트를 개발하려는 초보자들을 대상으로 한다. ★ 이 책의 구성 ★ 1장, ‘반응형 웹 디자인’은 반응형 웹 디자인의 기초와 이를 구축하는 데 필요한 개발 도구를 알아보고, 반응형 웹사이트의 좋은 예들을 살펴본다. 2장, ‘스켈레톤으로 반응형 포트폴리오 페이지 구축’은 반응형 그리드 사용법에 대해 설명하고, HTML5로 웹 페이지를 구성하여 첫 번째 프로젝트를 시작한다. 3장, ‘CSS3로 포트폴리오 웹사이트 향상시키기’는 트랜스폼과 트랜지션 같은 CSS3의 몇 가지 기능을 소개하고, 이들 기능으로 반응형 포트폴리오 웹사이트를 향상시키는 방법을 설명한다. 4장, ‘부트스트랩으로 제품 출시 사이트 개발’은 부트스트랩 프레임워크를 소개하고, 반응형 웹사이트를 구축하는 데 필요한 컴포넌트들를 알아본다. 5장, ‘CSS3와 LESS로 제품 출시 사이트 향상시키기’는 CSS3를 작성하는 LESS 함수를 설명하고 이 함수들로 어떻게 반응형 제품 출시 사이트를 유지보수가 쉬우면서도 멋져 보이게 만들 수 있는지 알아본다. 6장, ‘파운데이션 프레임워크로 반응형 비즈니스 웹사이트 구축’은 파운데이션 프레임워크를 소개하고 주요 기능을 알아본다. 또한 비즈니스 목적의 반응형 웹사이트를 구축하는 세 번째 프로젝트를 시작한다. 7장, ‘파운데이션 확장’은 CSS 전처리기인 Sass와 SCSS, 컴파스에 대해 알아본다. 그리고 파운데이션 프레임워크 변수로 웹사이트의 모양을 확장하는 방법을 설명한다.

1장 반응형 웹 디자인 반응형 웹 디자인의 기본 __뷰포트 메타 태그와 CSS3 미디어 쿼리 반응형 디자인의 한계 __picture 요소로 반응형 이미지 만들기 HTML5와 CSS3의 이해 반응형 웹 디자인 프레임워크 소개 __왜 프레임워크를 사용하는가? ____스켈레톤 ____부트스트랩 ____파운데이션 __누가 반응형 프레임워크를 사용하는가? ____하이브마인드 ____Living.js ____스위즐 __단점 반응형 웹사이트 구축에 필요한 도구들 __웹 브라우저 __코드 편집기 __반응형 북마클릿 CSS 전처리기 소개 __CSS 전처리기 컴파일러 도구 __LESS ____중첩 규칙 ____변수 ____믹스인 ____파라메트릭 믹스인 ____연산 __Sass ____변수 ____믹스인 ____중첩 규칙 ____선택자 상속 CSS 전처리기에 대한 추가 학습 __LESS 학습 __Sass 학습 이 책을 통해 무엇을 제작하려고 하는가? 정리 2장__스켈레톤으로 반응형 포트폴리오 페이지 구축 스켈레톤 시작 실습 예제 | 작업 디렉토리 생성과 스켈레톤 설치하기 스켈레톤 내용 살펴보기 __HTML 시작 문서 ____뷰포트 메타 태그 ____HTML5 심 __반응형 그리드 __스타일 삭제 __미디어쿼리 __타이포그래피 스타일 __버튼 스타일 __폼 스타일 __애플 아이콘 장치 __포토샵 템플릿 웹사이트 구성 __웹사이트 내비게이션 __썸네일 호버 효과 스켈레톤 문서 설정 실습 예제 | CSS 파일 추가 사용자정의 폰트 추가 실습 예제 | 구글 웹 폰트 사용하기 이미지 준비 __소셜 미디어 아이콘 실습 예제 | 스프라이트 이미지 __연락처 아이콘 HTML5 요소 HTML5 사용자정의 데이터 속성 실습 예제 | HTML 문서 구조화 정리 3장__CSS3로 포트폴리오 웹사이트 향상시키기 CSS 박스 모델 __CSS3 box-sizing 속성 소개 실습 예제 | box-sizing 지정 CSS 측정 단위 __픽셀 단위_ ____고 DPI 스크린에서의 픽셀 단위 __em 단위 ____px을 em으로 전환하기 ____em 단위의 수동 계산 ____브라우저에서 em 단위를 처리하는 차이 __퍼센트 단위 폰트 패밀리 설정 실습 예제 | 헤딩 폰트 패밀리 설정 헤더 스타일 실습 예제 | 헤더 스타일 추가 CSS3 선택자 사용 __직접 자식 선택자 __인접한 형제 선택자 __일반적인 형제 선택자 CSS3 의사 클래스 __CSS3 체크 의사 클래스 __CSS3 nth-child 의사 클래스 포트폴리오 썸네일과 캡션의 스타일 실습 예제 | 썸네일과 캡션의 스타일 추가 CSS3 2D 트랜스폼 __translate() 함수 ____벤더 프리픽스 __CSS3 트랜지션 ____CSS3 트랜지션 값 실습 예제 | 썸네일 호버 효과 만들기 웹사이트 내비게이션을 통한 포트폴리오 필터링 실습 예제 | 포트폴리오 필터 만들기 푸터 영역 실습 예제 | 푸터 영역에 스타일 추가 작은 뷰포트를 위한 웹사이트 스타일 조정 은 뷰포트를 위한 웹사이트 스타일 조정 실습 예제 | 960픽셀보다 작은 뷰포트 크기 실습 예제 | 767픽셀과 480픽셀 사이의 뷰포트 크기 실습 예제 | 480픽셀보다 작은 뷰포트 크기 다양한 뷰포트 크기에서 웹사이트를 테스트 다양한 뷰포트 크기에서 웹사이트를 테스트 정리 4장__부트스트랩으로 제품 출시 사이트 개발 부트스트랩 시작하기 실습 예제 | 부트스트랩 설정 웹사이트에 사용할 이미지 준비 LESS 애플리케이션 소개 실습 예제 | 크런치앱 설치 __새로운 LESS 파일 생성하기 실습 예제 | 크런치앱으로 새로운 LESS 파일 생성하기 __LESS 구문을 표준 CSS로 컴파일 실습 예제 | 크런치앱에 LESS 파일 추가하고 표준 CSS로 컴파일하기 사용자 폰트 패밀리 추가를 위한 @font-face 규칙 소개 __무료 사용 가능한 임베딩 폰트 __@font-face 규칙 작성 __크로스 브라우저 호환을 위한 폰트 포맷 실습 예제 | @face-font로 새로운 폰트 추가하기 부트스트랩의 반응형 기능 __부트스트랩 그리드 시스템 __부트스트랩에서의 CSS3 미디어쿼리 실습 예제 | CSS3 미디어쿼리를 저장할 새로운 LESS 파일 생성 __부트스트랩으로 내비게이션 만들기 HTML 문서 작성 실습 예제 | 기본 HTML5 문서 작성 __홈페이지 콘텐츠 실습 예제 | 홈페이지의 HTML 콘텐츠 구조 추가 ____HTML5 플레이스홀더 속성 ____HTML5의 새로운 입력 타입 __갤러리 페이지 콘텐츠 작성 실습 예제 | 갤러리 페이지에 HTML 콘텐츠 구조 추가 __문의 페이지 콘텐츠 작성 실습 예제 | 문의 페이지에 HTML 구조 추가 __어바웃 페이지 콘텐츠 작성 실습 예제 | 어바웃 페이지에 HTML 콘텐츠 구조 추가 __정책 페이지 실습 예제 | 개인정보보호와 정책 페이지의 HTML 콘텐츠 구조 추가 정리 5장__CSS3와 LESS로 제품 출시 사이트 향상시키기 LESS 사용자정의 변수 실습 예제 | 사용자정의 변수 설정 사용자정의 LESS 믹스인 실습 예제 | 사용자정의 LESS 믹스인 정의 LESS 색상 함수 범위 개념 소개 일반 스타일 규칙 실습 예제 | 일반 스타일 규칙 추가 __벤더 프리픽스 제거 버튼 스타일 실습 예제 | 부트스트랩의 버튼 스타일 재정의 왜 버튼이 이렇게 큰가? 헤더 스타일 실습 예제 | 웹사이트 헤더 스타일 추가 푸터 스타일 실습 예제 | 푸터 스타일 추가 홈페이지 작업 __히어로 영역 실습 예제 | 히어로 영역에 스타일 추가 __콜투액션 영역 실습 예제 | 콜투액션 영역에 스타일 추가 __갤러리 영역 실습 예제 | 갤러리 영역 스타일 추가 __추천 영역 실습 예제 | 추천 영역 스타일 추가 __구독 폼 실습 예제 | 이메일 입력 스타일 추가 갤러리 페이지 실습 예제 | 페이지 제목 스타일 조정 연락 페이지 실습 예제 | 연락 페이지 스타일 추가 어바웃 페이지 개인정보보호 정책 페이지 웹사이트를 반응형으로 만들기 실습 예제 | 767px 이하 뷰포트 크기의 웹사이트 향상시키기 실습 예제 | 480px 이하 뷰포트 크기에 대한 웹사이트 향상시키기 불필요한 스타일 규칙의 제외 웹사이트 테스트 정리 6장__파운데이션 프레임워크로 반응형 비즈니스 웹사이트 구축 루비 기반 프레임워크 파운데이션 젬 실습 예제 | 파운데이션 프레임워크 설치와 새로운 프로젝트 설정 Sass와 SCSS 구문 __Sass와 SCSS 코드 편집기 실습 예제 | 서브라임 텍스트를 설치하고 SCSS 구문을 하이라이트시키기 SCSS 스타일시트 사용자정의 실습 예제 | 유지보수를 위해 새로운 SCSS 스타일시트 만들기 컴퍼스 소개 __컴퍼스 헬퍼 함수 __컴퍼스 프로젝트 설정 실습 예제 | config.rb로 프로젝트 경로 설정 SCSS를 CSS로 컴파일하기 실습 예제 | SCSS 스타일시트 변경 감시 웹사이트 이미지 준비 파운데이션 프레임워크 컴포넌트 __그리드 __CSS3 미디어쿼리 __사용자 인터페이스 스타일 __오빗 HTML 문서 작성 __기본 HTML 문서 실습 예제 | 기본 HTML 문서 구성 __웹사이트 홈페이지 실습 예제 | 홈페이지 콘텐츠 구성 __서비스 페이지 실습 예제 | 서비스 페이지 콘텐츠 마크업 작성 __가격 페이지 실습 예제 | 가격 페이지 콘텐츠 마크업 작성 __회사소개 페이지 실습 예제 | 회사소개 페이지 콘텐츠 마크업 작성 __연락처 페이지 실습 예제 | 연락처 페이지 작성 정리 7장__파운데이션 확장 프로젝트 모니터링 실습 예제 | 커맨드 라인 명령으로 프로젝트 모니터링하기 Sass 색상 함수 소개 Sass 변수 실습 예제 | 파운데이션 프레임워크 Sass 색상 변수를 사용자정의하기 사용자정의 폰트 패밀리 __컴퍼스 폰트 페이스 믹스인 실습 예제 | 컴퍼스 믹스인으로 사용자정의 폰트 패밀리 추가 웹사이트 내비게이션 실습 예제 | 헤더 영역 스타일링 컴퍼스 스프라이트 헬퍼 소개 웹사이트 푸터 영역 실습 예제 | 푸터 영역에 스타일 추가 CSS3 구조적 선택자 소개 홈페이지 실습 예제 | 홈페이지 스타일 추가 서비스 페이지 실습 예제 | 서비스 페이지 스타일 추가 가격 페이지 실습 예제 | 가격 페이지 스타일 추가 소개 페이지와 연락처 페이지 실습 예제 | 소개 페이지와 연락처 페이지에 스타일 추가 실습 예제 | 웹사이트 작성 마무리 웹사이트 테스트 요약

★ 저자 서문 ★ 반응형 웹 디자인은 소비자가 선택할 수 있는 다양한 크기와 해상도의 디바이스가 증가함에 따라 폭발적으로 성장하고 있는 최신 웹 개발 분야다. 이제 인터넷에 접속하는 모든 디바이스에서 잘 동작하는 자신의 웹사이트를 제작하는 방법을 배울 수 있다. 이 책은 실전 예제를 통해 전 세계 전문가들이 사용하고 있는 주요 반응형 프레임워크(부트스트랩과 스켈레톤, 저브 파운데이션)를 설명한다. 궁극적으로 어떤 프레임워크가 프로젝트에 적합하며, 또한 요구사항에 맞게 각각의 프레임워크를 어떻게 효율적으로 사용하고 커스터마이즈 할 수 있는지 이해하게 될 것이다. ★ 옮긴이의 말 ★ 에이콘 출판사와의 인연으로 ‘반응형 웹 디자인(HTML5와 CSS3로 작성하는)’이라는 좋은 책을 만난 것이 정확히 2년 전의 일이었다. 처음 반응형 웹 디자인에 대한 책을 펴냈을 때만 해도 반응형 웹 디자인은 국내에서 익숙한 용어가 아니었으며 관련 자료도 많지 않은 실정이었다. 그사이 관련 책도 많이 출간되었고, 국내에서도 반응형 웹 디자인을 적용한 웹사이트들이 많이 늘어났다. 또한 책을 읽은 독자들로부터 책을 통해 반응형 웹 디자인이 무엇인지에 대한 궁금증을 해소할 수 있었다는 감사의 말씀도 많이 전해 들었다. 하지만 여전히 반응형 웹 디자인으로 웹사이트를 구축하는데 있어 많은 개발자들이 어려움을 겪고 있는 것이 현실이다. 그런 의미에서 만 2년 만에 다시 접하게 된 이 책은 많은 프론트 엔드 개발자들이 현실적으로 당면하고 있는 구현 문제를 해결하는 데 큰 도움이 될 것으로 기대한다. 실제 웹사이트 구축에 바로 적용할 수 있는 다양한 예제와 충분한 설명, 그리고 이 책에서 소개하고 있는 가장 인기 있고 강력한 세 가지 반응형 프레임워크(부트스트랩과 스켈레톤, 저브 파운데이션)를 활용하면 누구나 쉽고 빠르게 반응형 웹 사이트를 구축할 수 있을 것이라고 확신한다.