실전 예제로 배우는 반응형 웹 디자인

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 구조적 선택자 소개
홈페이지
실습 예제 | 홈페이지 스타일 추가
서비스 페이지
실습 예제 | 서비스 페이지 스타일 추가
가격 페이지
실습 예제 | 가격 페이지 스타일 추가
소개 페이지와 연락처 페이지
실습 예제 | 소개 페이지와 연락처 페이지에 스타일 추가
실습 예제 | 웹사이트 작성 마무리
웹사이트 테스트
요약