트위터 부트스트랩 책 출간 예정

지난 두달간의 작업으로 트위터 부트스트랩 책 원고를 마치고 현재 리뷰 중에 있습니다. 리뷰를 마치면 디자인 작업과 인쇄를 거쳐 3월 중순경에 책이 출간될 예정입니다. 

트위터 부트스트랩은 그동안 나온 웹디자인 프레임워크 중에서도 탁월한 기능으로 인해 많은 인기를 얻으며 현재 2.3.0 버전까지 나와있고 향후 출시될 3.0 버전은 기존의 모바일 겸용에서 모바일 우선 지원 형태로 진화될 것으로 보입니다. 

책의 내용은 3개의 장으로 구성되며 첫번째 장은 부트스트랩 기초, 두번째 장은 Less 프리프로세서, 세번째 장은 부트스트랩으로 디자인하기 입니다. 부트스트랩 스타일시트는 Less라는 프리프로세서로 만들어졌기 때문에 2장에 Less 사용법을 포함시켰습니다. 각 장의 간략한 내용을 알아보면 다음과 같습니다.

1장 부트스트랩 기초

부트스트랩의 전반적인 내용에 대해 알아보는 장으로 부트스트랩의 모든 기능에 대해서 자세히 설명합니다.

부트스트랩이란?

CSS로 웹디자인을 하면서 이미 만들어 놓은 스타일시트에서 선택자를 재활용하면 중복해서 작성하지 않아도 되는 것이 클래스 선택자의 잇점입니다. 부트스트랩 스타일시트는 이러한 클래스 선택자의 라이브러리이며 발생한 배경, 특징과 기초과정을 진행하면서 필요한 지식에 대해 알아봅니다.

환경 만들기

부트스트랩의 기능을 알아보기 위해서 파일을 내려받아 설치하고 아이콘을 사용하기 위해서 Font Awesome 폰트아이콘을 설치하는 방법을 알아봅니다.

구조(Scaffoding)

웹페이지를 만드는 과정에서 가장 기초적인 부분인 그리드 시스템과 고정폭, 유동폭 레이아웃, 반응형 디자인을 위한 미디어쿼리에 대해서 알아봅니다.

기본 CSS(Basic CSS)

구조 과정을 통해 레이아웃을 만든 다음 html의 각종 태그를 사용해서 요소를 만듭니다. html 태그에 선택자만 삽입하면 미리 디자인된 글자 형태, 폼, 테이블, 버튼 및 아이콘을 만들 수 있습니다. 부트스트랩에서 정해진 선택자를 삽입해야하며 이러한 선택자들에 대해 알아봅니다.

구성요소(Components)

기본 CSS만으로는 풍부한 웹페이지를 만들기에는 부족합니다. 구성요소 부분에서는 내비게이션바, 버튼 그룹을 이용한 도구모음을 만들 수 있고 탭 메뉴, 페이지네이션, 썸네일, 프로그레스 바 등 웹페이지 만들기 위해서 필요한 각종 기능이 추가돼 있습니다. 

자바스크립트

자바스크립트는 웹페이지에서 필수적인 도구입니다. 자바스크립트에 대해 전혀 몰라도 부트스트랩에서 제공하는 플러그인을 통해 애니메이션 기능을 추가할 수 있습니다. 이미 기본 CSS나 구성요소 부분에는 이러한 자바스크립트가 포함돼 있으며 별도의 스크립트를 작성하지 않아도 되는 것이지만 추가적인 기능을 위해서 간단한 옵션 설정만 하면 됩니다.

2장 CSS 프리프로세서 사용하기 (Less)

CSS 프리프로세서는 CSS 스타일시트를 효율적이고 체계적으로 작성하기 위해서 만들어진 프로그램입니다. 부트스트랩을 만드는데 사용된 Less의 사용법에 대해 전반적인 내용을 간략하게 알아보기로 합니다.  2장의 내용은 다음과 같습니다.

프리프로세서란?

스타일시트를 사용해서 디자인을 하다보면 중복되는 코드가 많습니다. 체계적인 스타일시트를 만들기 위한 CSS 프리프로세서의 역할에 대해 알아봅니다.

Less 사용을 위한 환경 만들기

Less를 사용하기 위해 자바스크립트 플러그인을 사용하는 방법과 컴파일러 프로그램인 Simpless를 설치하고 사용법을 알아봅니다.

Less를 이용한 메뉴바 만들기

Less의 변수와 내포 규칙을 이용해 실제 메뉴바를 만들고 이를 기반으로 믹신과 연산을 사용하는 방법을 알아봅니다.

함수와 믹신

Less의 함수는 수치와 색상을 변경하는 것이 주 기능입니다. 하나의 색상을 기준으로 여러가지 테마 색상을 만들 수 있습니다. 또한 조건문에 충족할 경우 스타일시트를 변경할 수 있는 패턴 매칭과 가드 믹신에 대해 알아봅니다.

기타 기능

Less의 기능을 확장시키기 위한 기능으로 @import를 사용해서 less 파일이나 CSS 파일 가져오기, 보간법, 네임스페이스, 유효범위, 앰퍼샌트의 기능에 대해 알아봅니다.

3장 부트스트랩으로 디자인하기

웹사이트 제작은 크게 웹 개발과 웹디자인으로 나뉘어서 개발자는 php와 같은 웹프로그래밍 언어를 사용해서 웹사이트에서 사용되는 각종 기능을 만들고 웹디자이너는 CSS, 포토샵, 플래시, 제이쿼리와 같은 도구를 이용해서 디자인을 합니다. 제이쿼리가 개발 분야인지 디자인 분야인지는 애매하지만 각종 플러그인을 무료로 사용할 수 있어서 제이쿼리에 대한 약간의 지식과 CSS를 잘 다룰줄 안다면 얼마든지 사용할 수 있기 때문에 디자인 분야라고 생각합니다.

웹개발과 웹디자인이 서로 분리가 됐다고 해도 어느 정도는 서로의 영역에 대해서 알아야 협조도 잘되겠죠. 대부분의 경우 디자인을 먼저 하고 이를 바탕으로 개발자들이 php 코드를 추가하는데 개발자들이 코드를 추가하기 쉽도록 하는 것도 웹 개발에 중요한 과정이 될 것입니다.

3장의 내용에 대해서 간략히 알아보면 다음과 같습니다.

부트스트랩 디자인을 위한 사전 지식

향후 인터넷 접속은 모바일이 주도할 것으로 예상되므로 웹디자인의 방향이 모바일 위주로 진화하고 있습니다. 그래서 기존의 가로형 레이아웃이 아닌 세로형 레이아웃으로 디자인을 해야 코드도 덜 들어가게 됩니다. 레이아웃을 원하는 대로 변경하기 위해서는 사용자 정의 스타일시트를 사용해서 부트스트랩의 정형화된 틀에서 벗어나 디자인을 하는 것도 바람직한 과정이 됩니다. 모바일 위주의 세로형 디자인의 필요성과 부트스트랩을 사용하기 위한 환경설정에 대해 알아봅니다.

index.php 파일 만들기

모든 웹페이지는 index 파일로 시작하듯이 하나의 index 파일을 만들고 이를 php 파일로 분리해서 header.php 파일을 만들고 헤더에 들어갈 로고와 회원가입 버튼, 회원가입 폼, 로그인 폼과 내비게이션 바의 기본 틀을 만듭니다.

컨텐트 영역

index.php 파일의 컨텐트 영역에는 웹사이트의 관문 역할을 할 수 있도록 이미지 배너로 장식을 하고 웹사이트의 특징을 알릴 수 있는 배너가 삽입됩니다.

푸터 만들기

초기화면에서 푸터의 내용도 중요하며 예전에는 푸터에 별 내용을 넣지 않았지만 사이트맵이라든가 내비게이션 바를 추가하는 등 푸터의 컨텐트를 늘리는 추세에 있습니다. 그래서 이 책에서도 푸터의 비중을 높여서 하나의 레이아웃을 만들고 여러가지 컨텐트를 배치하는 방법을 알아봅니다.

갤러리 페이지 만들기

이름이 갤러리 페이지이지만 이 페이지의 용도는 아주 다양합니다. 상품 목록 페이지가 될 수도 있고 이미지 갤러리 페이지, 블로그 글목록 페이지도 될 수 있습니다. 그래서 이 페이지의 비중을 높여서 썸네일의 높이가 다르더라도 어긋나지 않게 배치될 수 있는 플러그인을 사용합니다. 또한 요즘 인기있는 기능인 무한 스크롤 기능을 추가해서 스크롤해서 내리기만 해도 다음 페이지가 나타나도록 했습니다. 그리고 isotope라는 플러그인을 이용해 카테고리별로 컨텐트를 분류할 수 있는 기능도 추가합니다.

이벤트 페이지 만들기

이벤트 페이지는 초기화면에 들어가는 부트스트랩 이미지 슬라이더를 대체할 수 있는 새로운 자바스크립트 플러그인을 사용했고 컨텐트로 갤러리 페이지를 사용했습니다. 그러니 여기에 사용된 슬라이더는 초기화면에도 사용할 수 있는 것입니다.

블로그 페이지 만들기

소셜네트워킹의 하나인 블로그는 개인 블로그 활동이나 기업의 광고를 위해서도 아주 많이 사용하고 있는 상황입니다. 그래서 블로그 페이지는 다양한 레이아웃을 만들어서 자유로운 디자인 변경이 가능하도록 했습니다. 글 목록 페이지와 글 페이지로 분리해서 글 페이지는 댓글 목록이 있고 댓글 입력 박스를 만들게 됩니다.

다양한 레이아웃의 변경

블로그 페이지에서 만든 하나의 레이아웃을 기준으로 여러가지 형태의 레이아웃을 만들게 됩니다. 부트스트랩에서 사용하는 레이아웃의 폭은 넓기 때문에 3컬럼 레이아웃도 가능하게 됩니다.

계정 설정 페이지 만들기

웹사이트 제작에서 폼은 아주 만들기 어려운 요소입니다. 계정 설정 페이지는 아주 다양한 폼이 들어가도록 해서 이 페이지 작업을 거치면 폼에 대해서는 익숙해질 것입니다.

상품 상세 페이지 만들기

갤러리 페이지로 상품 목록 페이지를 만들게 되면 상품을 선택했을 때 상품 상세 페이지로 이동하게 됩니다. 상품 이미지를 크게 확대할 수 있는 이미지 줌 기능을 추가하고 하단에는 탭기능을 이용해서 다양한 컨텐트를 선택해서 볼 수 있도록 했습니다.

이렇게 만든 데모 사이트는 다음의 링크로 가면 확인할 수 있습니다. 워드프레스를 설치해서 테마로 사용할 예정입니다.

http://twitter-bootstrap.kr/bootstrap-demo

부트스트랩 책의 목차는 다음과 같습니다.

1장 부트스트랩 기초

1-1 부트스트랩이란?

1-1-1 스타일시트의 재활용

1-1-2 부트스트랩이 나타난 배경

1-1-3 웹디자인 프레임워크

1-1-4 부트스트랩의 특징

1-1-4-1 웹페이지를 쉽게 만들 수 있다

1-1-4-2 html 코드의 재활용

1-1-4-3  모바일 겸용이 아닌 모바일 전용으로 진화

1-1-4-4 많은 자바스크립트 플러그인의 지원

1-1-4-5 정형화된 디자인에서 탈피

1-1-4-6 Less 프리프로세서로 만들어진 체계적인 스타일시트

1-1-4-7 단점

1-1-5 이 책을 위해 필요한 도구

1-1-5-1 사용할 텍스트 편집기

1-1-5-2 사용할 웹브라우저

1-1-5-3 웹서버 환경

1-2 환경 만들기

1-2-1 부트스트랩 파일 내려받기

1-2-2 Font Awesome 파일 내려받기

1-2-3 index.html, style.css 파일 만들기

1-2-4 자바스크립트 첨부하기

1-3 구조(Scaffoding)

1-3-1 부트스트랩의 닥타입(Doctype)

1-3-2 그리드 시스템

1-3-3 고정폭 레이아웃 - 3컬럼

1-3-4 고정폭 레이아웃 - 2컬럼

1-3-5 컬럼 오프셋 

1-3-6 컬럼 네스팅(Column Nesting)

1-3-7 유동폭 레이아웃

1-3-8 반응형 디자인

1-3-8-1 뷰포트 메타 태그

1-3-8-2 미디어쿼리

1-3-8-3 반응형 선택자

1-4 기본 CSS(Basic CSS)

1-4-1 글자 

1-4-2 생략과 약어

1-4-3 인용(blockquote)

1-4-4 목록(List)

1-4-5 코드

1-4-6 테이블(table)

1-4-7 폼(form)

1-4-7-1 fieldset, legend 태그

1-4-7-2 검색 박스

1-4-7-3 input 태그

1-4-7-4 textarea 태그

1-4-7-5 체크박스와 라디오버튼

1-4-7-6 select 박스

1-4-7-7 폼의 확장 기능

input-prepend, input-append 선택자

드랍다운 버튼 형태

검색박스 형태 변경

input 박스의 크기 조절

input의 수평 배치

span 태그를 이용한 input 입력박스의 비활성화

input 태그의 아웃라인

비활성화된 input

폼 인증

1-4-8 버튼

1-4-9 이미지

1-4-10 아이콘

1-4-10-1 그래픽 이미지 아이콘과 폰트 아이콘

1-4-10-2 버튼에 삽입하기

1-4-10-3 링크에 삽입하기

1-4-10-4 아이콘의 크기변경

1-4-10-5 메뉴에 사용하는 경우 색상 변경

1-4-10-6 폼에 사용하는 경우

1-5 구성요소(Components)

1-5-1 드랍다운 메뉴

1-5-1-1 드랍다운 메뉴의 기본 형태

1-5-1-2 서브 메뉴

1-5-1-3 드랍업 서브 메뉴

1-5-2 버튼

1-5-2-1 버튼 그룹

1-5-2-2 세로형 버튼 그룹

1-5-2-3 버튼의 드랍다운 메뉴

1-5-2-4 버튼의 텍스트와 아이콘의 분리

1-5-2-5 버튼의 드랍업 서브 메뉴

1-5-3 내비게이션 탭, 필(Pill), 리스트

1-5-3-1 내비게이션 탭

  탭의 기본 형태

  페이드 효과

  탭의 방향 바꾸기

탭을 하단으로 배치

탭을 좌측에 배치

세로형 탭

탭과 드랍다운 메뉴

1-5-3-2 필(Pills)

1-5-3-3 리스트(List)

1-5-4 내비게이션 바

1-5-4-1 내비게이션 바의 기본 형태

1-5-4-2 세로 분리자

1-5-4-3 검색폼 추가

1-5-4-4 메뉴바의 고정

1-5-4-5 반응형 내비게이션 바

1-5-4-6 메뉴바의 색상 반전

1-5-5 브레드크럼(Breadcrumb)

1-5-6 페이지네이션(Pagination)

1-5-7 라벨과 뱃지

1-5-7-1 라벨

1-5-7-2 뱃지

1-5-8 타이포그래픽 구성요소

1-5-8-1 히어로 유닛(Hero Unit)

1-5-8-2 페이지 헤더

1-5-9 썸네일

1-5-10 알림 메시지(Alerts)

1-5-11 프로그래스 바(Progress Bar)

1-5-11-1 기본

1-5-11-2 색상 변경 및 줄무늬

1-5-12 미디어 오브젝트(Media Object)

1-5-12-1 기본 형태

1-5-12-2 댓글 형태

1-5-13 기타

1-5-13-1 wells

1-5-13-2 닫기 아이콘

1-5-13-3 도움 선택자

1-6 자바스크립트

1-6-1 모달(Modal)

1-6-1-1 모달의 기본 구조

1-6-1-2 모달에 로그인 폼 사용하기

1-6-1-3 옵션

1-6-2 드랍다운

1-6-3 스크롤스파이(Scrollspy)

1-6-4 탭

1-6-5 툴팁(Tooltip)

1-6-6 팝오버(Popover)

1-6-7 버튼

1-6-7-1 로딩 상태 버튼

1-6-7-2 싱글 토글 버튼

1-6-7-3 다중 체크 박스 버튼

1-6-7-4 라디오 버튼

1-6-8 콜랩스(Collapse, 함몰) – 어코디언 

1-6-9 캐러젤(Carousel)

1-6-9-1 자바스크립트 옵션

1-6-9-2 세로형 슬라이드

1-6-10 타이프 어헤드(Typeahead)

1-6-11 어픽스(Affix)

1-7 부트스트랩 사용자 정의(Customize)

2장 CSS 프리프로세서 사용하기 (Less)

2-1 프리프로세서란?

2-2 Less 사용하기

2-3 SimpLESS

2-3-1 Simpless 설치하기

2-3-2 Simpless의 기능

2-4 변수(Variables)와 내포 규칙(Nested Rules)을 이용한 다단계 메뉴바 만들기

2-4-1 변수(Variables)

2-4-2 내포 규칙(Nested Rules)

2-5 믹신(Mixins)

2-6 연산(Operations)

2-7 매개변수 믹신(Parametric Mixins)

2-8 믹신과 @arguments

2-9 함수(Functions)

2-10 패턴 매칭(Pattern Matching)

2-11 가드 믹신(Guarded Mixins)

2-12 Less 파일 가져오기(@import)

2-13 스트링 인터폴레이션(String Interpolation: 보간법)

2-14 네임스페이스(Namespaces)

2-15 유효범위(Scope)

2-16 앰퍼샌드(& : Ampersand)

3장 부트스트랩으로 디자인하기

3-1 부트스트랩 디자인을 위한 사전 지식

3-1-1 사용자 정의 스타일시트

3-1-2 모바일 디자인의 기본 형태

3-1-3 php 코드 사용하기

3-1-4 웹서버 환경 만들기 

3-2 index.php 파일 컨텐트 만들기

3-2-1 index.php 파일의 레이아웃

3-2-2 로고 영역 만들기

3-2-3 메뉴바 만들기

3-2-4 body 배경 색상 변경

3-2-5 header 수정

3-2-6 메뉴바의 배경 색상 변경

3-2-7 메뉴바 수정

3-2-8 로그인 폼 추가하기

3-2-9 회원가입 폼 추가하기

3-2-10 register.html 만들기

3-3 컨텐트 영역

3-3-1 이미지 슬라이더 만들기

3-3-2 스타일시트 수정

3-3-3 세로형 슬라이더

3-3-4 썸네일 배너 만들기

3-4 푸터 만들기

3-4-1 푸터의 레이아웃

3-4-2 푸터 상단 컨텐트 입력하기

3-4-3 푸터 하단 컨텐트 입력하기

3-4-3 푸터 스타일시트 수정

3-5 갤러리 페이지 만들기

3-5-1 갤러리 페이지의 레이아웃

3-5-2 갤러리 선택 메뉴바

3-5-3 갤러리 썸네일

3-5-4 부트스트랩 라이트박스 사용하기

3-5-5 페이지네이션

3-5-6 미디어쿼리 사용하기

3-5-7 index.php 수정하기

3-5-8 메이슨리(Masonry) 플러그인 사용하기

3-5-8-1 석공의 기술 – 메이슨리

3-5-8-2 파일 내려받기

3-5-8-3 파일의 수정

3-5-9 isotope 플러그인 사용하기

3-5-9-1 파일 내려받기

3-5-9-2 파일의 수정

3-5-10 무한 스크롤(Infinite Scroll) 플러그인 사용하기

3-5-10-1 갤러리2 페이지에 적용

3-5-10-2 갤러리 페이지에 적용

3-6 이벤트 페이지 만들기

3-6-1 Ei-Slider 플러그인

3-6-1-1 event.php 파일 만들기

3-6-1-2 이벤트 페이지 스타일시트 수정

3-6-1-3 메뉴바에 팝오버 사용

3-6-1-4 제이쿼리 이징(easing) 효과

3-6-2 시퀀스 플러그인

3-6-2-1 event2.php 파일 만들기

3-6-2-2 자바스크립트 플러그인 사용시 주의할 점

3-6-2-3 스타일시트 수정

3-7 블로그 페이지 만들기

3-7-1 블로그 레이아웃

3-7-2 패딩이 없는 블로그 페이지

3-7-3 컨텐트 입력하기

3-7-4 파일의 수정

3-7-5 글 페이지 만들기

3-7-5-1 blog-post.php 파일 만들기

3-7-5-2 스타일시트 수정

3-7-5-3 댓글 박스 만들기

3-7-5-4 댓글 입력박스 만들기

3-7-5-5 댓글 박스에 위지위그 편집기 추가하기

3-7-5-6 페이저 삽입하기

3-7-5-7 URL 링크 만드는 플러그인 설치하기

3-7-6 사이드바 만들기

3-7-6-1 어코디언 플러그인 추가하기

3-7-6-2 스타일시트 수정

3-8 다양한 레이아웃의 변경

3-8-1 컨텐트 영역과 사이드바 영역에 패딩 추가하기

3-8-2 컨텐트와 사이드바 전체에 패딩 적용하기

3-8-3 컨텐트 영역과 사이드바 영역을 같은 높이로 만들기

3-8-4 컬럼이 3개인 레이아웃

3-8-5 글목록 페이지에 무한 스크롤 플러그인 적용하기

3-8-6 사이드바 컨텐트 만들기

3-8-6-1 카테고리 메뉴 만들기 

3-8-6-2 최신글, 인기글 목록 만들기

3-8-6-3 태그 클라우드 만들기

3-8-7 sidebar-content.php 파일 만들기

3-9 계정 설정 페이지 만들기

3-9-1 레이아웃 만들기

3-9-2 폼 빌더

3-9-3 선택박스

3-9-4 선택박스 플러그인 추가하기

3-9-5 입력박스

3-9-6 여러가지 폼 만들기

3-9-7 선택 박스와 체크박스

3-9-8 라디오버튼과 체크박스

3-9-9 툴팁과 collapse 기능 추가

3-9-10 여러 개의 입력박스

3-9-11 저장하기 버튼

3-9-12 메시지 박스 만들기

3-10 상품 상세 페이지 만들기

3-10-1 블로그 레이아웃의 정리

3-10-2 상품 상세 페이지 레이아웃 수정

3-10-3 이미지 줌 플러그인 사용하기

3-10-4 옵션 영역 

3-10-5 평가 및 공유 버튼

3-10-6 탭 영역

3-10-6-1 탭 레이아웃

3-10-6-2 상품 설명

3-10-6-3 스펙

3-10-6-4 리뷰

3-10-6-5 관련 상품

3-11 인터넷 익스플로러를 위한 스타일시트 수정하기

4 부록

부트스트랩 선택자 요약