홈앤서비스 SK BROADBAND

부트스트랩을 이용해서 요즘 유행하는 싱글 페이지 웹사이트를 디자인해 보고 부트스트랩의 여러 기능을 이용해서 기존에 있던 사이트들을 부트스트랩을 이용하여 재코딩하여 디자인해 봄으로써, 부트스트랩이 얼마나 편리하게 사용될 수 있는지를 깨닫고 배울 수 있는 실무형 책이다. 부트스트랩의 기초지식도 전반부에 자세하게 다루기 때문에 HTML5와 CSS3에 익숙한 독자라면 웹 디자이너로서 한 단계 성장할 수 있는 계기가 될 것이다.

_대상 독자
“CSS 스타일링이 너무 번거롭고 어렵고 오래 걸려요?”
“반응형 웹사이트까지 고려해야 하니 죽을 맛입니다.”
“창의적 디자인요? 그럴 시간이 어디 있어요?”
“담당자가 바뀌면 웹 디자인 고치기도 힘들어요.”

1부. 부트스트랩 개발 환경 구축과 구조의 이해

1장_부트스트랩 소개와 사용 방법
1.1부트스트랩을 설치해보자
1.2 부트스트랩을 이용하여 Hello World 출력하기
1.3 기본적인 반응형 웹 페이지 예제
1.4 써드파티(Third Party) 지원

2장_부트스트랩에서 사용하는 CSS
2.1 부트스트랩 레이아웃의 핵심 그리드 시스템 (중요)
2.2 타이포그래피
2.3 코드와 테이블
2.4 폼
2.5 버튼과 이미지 그리고 헬퍼 클래스

3장_예제로 배우는 컴포넌트
3.1 특수문자 전용 글꼴 처리: Glyphicons
3.2 드롭다운
3.3 버튼그룹
3.4 버튼 드롭다운
3.5 입력그룹
3.6 내비게이션
3.7 내비게이션 바 (중요)
3.8 경로와 페이지네이션
3.9 라벨과 배지
3.10 점보트론과 페이지 제목
3.11 썸네일
3.12 경보와 진행바
3.13 미디어 객체, 목록그룹, 패널, Wells

4장_부트스트랩의 자바스크립트
4.1 개요
4.2 모달
4.3 드롭다운
4.4 스크롤 스파이
4.5 토글되는 탭
4.6 툴팁
4.7 팝오버
4.8 경보
4.9 버튼
4.10 컬랩스
4.11 캐러셀
4.12 Affix 효과

2부. 부트스트랩을 이용한 사이트 제작

5장_ 싱글 페이지 웹사이트 제작
5.1 디자인 레이아웃 구성하기
5.2 사이트 제작 - 내비게이션 바
5.3 사이트 제작 - 캐러셀과 아이콘
5.4 사이트 제작 - About 부분
5.5 사이트 제작 - Portfolio 부분
5.6 사이트 제작 - Contact와 Footer 부분
5.7 사이트제작 - 특수 효과

6장_ 부트스트랩을 이용한 반응형 웹 페이지 쾌속 개발
6.1 영수증 폼 만들기
6.2 스크롤에 따라 변화하는 메인 메뉴
6.3 실제 사이트를 부트스트랩으로 변경해서 만들어 보자
6.4 실제 사이트를 만들어 보자 2
6.5 기본으로 제공되는 캐러셀 효과 변형하기
6.6 부트스트랩을 이용한 쇼핑몰 프론트 페이지 만들기