해외주문/바로드림/제휴사주문/업체배송건의 경우 1+1 증정상품이 발송되지 않습니다.
패키지
북카드
키워드 Pick
키워드 Pick 안내
관심 키워드를 주제로 다른 연관 도서를 다양하게 찾아 볼 수 있는 서비스로, 클릭 시 관심 키워드를 주제로 한 다양한 책으로 이동할 수 있습니다.
키워드는 최근 많이 찾는 순으로 정렬됩니다.
작가정보
목차
- ▣ 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장: 부트스트랩으로 디자인하기
부트스트랩 디자인을 위한 사전 지식
- 사용자 정의 스타일시트
- 모바일 디자인의 기본 형태
- PHP 코드 사용하기
- 웹 서버 환경 만들기
index.php 파일 콘텐츠 만들기
- index.php 파일의 레이아웃
- 로고 영역 만들기
- 메뉴 바 만들기
- body 배경 색상 변경
- header 수정
- 메뉴 바의 배경 색상 변경
- 메뉴 바 수정
- 로그인 폼 추가하기
- 회원가입 폼 추가하기
- register.html 만들기
콘텐츠 영역
- 이미지 슬라이더 만들기
- 스타일시트 수정
- 세로형 슬라이더
- 썸네일 배너 만들기
푸터만들기
- 푸터의 레이아웃
- 푸터 상단 콘텐츠 입력하기
- 푸터 하단 콘텐츠 입력하기
- 푸터 스타일시트 수정
갤러리 페이지 만들기
- 갤러리 페이지의 레이아웃
- 갤러리 선택 메뉴 바
- 갤러리 썸네일
- 부트스트랩 이미지 갤러리 사용하기
- 페이지네이션
- 미디어 쿼리 사용하기
- index.php 수정하기
- 메이슨리(Masonry) 플러그인 사용하기
- 아이소톱(isotope) 플러그인 사용하기
- 무한 스크롤(Infinite Scroll) 플러그인 사용하기
이벤트 페이지 만들기
- Ei-Slider 플러그인
- 시퀀스 플러그인
블로그 페이지 만들기
- 블로그 레이아웃의 문제점
- 패딩이 없는 블로그 페이지
- 콘텐츠 입력하기
- 파일의 수정
- 글 페이지 만들기
- 사이드바 만들기
다양한 레이아웃의 변경
- 콘텐츠 영역과 사이드바 영역에 패딩 추가하기
- 콘텐츠와 사이드바 전체에 패딩 적용하기
- 콘텐츠 영역과 사이드바 영역을 같은 높이로 만들기
- 칼럼이 3개인 레이아웃
- 글 목록 페이지에 무한 스크롤 플러그인 적용하기
- 사이드바 콘텐츠 만들기
계정 설정 페이지 만들기
- sidebar-content.php 파일 만들기
- 레이아웃 만들기
- 폼 빌더
- 선택박스
- 선택박스 플러그인 추가하기
- 입력 박스
- 여러 가지 폼 만들기
- 선택 박스와 체크 박스
- 라디오 버튼과 체크 박스
- 툴팁과 collapse 기능 추가
- 여러 개의 입력 박스
- 저장하기 버튼
- 메시지 박스 만들기
상품 상세 페이지 만들기
- 블로그 레이아웃의 정리
- 상품 상세 페이지 레이아웃 수정
- 이미지 줌 플러그인 사용하기
- 옵션 영역
- 평가 및 공유 버튼
- 탭 영역
- 인터넷 익스플로러를 위한 스타일시트 수정하기
▣ 04장: 부트스트랩 3.0
(4장 내용은 martian36.tistory.com에서 pdf 파일로 제공됩니다.)
시작 페이지
CSS
- 헤딩
- p 태그
- 목록(List)
- 그리드 시스템
- 네스팅 칼럼
- 폼(Form)
- 버튼
- 이미지
- 아이콘
구성요소
- 드롭다운 메뉴
- 전체폭 버튼 그룹
- 탭, 필, 리스트
- 내비게이션 바
- 반응형 내비게이션 바
- 페이지네이션
- 라벨
- 배지
- 글자 구성요소(Typographic components)
- 썸네일
- 프로그레스 바
자바스크립트
- 모달
- 캐러젤
부트스트랩 3.0으로 디자인 수정하기
책 속으로
트위터 부트스트랩을 접하고 나서는 놀라움의 연속이었습니다. 시험 삼아 제 블로그를 부트스트랩으로 만들어 봤는데, 기본적인 레이아웃과 요소를 배치하고 대략적인 블로그 스킨이 만들어지는 데 하루밖에 걸리지 않았습니다. 보통의 스타일시트를 사용했다면 3일은 족히 걸리는 일이었죠. 그 이후로는 항상 부트스트랩을 사용해서 디자인합니다. 부트스트랩에서는 디자인이 정형화돼 있어 부트스트랩으로 만든 사이트라는 티가 나지 않도록 여러 가지 변형을 가하기도 합니다.
부트스트랩은 웹 페이지에 사용되는 모든 요소에 대해 스타일시트를 미리 만들어 놓았기 때문에 필요한 라이브러리를 찾아다닐 필요가 없습니다. 적절한 라이브러리가 없으면 기본 스타일시트를 응용해 새롭게 만들 수 있을 만큼 스타일 변경도 자유롭습니다. 더구나 부트스트랩과 관련된 프로젝트가 거의 매일 하나씩 생기고 있어 다양한 프로젝트를 통해 웹사이트를 제작하는 데 드는 시간을 크게 줄일 수 있습니다.
부트스트랩의 장점 중 하나는 반응형 웹디자인이 쉽게 만들어진다는 점입니다. 버전 2.0부터는 반응형 웹디자인이 가능하게끔 별도의 스타일시트 파일을 추가했는데, 앞으로 나올 3.0에서는 반응형 웹디자인이 우선적으로 적용되게 해서 반응형 웹디자인이 기본이 되고 두 개로 나뉜 스타일시트는 하나로 통합됩니다. 모바일이 인터넷을 주도할 전망이므로 향후 인터넷 접속은 데스크톱보다는 주로 스마트폰, 태블릿 PC로 이뤄질 것이고 이들 기기를 위한 디자인이 활성화될 것입니다.
부트스트랩은 하나의 도구일 뿐입니다. 부트스트랩을 이용하는 목적은 웹디자인을 쉽고 빠르게 하기 위한 것입니다. 부트스트랩으로 디자인할 때 사용자 스타일을 적용하지 않고 그대로 사용한다면 말 그대로 공장에서 찍어낸 디자인밖에 안 됩니다. 뼈대는 부트스트랩을 이용하되 모양은 자신만의 스타일로 만들어야 합니다. 이는 웹디자이너 각자의 역량에 달려 있습니다.
- 저자 서문 중에서
출판사 서평
웹 개발자와 디자이너를 위한 정말 쉬운 웹 디자인 프레임워크 부트스트랩!
트위터 개발자들이 내놓은 오픈소스 프레임워크인 부트스트랩은 발표 이후 깃허브에서 최고의 인기를 누리고 있으며, 관련 프로젝트만 해도 수백 개에 이르고 계속 추가되는 추세입니다. 부트스트랩에는 웹사이트에 사용되는 모든 요소에 대해 스타일시트가 미리 만들어져 있어 어떤 스타일시트를 어떻게 만들어야 할지 고민할 필요가 없습니다. 선택자만 삽입해도 멋진 디자인이 간단하게 만들어지고 스타일을 세부적으로 조정하려면 몇 줄의 사용자 스타일시트만 추가하면 됩니다.
아울러 이 책에서는 웹디자인에 필요한 부트스트랩의 모든 내용과 함께 군더더기 없는 스타일시트를 만들기 위한 Less 프리프로세서와 부트스트랩을 이용한 실제 디자인 사례를 상세하게 설명합니다. 또한 곧 발표될 부트스트랩 3.0 버전에 대한 내용도 PDF로 제공하고 있습니다. 직관적이고 강력한 프론트엔드 프레임워크인 부트스트랩을 이용해 웹 개발 프로젝트에 날개를 달아보세요!
[소스코드 다운로드 & 북카페]
이 책의 변경사항이나 업데이트 내용, 부트스트랩 3.0 정식 버전에서 변경된 내용 등 부트스트랩과 관련된 내용은 아래 블로그에 꾸준히 업데이트될 예정입니다. 또한 책 내용에 오류가 있거나 질문사항이 있으면 아래 블로그의 방명록이나 부트스트랩 관련 글에 댓글을 남겨주시면 답변 드리겠습니다.
▣ 블로그 주소: http://martian36.tistory.com/1134
기본정보
ISBN | 9788998139216 | ||
---|---|---|---|
발행(출시)일자 | 2013년 04월 03일 | ||
쪽수 | 432쪽 | ||
크기 |
188 * 240
mm
|
||
총권수 | 1권 | ||
시리즈명 |
위키북스 오픈소스 웹 시리즈
|
Klover
e교환권은 적립 일로부터 180일 동안 사용 가능합니다.
리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 리뷰 종류별로 구매한 아이디당 한 상품에 최초 1회 작성 건들에 대해서만 제공됩니다.
판매가 1,000원 미만 도서의 경우 리워드 지급 대상에서 제외됩니다.
일부 타인의 권리를 침해하거나 불편을 끼치는 것을 방지하기 위해 아래에 해당하는 Klover 리뷰는 별도의 통보 없이 삭제될 수 있습니다.
- 도서나 타인에 대해 근거 없이 비방을 하거나 타인의 명예를 훼손할 수 있는 리뷰
- 도서와 무관한 내용의 리뷰
- 인신공격이나 욕설, 비속어, 혐오발언이 개재된 리뷰
- 의성어나 의태어 등 내용의 의미가 없는 리뷰
리뷰는 1인이 중복으로 작성하실 수는 있지만, 평점계산은 가장 최근에 남긴 1건의 리뷰만 반영됩니다.
구매 후 리뷰 작성 시, e교환권 200원 적립
문장수집
e교환권은 적립 일로부터 180일 동안 사용 가능합니다. 리워드는 작성 후 다음 날 제공되며, 발송 전 작성 시 발송 완료 후 익일 제공됩니다.
리워드는 한 상품에 최초 1회만 제공됩니다.
주문취소/반품/절판/품절 시 리워드 대상에서 제외됩니다.
구매 후 리뷰 작성 시, e교환권 100원 적립