HOME > Detail View

Detail View

부트스트랩 사이트 디자인 : 원페이지 사이트를 구축하는 가장 신속하고 효과적인 방법 (Loan 6 times)

Material type
단행본
Personal Author
Cochran, David, 1961- Whitley, Ian, 저 김완섭, 역
Title Statement
부트스트랩 사이트 디자인 : 원페이지 사이트를 구축하는 가장 신속하고 효과적인 방법 / 데이비드 코크란, 이안 휘틀리 지음 ; 김완섭 옮김
Publication, Distribution, etc
부천 :   프리렉,   2014  
Physical Medium
352 p. : 삽화 ; 25 cm
Varied Title
Bootstrap site blueprints : design mobile-first responsive websites with Bootstrap 3
ISBN
9788965400868
General Note
색인수록  
부록: A. 사이트 에셋 최적화하기, B. 반응형 이미지 구현하기, C. 캐러셀에 밀기(Swipe) 기능 추가하기  
000 00000cam c2200205 c 4500
001 000045878756
005 20160816120555
007 ta
008 160816s2014 ggka 001c kor
020 ▼a 9788965400868 ▼g 13000
035 ▼a (KERIS)BIB000013630892
040 ▼a 221031 ▼c 221031 ▼d 221031 ▼d 211009
041 1 ▼a kor ▼h eng
082 0 4 ▼a 005.72 ▼2 23
085 ▼a 005.72 ▼2 DDCK
090 ▼a 005.72 ▼b 2014z3
100 1 ▼a Cochran, David, ▼d 1961-
245 1 0 ▼a 부트스트랩 사이트 디자인 : ▼b 원페이지 사이트를 구축하는 가장 신속하고 효과적인 방법 / ▼d 데이비드 코크란, ▼e 이안 휘틀리 지음 ; ▼e 김완섭 옮김
246 1 9 ▼a Bootstrap site blueprints : ▼b design mobile-first responsive websites with Bootstrap 3
260 ▼a 부천 : ▼b 프리렉, ▼c 2014
300 ▼a 352 p. : ▼b 삽화 ; ▼c 25 cm
500 ▼a 색인수록
500 ▼a 부록: A. 사이트 에셋 최적화하기, B. 반응형 이미지 구현하기, C. 캐러셀에 밀기(Swipe) 기능 추가하기
700 1 ▼a Whitley, Ian, ▼e
700 1 ▼a 김완섭, ▼e
900 1 0 ▼a 코크란, 데이비드, ▼e
900 1 0 ▼a 휘틀리, 이안, ▼e
945 ▼a KLPA

Holdings Information

No. Location Call Number Accession No. Availability Due Date Make a Reservation Service
No. 1 Location Science & Engineering Library/Sci-Info(Stacks1)/ Call Number 005.72 2014z3 Accession No. 121237417 Availability Available Due Date Make a Reservation Service B M

Contents information

Book Introduction

부트스트랩 최신 기술과 핵심 개발 구조를 실제 사용 가능한 예제를 통해 체험할 수 있도록 안내한다. 따라 하기 쉬운 단계별 설명을 통해 포트폴리오 사이트, 워드프레스(WordPress) 테마, 비즈니스 사이트, 전자 상거래 인터페이스, 관리 인터페이스, 마케팅 사이트 등 다양한 형태의 사이트를 직접 구축해 본다. 이를 통해 실제 부트스트랩 사이트를 신속하고 효과적으로 디자인할 수 있도록 도움을 줄 것이다.

부트스트랩 3로 디자인하는 모바일 우선 반응형 웹사이트
이 책은 부트스트랩 최신 기술과 핵심 개발 구조를 실제 사용 가능한 예제를 통해 체험할 수 있도록 안내한다. 따라 하기 쉬운 단계별 설명을 통해 포트폴리오 사이트, 워드프레스(WordPress) 테마, 비즈니스 사이트, 전자 상거래 인터페이스, 관리 인터페이스, 마케팅 사이트 등 다양한 형태의 사이트를 직접 구축해 본다. 이를 통해 실제 부트스트랩 사이트를 신속하고 효과적으로 디자인할 수 있도록 도움을 줄 것이다.
실습을 통해 부트스트랩 LESS 파일 커스터마이징과 재컴파일의 위력을 경험할 수 있다. 또한, 부트스트랩용 자바스크립트 플러그인을 적용해서 훌륭한 사용자 인터페이스를 디자인할 수 있다. 다양한 레이아웃을 작성하는 동안 프로젝트 요구 사항에 부합하는 부트스트랩 커스터마이징 방식에 빠르게 익숙해질 수 있으며 사용자 지정 아이콘 추가, 부트스트랩 LESS 파일 커스터마이징과 재컴파일, 부트스트랩 자바스크립트 플러그인 적용 등을 통해 다이나믹한 사용자 인터페이스를 제작할 수 있다. 이 책을 다 읽어갈 때쯤이면 여러분은 능숙하고 효율적인 웹 디자이너가 되어 있을 것이다.

▶이 책의 구성
1장 ‘부트스트랩 시작하기’에선 부트스트랩 다운로드 방법과 HTML5 보일러플레이트(Boilerplate)를 이용한 사이트 템플릿 설치 방법에 대해 다룬다. 그리고 부트스트랩 LESS 파일을 CSS로 컴파일하는 방법을 배운다.

2장 ‘포트폴리오 부트스트랩 하기’에선 기본 포트폴리오 사이트 구축을 위한 전체 너비 캐러셀(Carousel), 3단 칼럼 구성 텍스트, 폰트 어썸(Font Awesome)을 이용한 SNS 아이콘 사용 방법에 대해 배운다. 이들 요소는 부트스트랩의 LESS 파일을 커스터마이징 하거나 독자적으로 제작해서 구현한다.

3장 ‘워드프레스(WordPress) 테마 부트스트랩 하기’에선 2장의 포트폴리오 디자인을 워드프레스 테마에 적용한다. 먼저 루트(Roots) 테마 사용법에 대해 배우고 템플릿 파일과 LESS, CSS, 자바스크립트를 요구 사항에 맞게 커스터마이징 한다.

4장 ‘비즈니스 부트스트랩 하기’에선 복잡한 배너 영역 제작 방법과 드롭다운(dropdown) 메뉴 및 유틸리티 내비게이션 추가 방법에 대해 배운다. 그리고 복잡한 3단 칼럼 페이지 레이아웃을 구축하고 4단 칼럼 푸터(footer)를 추가한다. 마지막으로 이 모든 요소들이 완벽하게 반응형으로 동작하도록 설정한다.

5장 ‘전자 상거래(E-commerce) 부트스트랩 하기’에선 복합 반응형 그리드 상에 여러 제품을 표시할 수 있는 제품 페이지를 디자인한다. 또한, 카테고리별, 브랜드별 등 제품을 필터할 수 있는 기능을 완전한 반응형 디자인으로 구현한다.

6장 ‘한 페이지 마케팅 웹 사이트 부트스트랩 하기’에선 스크롤을 이용하는 한 페이지 웹 사이트를 아름답게 디자인하는 방법을 배운다. 이 웹 사이트에는 큰 환영 메시지, 큰 아이콘과 함께 제품 특징을 기재한 그리드, masonry 레이아웃을 이용한 사용자 후기, 그리고 사용자 입장에서 디자인한 3가지 가격 테이블이 포함된다.

부록 A ‘사이트 에셋(assets) 최적화하기’에선 2장에서 만든 포트폴리오 사이트를 기반으로 부트스트랩 LESS/CSS와 자바스크립트를 최적화하기 위한 핵심 프로세스를 소개한다. 모든 부트스트랩 프로젝트에 적용할 수 있는 내용이다.

부록 B ‘반응형 이미지 구현하기’에선 2장에선 만든 포트폴리오 사이트의 캐러셀 최신 반응형 이미지 솔루션인 Picturefill 적용 방법을 배운다. 다양한 종류의 부트스트랩 프로젝트에 사용할 수 있는 솔루션이다

부록 C ‘캐러셀에 밀기(swipe) 기능 추가하기’에선 주목받고 있는 플러그인 중 하나인 Hammer.js 을 이용해서 부트스트랩 캐러셀에 밀기 기능을 추가하는 방법을 소개한다.

▶이 책의 특징
- 사용자 지정 부트스트랩 프로젝트 구축
- 부트스트랩 LESS 파일 커스터마이징과 재컴파일
- 사용자 지정 아이콘 폰트 적용
- 독자 LESS 변수와 믹스인 작성
- 부트스트랩 디자인을 워드프레스 테마로 변환
- 부트스트랩의 강력한 자바스크립트 플러그인 활용
- 외부 자바스크립트 플러그인을 디자인에 적용
- 부트스트랩 CSS와 자바스크립트 성능 최적화
- Picturefill을 이용한 반응형 이미지 구현
- 부트스트랩 캐러셀(Carousel)에 밀기(swipe) 기능 추가


Information Provided By: : Aladin

Author Introduction

데이비드 코크란(지은이)

오클라호마 웨슬리안 대학의 부교수이다. 2005년부터 인터랙티브 디자인을 강의하고 있다. 최적의 솔루션을 찾기 위한 열정을 가지고 지름길이 아닌 표준 웹 기술을 따라가고 있다. 트위터 부트스트랩의 첫 번째 버전이 출시됐을 때 최적의 솔루션을 빠르게 개발할 수 있도록 해주는 툴이라는 것을 인지했고 부트스트랩을 대학 교육 과정으로 가르치며 많은 학생에게 부트스트랩이 가진 이점을 알리고 있다. 2012년, webdesign.tutsplus.com을 통해 부트스트랩 2.0 튜토리얼을 공개했을 때 그의 첫 번째 책으로 ‘Twitter Bootstrap Web Development How-To’(Packt Publishing)라는 짧은 분량의 책을 출판했다. 여가 시간에는 웹 디자인 관련 블로그(alittlecode.com)를 운영하며 미디어, 디자인, 전략 관련 회사인 BitBrilliant의 사장이기도 하다.

이안 휘틀리(지은이)

이안은 어린 시절부터 책과 기사 집필에 대한 열정을 키웠다. 2010년 웹 개발에 관심을 가지기 시작했고 웹 개발 관련 일에 전념하기로 했다. 웹 개발 관련 책 집필을 도와달라는 부탁을 받았고 이는 거절할 수 없는 매우 좋은 제안이었다. 이안은 2011년 트위터 부트스트랩이 출시됐을 때 누구보다 빨리 이 기술을 익혔다. 데이비드의 도움으로, 빠르게 부트스트랩을 마스터했고 다양한 웹 프로젝트에 적용했다. 현재는 워드프레스와 부트스트랩을 조합해서 사용자 지향적이고 창의적인 솔루션을 제공하고 있다. 바틀즈빌(Bartlesville)에 살고 있으며 데이비드가 창업한 회사인 BitBrilliant에서 책임 개발자로 근무하고 있다. 항상 자신이 가진 기술을 더욱 발전시키기 위해 노력하며 이는 웹 개발 분야뿐만 아니라 가죽 공예나 집필 같은 취미도 포함한다.

김완섭(옮긴이)

네덜란드 ITC에서 Geoinformation for Disaster Risk Management 석사 학위를 취득했다. 약 9년간 일본과 한국의 기업에서 IT 및 GIS/LBS 분야 업무를 담당했으며, 일본에서는 세콤(SECOM) 계열사인 파스코(PASCO)에서 일본 외무부, 국토지리정보원 같은 정부기관을 대상으로 한 시스템 통합(SI) 업무를 담당했다. 이후 야후 재팬으로 직장을 옮겨 야후 맵 개발 담당 시니어 엔지니어로 근무했으며, 한국으로 돌아와 SK에서 내비게이션 지도 데이터 담당 매니저로 근무했다. 현재는 싱가포르에 있는 일본계 회사에서 은행 관련 IT 프로젝트를 담당하고 있다. 저서로는 《나는 도쿄 롯폰기로 출근한다》가 있으며, 역서로는 《알고리즘 도감》, 《처음 만나는 HTML5 & CSS3》, 《인공지능 70》, 《처음 만나는 자바스크립트》, 《다양한 언어로 배우는 정규표현식》, 《그림으로 공부하는 IT 인프라 구조》, 《그림으로 공부하는 시스템 성능 구조》, 《IT에 몸담은 이들을 위한 지적 생산 기술》, 《파이토치 첫걸음》 등 40여 종이 있다. 블로그(blog.naver.com/itbk100)를 통해 IT 번역 관련 이야기와 싱가포르 직장 생활을 소개하고 있다.

Information Provided By: : Aladin

Table of Contents

1장 부트스트랩(Bootstrap) 시작하기 
_양과 질 
__시대의 흐름과 함께 성장 
__가벼운 CSS(Leaner CSS)의 힘 
_부트스트랩 내려받기 
__파일 구성 
_프로젝트 템플릿 폴더 준비하기 
__H5BP 내려받기 
__불필요한 보일러플레이트 파일 정리 
__보일러플레이트 .htaccess 파일 평가 
__필요한 보일러플레이트 파일 업데이트 
__파비콘(favicon)과 터치 아이콘 업데이트 
_부트스트랩 파일 가져오기 
__Fonts 
__자바스크립트(JavaScript) 
__CSS 수정 
__LESS 파일 가져오기 
_최종 파일 구성 
_HTML 템플릿 파일 설정 
_사이트 명칭 설정하기 
__구 버전 브라우저 사용에 대한 메시지 수정 
__주요 콘텐츠 구조 설정 
_내비게이션 메뉴바 태그 추가 
_부트스트랩 CSS 컴파일 및 링크 
_반응형 내비게이션 메뉴바 설정 
_문제 해결 
_IE8 지원을 위한 추가 작업 
_정리 

2장 포트폴리오 사이트 부트스트랩 하기 
_우리가 구축할 사이트 
_실습 파일 구성 
_캐러셀 적용 
_반응형 칼럼 만들기 
_링크를 버튼으로 변경 
_LESS의 특징 이해하기 
__내포 규칙 
__변수 
__믹스인(Mixins) 
__연산(Operations) 
__파일 임포트 
__모듈러 파일 구성 
_LESS 파일을 요구에 맞게 커스터마이징하기 
__변수 커스터마이징 
_로고 이미지 추가 
_nav 아이템 패딩 조정 
_아이콘 추가 
_폰트 어썸(Font Awesome) 아이콘 추가 
_내비게이션 메뉴바 아이콘 색상 변경 
_반응형 내비게이션 메뉴바의 변경 기준점 조정 
_캐러셀 스타일 변경 
__컨트롤에 폰트 어썸 아이콘 적용 
__상하단 패딩 추가 
__캐러셀 전체 너비에 맞추어 이미지 늘리기 
__캐러셀 높이 제한 
__캐러셀 진행바 재배치 
__진행바 스타일 변경 
_칼럼과 콘텐츠 변경 
_푸터(Footer) 스타일 변경 
_권장하고 싶은 추가 작업 
_정리 

3장 워드프레스 테마 부트스트랩 하기 
_루트(Roots) 테마 내려받기 및 변경 
_테마 설치 
_내비게이션 메뉴바 설정 
_메인 페이지 콘텐츠 배치 
__이미지 추가 
_페이지 템플릿 커스터마이징 
_루트 기본 템플릿 이해하기 
_사용자 지정 기본 템플릿 작성 
_사용자 지정 구조를 위한 사용자 지정 필드 사용 
_사용자 지정 템플릿 만들기 
__사용자 지정 필드를 이용한 캐러셀 추가 
__사용자 지정 필드를 이용한 칼럼 콘텐츠 추가 
_푸터 콘텐츠 배치 
_루트 에셋 폴더 살펴보기 
_디자인 에셋 교체 
_스타일 시트 연결 
_자바스크립트 파일 연결 
_내비게이션 메뉴바와 푸터에 로고 이미지 추가 
_아이콘 링크 추가 
_워드프레스 전용 스타일 복구 
_정리 

4장 비즈니스 부트스트랩 하기 
_프로젝트 기본 파일 구성 
_복합 배너 영역 만들기 
__내비게이션 메뉴바 위에 로고 배치 
__내비게이션 메뉴바의 드롭다운 아이템 확인 
_유틸리티 내비게이션 추가 
_반응형 레이아웃 조정 
_색상 구성 변경 
_함몰 내비게이션 메뉴바 스타일링 
_수평 내비게이션 메뉴바 스타일링 
_복합 반응형 레이아웃 디자인하기 
__중간 크기나 뷰포트 레이아웃 조정 
__타이틀, 폰트 크기, 버튼 조정 
__메인 칼럼 강화 
__세 번째 칼럼 조정 
__멀티 뷰포트를 위한 세부 작업 
_복합 푸터 배치 
__태그 구조 설정 
__태블릿 너비의 뷰포트 조정 
__반응형 클리어픽스(clearfix) 추가 
__세부 사항 조정 
_정리 

5장 전자 상거래(E-commerce) 부트스트랩 하기 
_제품 페이지의 태그 구조 이해하기 
_이동 경로 탐색기, 페이지 타이틀, 페이지 매김 링크 스타일링 
_제품 그리드 조정 
_옵션 사이드바 스타일링 
__기본 스타일 설정 
__''Clearance Sale'' 링크 스타일링 
__옵션 리스트 스타일링 
__옵션 링크에 폰트 어썸 체크박스 추가 
__옵션 링크를 칼럼 형태로 배열하기 위한 LESS 믹스인 사용 
__태블릿과 스마트폰 화면에 맞게 옵션 리스트 구조 조정 
__스마트폰 및 태블릿 사용자를 위한 옵션 패널 숨기기 
_정리 

6장 한 페이지 마케팅 웹사이트 부트스트랩 하기 
_개요 
_실습 파일 살펴보기 
_페이지 콘텐츠 확인 
_내비게이션 메뉴바 조정 
_점보트론 커스터마이징 
__점보트론 메시지 디자인 다듬기 
_제품 특징 리스트 꾸미기 
_사용자 리뷰 다루기 
__캡션 위치 및 스타일 조정 
__캡션 위치 다듬기 
__부트스트랩 그리드 클래스 추가 
__타일 구조를 위한 자바스크립트 내려받기와 연동 
__Masonry 자바스크립트를 리뷰 레이아웃에 맞게 초기화하기 
__타일 다듬기 
_시선을 사로잡는 가격 테이블 만들기 
__변수, 파일, 태그 설정 
__테이블 머리글 꾸미기 
__테이블 본문과 바닥글 스타일링 
__패키지 차별화 
__작은 뷰포트를 위한 조정 
__테이블에 시각적 계층 적용하기 
_마지막 다듬질 
_ScrollSpy를 내비게이션 메뉴바에 추가 
_스크롤 애니메이션 효과 
_정리 

부록 A: 사이트 에셋 최적화하기 
_이미지 최적화 
_CSS 최적화 
_자바스크립트 최적화 
_최적화 결과 

부록 B: 반응형 이미지 구현하기 
_포트폴리오 캐러셀 최적화 
_솔루션 선정 
__반응형 이미지 준비 
__자바스크립트 연동 
__태그 구조 구현 
__테스트 및 수정 
_최종 결과 

부록 C: 캐러셀에 밀기(Swipe) 기능 추가하기 
_구현 방법 검토 
_TouchSwipe 플러그인 다운로드 및 연동 
_TouchSwipe 초기화

New Arrivals Books in Related Fields

Ramamurthy, Bina (2021)
윤관식 (2020)