01장: 부트스트랩 기초
부트스트랩이란?
- 스타일시트의 재활용
- 부트스트랩이 발생한 배경
- 웹 디자인 프레임워크
- 부트스트랩의 특징
- 이 책을 위해 필요한 도구
부트스트랩 사용 환경 만들기
- 부트스트랩 파일 내려받기
- 폰트 어썸 폰트 아이콘 파일 내려받기
- index.html, style.css 파일 만들기
- 자바스크립트 첨부하기
구조(Scaffolding)
- 부트스트랩의 독타입(DOCTYPE)
- 그리드 시스템
- 고정폭 레이아웃 - 3칼럼
- 고정폭 레이아웃 - 2칼럼
- 칼럼 오프셋
- 칼럼 네스팅(Column Nesting)
- 유동폭 레이아웃
- 반응형 디자인
기본 CSS(Basic CSS)
- 글자
- 생략과 약어
- 인용(blockquote)
- 목록(List)
- [dl], [dt], [dd] 태그
- 코드
- 테이블(table)
- 폼(form)
- 버튼
- 이미지
- 아이콘
구성요소(Components)
- 드롭다운 메뉴
- 버튼
- 내비게이션 탭, 필(Pill), 리스트
- 내비게이션 바
- 브레드크럼(Breadcrumb)
- 페이지네이션(Pagination)
- 라벨과 배지
- 타이포그래픽 구성요소
- 썸네일
- 알림 메시지(Alerts)
- 프로그레스 바(Progress Bar)
- 미디어 오브젝트(Media Object)
- 기타
자바스크립트
- 모달(Modal)
- 드롭다운
- 스크롤스파이(Scrollspy)
- 탭
- 툴팁(Tooltip)
- 팝오버(Popover)
- 버튼
- 콜랩스(Collapse, 함몰) ? 어코디언
- 캐러젤(Carousel)
- 타이프 어헤드(Typeahead)
- 어픽스(Affix)
부트스트랩 사용자 정의(Customize)- -
02장: CSS 프리프로세서 사용하기(Less)
프리프로세서란?
Less 사용을 위한 환경 만들기
- Less 사용하기
- SimpLESS
- SimpLESS 설치하기
- SimpLESS의 기능
- 변수(Variables)
Less를 이용한 메뉴 바 만들기
- 내포 규칙(Nested Rules)
- 믹신(Mixins)
- 연산(Operations)
- 매개변수 믹신(Parametric Mixins)
- 믹신과 @arguments
함수와 믹신
- 함수(Functions)
- 패턴 매칭(Pattern Matching)
- 가드 믹신(Guarded Mixins)
기타 기능
- Less 파일 가져오기(@import)
- 스트링 인터폴레이션(String Interpolation: 보간법)
- 네임스페이스(Namespaces)
- 유효범위(Scope)
- 앰퍼샌드(& : Ampersand)
03장: 부트스트랩으로 디자인하기
부트스트랩 디자인을 위한 사전 지식
- 사용자 정의 스타일... 01장: 부트스트랩 기초
부트스트랩이란?
- 스타일시트의 재활용
- 부트스트랩이 발생한 배경
- 웹 디자인 프레임워크
- 부트스트랩의 특징
- 이 책을 위해 필요한 도구
부트스트랩 사용 환경 만들기
- 부트스트랩 파일 내려받기
- 폰트 어썸 폰트 아이콘 파일 내려받기
- index.html, style.css 파일 만들기
- 자바스크립트 첨부하기
구조(Scaffolding)
- 부트스트랩의 독타입(DOCTYPE)
- 그리드 시스템
- 고정폭 레이아웃 - 3칼럼
- 고정폭 레이아웃 - 2칼럼
- 칼럼 오프셋
- 칼럼 네스팅(Column Nesting)
- 유동폭 레이아웃
- 반응형 디자인
기본 CSS(Basic CSS)
- 글자
- 생략과 약어
- 인용(blockquote)
- 목록(List)
- [dl], [dt], [dd] 태그
- 코드
- 테이블(table)
- 폼(form)
- 버튼
- 이미지
- 아이콘
구성요소(Components)
- 드롭다운 메뉴
- 버튼
- 내비게이션 탭, 필(Pill), 리스트
- 내비게이션 바
- 브레드크럼(Breadcrumb)
- 페이지네이션(Pagination)
- 라벨과 배지
- 타이포그래픽 구성요소
- 썸네일
- 알림 메시지(Alerts)
- 프로그레스 바(Progress Bar)
- 미디어 오브젝트(Media Object)
- 기타
자바스크립트
- 모달(Modal)
- 드롭다운
- 스크롤스파이(Scrollspy)
- 탭
- 툴팁(Tooltip)
- 팝오버(Popover)
- 버튼
- 콜랩스(Collapse, 함몰) ? 어코디언
- 캐러젤(Carousel)
- 타이프 어헤드(Typeahead)
- 어픽스(Affix)
부트스트랩 사용자 정의(Customize)
04장: 부트스트랩 3.0
(4장 내용은 http://martian36.tistory.com/1134에서 pdf 파일로 제공됩니다.)
시작 페이지
CSS
- 헤딩
- p 태그
- 목록(List)
- 그리드 시스템
- 네스팅 칼럼
- 폼(Form)
- 버튼
- 이미지
- 아이콘
구성요소
- 드롭다운 메뉴
- 전체폭 버튼 그룹
- 탭, 필, 리스트
- 내비게이션 바
- 반응형 내비게이션 바
- 페이지네이션
- 라벨
- 배지
- 글자 구성요소(Typographic components)
- 썸네일
- 프로그레스 바
자바스크립트
- 모달
- 캐러젤
부트스트랩 3.0으로 디자인 수정하기
