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