• 컴퓨터/IT > 홈페이지/웹디자인 > 홈페이지 만들기

2015/2 컴퓨터/IT 48위 | 현재 컴퓨터/IT 48위 |

출판사 리뷰

출판사 서평 부트스트랩 3로 디자인하는 모바일 우선 반응형 웹사이트 이 책은 부트스트랩 최신 기술과 핵심 개발 구조를 실제 사용 가능한 예제를 통해 체험할 수 있도록 안내한다. 따라 하기 쉬운 단계별 설명을 통해 포트폴리오 사이트, 워드프레스(WordPress) 테마, 비즈니스 사이트, 전자 상거래 인터페이스, 관리 인터페이스, 마케팅 사이트 등 다양한 형태의 사이트를 직접 구축해 본다. 이를 통해 실제 부트스트랩 사이트를 신속하고 효과적으로 디자인할 수 있도록 도움을 줄 것이다. 실습을 통해 부트스트랩 LESS 파일 커스터마이징과 재컴파일... 부트스트랩 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) 기능 추가

목차
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 초기화