NHN 플랫폼Ajax팀 박경일
부트스트랩(Bootstrap)은 트위터에서 오픈 소스로 공개한 웹 프런트 엔드 개발 도구입니다. 부트스트랩은 유연한 HTML, CSS, JavaScript 템플릿과 다양한 UI 컴포넌트, 인터랙션을 제공해서 웹 사이트를 구축하는 시작점이 될 수 있습니다. 이 글에서는 부트스트랩의 특징이 무엇이고 어떻게 부트스트랩으로 웹 사이트 구축을 시작할 수 있는지 간단하게 알아 보겠습니다.
Bootstrap from Twitter
웹 UI 개발은 쉬워 보이면서도 직접 접하면 수많은 어려움에 부딪히게 된다. 단일한 클라이언트 환경만 고려하면 되는 다른 UI 개발과는 달리, 웹 UI 개발은 다양한 브라우저 환경에서 호환성을 충족시키는 크로스 브라우징(Cross Browsing) 작업이 필요하다.
Internet Explorer, Firefox, Chrome, Safari, Opera 등 PC에서 많이 사용하는 브라우저만 해도 5가지이며, 각 브라우저의 버전이나 운영체제에 따라 별도의 작업을 해야 하는 경우도 있다. 게다가 최근에는 스마트폰, 태블릿 PC 등 다양한 스크린 크기와 기기에 특화된 브라우저가 있는 모바일 환경까지 고려해야 하는 상황이다.
중소규모의 웹 사이트에서 이렇게 다양하고 복잡한 브라우저 환경에 대응해 크로스 브라우징 작업을 하기에는 부담이 많을 수 밖에 없다. 트위터의 프런트 엔드(Front End) 툴킷인 부트스트랩 (Bootstrap)은 이런 어려움을 해결해 간편하고 빠르게 유연한 사이트를 구현할 수 있는 시작점을 제공해 준다.
부트스트랩은 트위터의 UI 디자이너 Mark Otto와 개발자 Jacob Thornton이 만든 오픈소스 프런트 엔드 툴킷이다. 부트스트랩의 의미가 "컴퓨터의 전원을 켜거나 리셋 키를 누르는 따위의 동작으로 시스템을 시동하는 일"이라는 것에서 알 수 있듯이 부트스트랩은 웹 사이트를 구축하는 시작점으로 유연한 HTML, CSS, JavaScript 템플릿을 제공한다. 또한, 자주 사용하는 다양한 UI 컴포넌트와 인터랙션을 포함하고 있다.
이 글에서는 부트스트랩이 제공하는 요소와 부트스트랩의 특징을 살펴보면서 부트스트랩으로 어떻게 웹 사이트를 만들 수 있을지 간단하게 알아 보겠다.
격자 시스템
격자(Grid)는 레이아웃 디자인에 있어 기본적인 요소이다. 웹 페이지의 레이아웃은 일반적으로 <div> 태그와 CSS를 이용해 화면을 분할해 요소를 배치한다. 이러한 화면 분할을 정형화해서 격자 레이아웃 시스템을 제공하는 CSS 프레임워크로는Blueprint, 960 grid, YUI CSS grids 등이 유명하다.
부트스트랩도 자체적인 격자 레이아웃 시스템을 제공한다. 부트스트랩의 격자 시스템은 12열의 격자(12-column grid)로 이루어져 있으며 기본 버전과 유동 버전이 있다. 또한 다양한 화면 크기에 대응하기 위해 4개의 디자인 변형체를 갖는데 이는 나중에 설명할 반응형 디자인과 연계되어 동작한다.
기본 격자 시스템
기본 격자 시스템(Default grid system)은 940px 고정 너비에 12열 격자로 이루어진다.
행은 "row", 열은 "span*"이라는 클래스로 표현되는데, "span*" 클래스는 span1~12 까지 사용할 수 있다.
열 사이의 간격은 20px이며 "span1" 클래스의 너비는 60px이다. "span*" 클래스의 숫자가 하나씩 증가할 때마다 너비가 80px씩 늘어나 "span12" 클래스의 너비는 전체 너비인 940px이 된다.
그림 1. 12열 격자 시스템
그림 1에서 3번째 행에 해당하는 마크업은 아래와 같이 작성할 수 있으며, 화면에 300px + 20px + 620px 크기의 영역(전체 940px)으로 표현된다.
1 2 3 4 | <div class="row"> <div class="span4">…</div> <div class="span8">…</div></div> |
유동 격자 시스템
유동 격자 시스템(Fluid grid system)은 격자 크기를 픽셀이 아닌 퍼센트로 사용한다. 유동 격자 시스템을 사용하려면 행의 클래스를 "row-fluid"로 바꾸기만 하면 된다.
1 2 3 4 | <div class="row-fluid"> <div class="span4">…</div> <div class="span8">…</div></div> |
열 위치 이동하기 (Offsetting columns)
열에 "offset*" 클래스를 추가하면 열을 오른쪽으로 이동시켜 배치할 수 있다. 단, 열 위치 이동은 기본 격자 시스템에서만 가능하다.
그림 2. 오프셋을 이용한 격자 위치 이동
그림 2에서 첫 번째 행에 해당하는 마크업은 아래와 같이 작성할 수 있다. 두 번째 열에 해당하는 <div>는 격자 4개의 너비(offset4)만큼 오른쪽으로 이동한다.
1 2 3 4 | <div class="row"> <div class="span4">…</div> <div class="span4 offset4">…</div></div> |
열 내부에 격자 포함하기
<그림 3> 과 같이 열 내부에 격자를 포함시키려면 "row" 클래스와 "span*" 클래스가 있는 새로운 <div> 태그를 추가로 지정하면 된다.
그림 3. 중첩 격자
기본 격자인 경우는 내부 열의 합이 부모 열의 숫자가 되도록 지정한다.
1 2 3 4 5 6 7 8 9 | <div class="row"> <div class="span6"> Level 1 of column <div class="row"> <div class="span3">Level 2</div> <div class="span3">Level 2</div> </div> </div></div> |
유동 격자인 경우는 퍼센트로 되어 있어 내부 열의 합이 부모열의 숫자가 아닌 12가 되도록 지정한다.
1 2 3 4 5 6 7 8 9 | <div class="row-fluid"> <div class="span6"> Level 1 of column <div class="row-fluid"> <div class="span6">Level 2</div> <div class="span6">Level 2</div> </div> </div></div> |
반응형 디자인
반응형 디자인(Responsive Design)이란 CSS3의 미디어쿼리(media query)를 이용해 PC, 태블릿 PC, 스마트폰 등 다양한 기기의 해상도나 화면 크기에 최적화된 레이아웃으로 자동으로 변환되도록 디자인하는 기법을 말한다.
부트스트랩은 유연하고 간단한 화면 구성을 위해 격자 시스템과 함께 반응형 디자인을 적용해 제공한다. 반응형 디자인을 적용하면 격자의 크기도 화면 크기에 따라 다음 표와 같이 변경된다.구분 | 화면 너비 | 격자 열 너비 | 격자 열 간격 너비 |
스마트폰 | 480px 이하 | 고정되지 않은 가변 폭 | |
세로 모드 태블릿 PC | 767px 이하 | 고정되지 않은 가변 폭 | |
가로 모드 태블릿 PC | 768px 이상 | 42px | 20px |
기본 | 980px 이상 | 60px | 20px |
와이드 모니터 | 1200px 이상 | 70px | 30px |
다음 그림은 반응형 디자인을 적용해 화면 크기에 따라 레이아웃이 변하는 예이다.
그림 4. 화면 크기에 따른 반응형 디자인
기기의 크기에 반응해 미디어 쿼리가 동작하도록 하는 CSS는 다음과 같다.
1 2 3 4 5 6 7 8 9 10 11 | // Landscape phones and down@media (max-width: 480px) { ... } // Landscape phone to portrait tablet@media (max-width: 767px) { ... } // Portrait tablet to landscape and desktop@media (min-width: 768px) and (max-width: 979px) { ... } // Large desktop@media (min-width: 1200px) { ... } |
또한, 이 CSS에는 기기에 최적화된 내용이 보이도록 하는 유틸리티(utility)성격의 선택자(selector)가 포함되어 있다.
표 2 기기별 반응형 CSS 클래스
클래스 | 휴대폰 480px 이하 | 태블릿 PC 767px 이하 | 데스크톱 768px 이상 |
.visible-phone | 보임 | 보이지 않음 | 보이지 않음 |
.visible-tablet | 보이지 않음 | 보임 | 보이지 않음 |
.visible-desktop | 보이지 않음 | 보이지 않음 | 보임 |
.hidden-phone | 보이지 않음 | 보임 | 보임 |
.hidden-tablet | 보임 | 보이지 않음 | 보임 |
.hidden-desktop | 보임 | 보임 | 보이지 않음 |
깔끔하고 정돈된 느낌의 기본 CSS 제공
부트스트랩은 기본으로 적용한 CSS를 적용해도 깔끔하고 잘 정돈된 느낌의 버튼과 여러 스타일을 제공한다.
다음은 부트스트랩에서 기본으로 제공하는 버튼 디자인이다.
표 3 버튼 종류별 CSS 클래스 예
버튼 | class="" | 설명 |
| btn | 그라데이션이 적용된 회색 기본 버튼 |
| btn btn-primary | 시각적으로 강조해야 할 필요가 있거나 특별한 행동을 하는 것을 표시하는 버튼 |
| btn btn-info | 기본 버튼을 대체해서 사용할 수 있는 버튼 |
| btn btn-success | 성공한 행동이나 긍정적인 행동을 표시하는 버튼 |
| btn btn-warning | 주의 버튼 |
| btn btn-danger | 위험이나 부정적인 영향이 있음을 표시하는 버튼 |
| btn btn-inverse | 특별한 의미 없이 일반적으로 사용할 수 있는 어두운 회색 버튼 |
다음은 부트스트랩에서 기본으로 제공하는 폼(Form) 디자인이다.
그림 5. 폼 표현 CSS 클래스
부트스트랩은 처음에는 Internet Explorer를 지원하지 않았다. 그러나 나중에 Internet Explorer 7 이상에서도 호환되도록 바꾸었다. 이 여파로 Internet Explorer에서는 디자인이 완전히 동일하지 않다. 그라데이션(gradation)과 둥근 모서리(rounded-border) 등 CSS 지원 여부에 따라 보이는 모양이 조금씩 다를 수 있다. 하지만 전체적인 레이아웃과 색감 등은 유지하고 있다.
그림 6. Internet Explorer에서의 폼 표현 예제 비교.
CSS 리셋(Reset)에는 Nicolas Gallagher의 normalize.css를 사용하고 있으며 UI의 아이콘 이미지는 Glyphicons에서 제공한 아이콘 셋을 이용하고 있다. 아이콘 셋은 단일 이미지로 CSS 스프라이트(CSS Sprite) 기법을 적용해 사용하고 있다.
그림 7. Glyphicons 아이콘 셋
다음은 아이콘 셋을 적용한 UI 컴포넌트의 예이다.
그림 8. 아이콘 셋이 적용된 UI 컴포넌트
부트스트랩의 CSS는 나중에 설명할 LESS로 작성되어 있어서 쉽게 고쳐서 테마를 재생산할 수 있다.
UI 컴포넌트와 jQuery 플러그인
웹 페이지를 제작할 때 자주 사용하는 UI 패턴이 있다. 이러한 패턴을 재사용하기 쉽도록 마크업과 CSS, JavaScript를 묶어서 제공하는 것을 UI 컴포넌트라고 부른다.
부트스트랩에는 기본 CSS가 적용되어 있어 손쉽게 가져다 쓰면 되는 다양한 UI 컴포넌트가 있다. 그 중 동적인 인터랙션이 필요한 컴포넌트는 jQuery 플러그인 형태의 JavaScript로 컨트롤할 수 있도록 했다.
기본 CSS를 사용하는 컴포넌트에는 버튼 그룹, 드롭다운 목록, 내비게이션, 탭, 페이지 이동 버튼, 배지, 섬네일 레이아웃, 경고 표시, 닫기 아이콘 등이 있다. 자세한 컴포넌트 목록과 예는 http://twitter.github.com/bootstrap/components.html 페이지를 참조한다.
jQuery 플러그인으로 인터랙션을 컨트롤하는 컴포넌트에는 모달 레이어, 드롭다운, 토글 탭, 툴팁 등이 있다. 자세한 컴포넌트 목록과 예는 http://twitter.github.com/bootstrap/javascript.html를 참조한다.
참고
NHN에서도 손쉽게 가져다 사용할 수 있는 컴포넌트를 공개하고 있다.
UIO Factory(http://html.nhndesign.com/uio_factory)는 정적인 UI 패턴 모음을 제공하고 있으며, 동적인 UI를 위한 컴포넌트는 Jindo 프레임워크 기반의 Jindo Component(http://dev.naver.com/projects/jindo/)로 제공하고 잇다.
LESS
일반 프로그래밍 언어와 달리 CSS는 상속이나 변수 등의 개념이 없어서 단순히 화면 높이가 변경되어도 일일이 찾아서 수정해야 한다. CSS 작성과 관리가 번거롭기 때문에 이러한 어려움을 해결하고자 CSS 전처리 도구들이 생겨났다.
CSS 전처리 도구는 기존 CSS 문법을 확장해 자체적으로 정의한 문법을 가지고 있다. 확장한 문법으로 변수나 믹스인(mixin), 상속, 연산, 함수 등의 기능을 기술할 수 있으며, 확장 CSS로 작성된 코드를 컴파일해 브라우저에 호환하는 최종 CSS를 만들어 낸다. CSS3에 이러한 동적이고 객체지향적인 개념이 빠진 것에 대해 아쉬움을 갖는 사람도 있었다.
대표적인 CSS 전처리 도구에는 LESS, Sass, Stylus 등이 있는데, 문법이나 기능은 대동소이하다. 부트스트랩은 이 가운데 LESS를 CSS 전처리 도구로 사용한다.
상당한 장점에도 불구하고 국내의 사이트들이 실무에서 이러한 CSS 전처리 도구를 적용한 사례는 거의 없다. 컴파일해야 하는 불편함도 있지만 홈페이지 디자인을 주로 단발성 외주로 처리하는 등의 환경으로 인해 이전 CSS가 재사용되지 않고 버려지고, 잘 구조화된 마크업과 CSS를 작성할 수 있는 전문가도 많지 않기 때문이다. 해외에서는 부트스트랩이 github로 공개되자 CSS 전처리 도구를 LESS대신 Sass나 Stylus로 변경한 프로젝트도 만들어지는 등 활발히 연구하고 활용하고 있다.
LESS에 대해 좀 더 알아보도록 하자.
LESS 문법
LESS 문법은 표준 CSS 문법에 기능만 확장한 문법을 사용한다.
변수 선언
변수를 선언할 때에는 @ 심볼을 이용한다.
1 2 3 4 5 6 7 8 9 | @mainColor: #0982c1;@siteWidth: 1024px;@borderStyle: dotted; body { color: @mainColor; border: 1px @borderStyle @mainColor; max-width: @siteWidth;} |
믹스인 함수
다음과 같이 클래스 선택자와 유사한 형태로 믹스인 함수를 만들어 활용할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | /* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */.error(@borderWidth: 2px) { border: @borderWidth solid #F00; color: #F00;} .generic-error { padding: 20px; margin: 4px; .error(); /* Applies styles from mixin error */}.login-error { left: 12px; position: absolute; top: 20px; .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */} |
상속
LESS는 클래스 선택자 형태로 믹스인 함수를 정의하기 때문에 일반 클래스 선택자도 믹스인 함수처럼 사용할 수 있어서 다음과 같이 상속을 표현할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .block { margin: 10px 5px; padding: 2px;} p { .block; /* Inherit styles from '.block' */ border: 1px solid #EEE;}ul, ol { .block; /* Inherit styles from '.block' */ color: #333; text-transform: uppercase;} |
연산자
연산이 가능한 속성값에는 다음과 같이 간단한 연산자를 사용할 수도 있다.
1 2 3 4 5 6 | body { margin: (14px/2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10;} |
중첩된 선택자
다음과 같이 중첩된 선택자를 표현할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | section { margin: 10px; nav { height: 25px; a { color: #0982C1; &:hover { text-decoration: underline; } } }} |
중첩된 선택자를 컴파일하면 다음과 같은 CSS가 나온다.
1 2 3 4 5 6 7 8 9 10 11 12 | section { margin: 10px;}section nav { height: 25px;}section nav a { color: #0982C1;}section nav a:hover { text-decoration: underline;} |
부트스트랩 LESS
부트스트랩에는 레이아웃과 컴포넌트와 관련해 미리 정의한 수많은 LESS 변수와 믹스인이 있다. 미리 정의된 변수와 믹스인을 수정해 간단하게 변경할 수 있으며 다양한 테마를 만들어 낼 수 있다.
부트스트랩에서 기본으로 정의한 LESS 변수와 값의 예이다. 자세한 내용은http://twitter.github.com/bootstrap/less.html#variables 페이지를 참조한다.
그림 9 부트스트랩의 다양한 LESS 변수
다음은 부트스트랩에서 기본으로 정의한 믹스인의 예이다. 자세한 내용은http://twitter.github.com/bootstrap/less.html#mixins 페이지를 참조한다.
그림 11. 부트스트랩의 다양한 LESS 믹스인들
LESS 컴파일
LESS 컴파일은 클라이언트 방식과 서버 방식이 있다.
클라이언트 방식은 less.js 파일을 웹 서버에 두고 다음과 같이 링크하면 된다.
1 | <link rel="stylesheet/less" href="http://helloworld.naver.com/bootstrap.less" <script="" src="http://helloworld.naver.com/less.js"> |
서버 방식은 node.js 패키지 매니저에서 컴파일러를 받아 설치한 후 사용한다.
1 2 | $ npm install –g less$ lessc bootstrap.less > bootstrap.css |
커스터마이징
부트스트랩 홈페이지에서는 LESS에 적용된 변수 값을 변경하고 자신이 사용할 CSS와 jQuery 플러그인만 선택해 커스터마이징한 세트를 다운로드할 수 있다.
컴포넌트와 jQuery 플러그인을 선택하면 필요한 CSS와 JavaScript만 골라서 받을 수 있다.
그림 12 부트스트랩 커스터마이징 페이지
LESS 컴파일러가 없어도 커스터마이징 페이지에서 LESS 변수에 적용된 값을 원하는 대로 변경할 수 있다.
그림 13 LESS 변수 값 커스터마이징
컴포넌트와 jQuery 플러그인을 선택하고 LESS 변수 값을 수정한 다음 다운로드 버튼을 클릭하면 자신이 선택한 CSS와 JavaScript를 압축한 .zip 파일을 다운로드할 수 있다.
그림 14. 커스터마이징 결과 다운로드
커스터마이징 페이지 이외에도 http://bootswatch.com/ , http://wrapbootstrap.com/, http://stylebootstrap.info/ 등과 같은 다양한 부트스트랩용 테마 제공 사이트를 활용할 수도 있다.
마치며
지금까지 트위터의 프런트 엔드 개발 프레임워크라고 할 수 있는 부트스트랩에 대해 살펴보았다. 사실 개별적으로 떼어 보면 새로운 기술이 있는 것이 아니다. 특별할 것이 없어 보인다. 하지만 github에서 Watch와 Fork 횟수가 수위에 오를 정도로 인기가 높고 다양한 관련 사이트가 존재한다.
얼핏 보면 무언가 특별한 것이 없어 보이지만 그 안에는 트위터의 프런트 엔드 개발 노하우가 고스란히 녹아 있고 개발자들이 쉽고 빠르게 가져다 활용할 수 있도록 잘 구성해 놓았다. 부트스트랩 소개 페이지(http://twitter.github.com/bootstrap/)에서도 설명하듯이 괴짜 개발자들이 괴짜 개발자들을 위해 만들었기(Built for and by nerds)때문이 아닌가 싶다.
참고 문헌
[1] Bootstrap, from Twitter: http://twitter.github.com/bootstrap/
[2] Stepping Out Width Bootstrap from Twitter: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/stepping-out-with-bootstrap-from-twitter/
[3] CSS3 미디어 쿼리: http://www.w3.org/TR/css3-mediaqueries/
[4] Sass vs. LESS vs. Stylus: http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
[5] 20 Resources for Bootstrap Lovers: http://designshack.net/articles/css/20-awesome-resources-for-twitter-bootstrap-lovers/
출처 - http://helloworld.naver.com/helloworld/textyle/67876
1. 부트스트랩 (Bootstrap, from Twitter) 은 무엇인가?
부트스트랩 (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark Otto와 Jacob Thornton)가 개발한 가볍고 간단한 오픈소스기반 (아파치2.0라이센스) 의 HTML5, CSS3 UI 프레임워크입니다. HTML5, CSS3, Javascript 로 구성되어 있고, 가볍게 트위터 디자인 비슷한 UI 를 빠르게 구현해낼 수 있는 각종 콤포넌트들을 제공해 주고 있습니다.
2. 부트스트랩 다운로드
부트스트랩 홈페이지 (http://twitter.github.com/bootstrap/) 에서 릴리즈된 버전을 다운로드 할 수 있습니다. 현재 2.0 까지 릴리즈됐고, 부트스트랩 저장소 (http://github.com/twitter/bootstrap)를 살펴보면, 현재 2.0.1 버전으로 작업이 진행중이네요.
3. 내 홈페이지에 bootstrap 적용하기
HTML, CSS, Javascript 에 선수지식이 있으면 조예가 깊지 않아도, 부트스트랩을 가져다가 나만의 사이트를 만들 수 있습니다. 이미 샘플로 구성된 부트 스트랩 예제 화면을 참조하면 어렵지 않게 따라 만들 수 있습니다. 또한 부트스트랩 홈페이지에서 자세한 설명까지 설명되어 있으니, 조금만 시간을 내어 읽어보면 원하는 입맛대로 만들어 낼 수 있습니다. 기본적으로 CSS 에 대한 깊은 지식이 없어도 class 를 이용하는 것으로 충분히 원하는 의도대로 만들어 낼 수 있다는 점에서, 디자인에 약한 개발자에게는 나홀로 이쁜 사이트 만들기에 최적화된 아이템임에 틀림없습니다.
저도 간단하게, 샘플 가져다 만들어 봤습니다. (rkJun’s bootstrap) -_-;
4. 커스터마이징
어느정도까지는 내 입맛대로 바꿔서 쓸 수 있어야, 써볼 맛이 납니다. 부트스트랩 페이지에서도 이미 커스터마이즈 기능을 기본으로 제공해 주고 있습니다. 추가로 부츠왓치(http://bootswatch.com/) 사이트를 통해서도 간단하게 색상 변경을 통해 원하는 CSS 를 얻어낼 수도 있습니다. 랩부트스트랩 (http://wrapbootstrap.com/) 에서는 부트스트랩용 테마를 판매하고 있기도 합니다.
5. 웹 개발자의 놀이가 되어 줄 부트스트랩.
사이트의 틀을 부트스트랩이 잡아주니, 나머지는 웹 개발자 혼자서도 어떻게든, 그럭저럭 이쁜 사이트를 만들어 낼 수 있을 듯 합니다. 나머지 코딩은 개발자 몫인 거죠. 부트스트랩에 최적화된 JQuery Plugin 들도 꽤 흥미롭습니다. 특히나 캐러셀 (carousel : 화면을 회전하듯 부드럽게 전환시키는 방식.) 같은 기능들은 왠지 무조건 넣고 봐야 하는 거죠.^^;
6. 더 많은 정보들.
http://www.initializr.com/
15 초안에, HTML5 프로젝트를 시작할 수 있게 해준다는 이니셜라이져(initializr.com) 사이트인데, HTML5 템플릿을 생성해 줍니다. 최근 부트스트랩2 지원되고 있습니다.
http://bootswatch.com/
위에서 언급했던 부트스트랩 커스터마이징해주는 사이트입니다.
http://wrapbootstrap.com/
여기도 위 커스터마이징 얘기할 때 언급하기는 했는데, 부트스트랩용 테마를 판매하고 있습니다.
http://stylebootstrap.info
위에서는 언급하지 않았지만, Bootswatch 처럼 커스터마이징할 수 있는 곳입니다. 똑같은 디자인은 싫어. 라고 하신다면 스타일부트스트랩에서 나만의 디자인으로 간단하게 부트스트랩을 커스터마이징할 수 있습니다. 
https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme#readme
부트스트랩은 반응형 디자인 (Responsive Design)으로 되어 있지만, 아예 모바일에 특화하길 원한다면 jQuery Mobile Bootstrap Theme 를 이용하는 방법도 있습니다.
7. 국내 부트스트랩 적용된 사이트들
http://dogfeet.github.com/
좋은 글들이 많이 올라오는 블로그입니다. Pro Git 한글 번역도 하셨고, 도움이 많이 되는 곳이네요. (아, 부트스트랩 얘기하다 갑자기 샛길로;;)
http://feed9.com/
역시 부트스트랩기반. 소스공개도 되어 있습니다. (https://github.com/sungchi/feed9)
8. 잡담
디자인에 약한 웹 개발자들(특히나 서버사이드개발자) 에게 꽤 흥미로운 물건이다. 쉽고 재밌게 가져다 쓸 수 있는 것도 큰 장점이고. 암튼 이 bootstrap 의 기반에는 less (http://lesscss.org/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.
출처 - http://rkjun.wordpress.com/2012/02/28/bootstrap-2-0-intro/
제목이 거창하지요....ㅎㅎㅎㅎ.
제가 부트스랩을 알고서부터 티스토리 블로그에 적용해볼려고 이것 저것 살펴보고 적용해보고 하는 과정에서 싸여만 가는 정보가 넘 많아서 이렇게 중간에 공유하게 됐습니다.
부트스트랩 (http://twitter.github.com/bootstrap/index.html ) 은 html5, css3, javascript 로 홈페이지 제작을 도와주는 오픈소스기반의 프레임워크입니다.
자세한 내용은 위의 주소에 가면 나와있구요. 한글로 차근 차근 설명한 분이 있는데 nhn 개발팀에 박경일님으로 설명을 대신합니다.
제가 부트스트랩을 접했을때는 무엇보다도 자바스크립트에 대한 지식이 없어도 어느정도 응용이 가능하다는 점이였습니다.
또한 테마 또한 여러가지를 제공하고 있고 무엇보다도 격자(Grid) 레이아웃을 지원하기 때문에 반응형 웹사이트를 제작할 수 있는 미디어쿼리 작성이 쉽다는 점입니다.
커스터마이징(Customizing)
부트스트랩은 css 나 js 등 원하는 구성요소만 가저다가 사용할 수 있습니다.
선택을 한 후 맨 아래에 다운로드 버튼을 클릭하면 됩니다.
부트스트랩 사이트에서도 원하는 부분만을 구성해서 다운로드 할수도 있지만 직접 색상을 수정하는것을 미리보기하면서 설정할 수도 있습니다.
http://stylebootstrap.info/
http://bootswatch.com/
개인적으로 두가지 정도의 테마가 맘에 드는것이 있는데 http://bootswatch.com/ 사이트에 가서 다운로드를 클릭하면 css 파일을 다운로드 받을수 있습니다.
다양한 샘플과 데모사이트도 있습니다. 커스터마이징을 하기 전에 둘러보시는것이 좋습니다.
아래는 부트스트랩에 있는 샘플페이지 입니다.
샘플 => http://twitter.github.com/bootstrap/examples.html
데모 페이지 => https://wrapbootstrap.com/
데모 페이지 중에서 맘에 드는 몇가지를 추려 봤습니다.
그중에서 개인적으로 http://wrapbootstrap.com/preview/WB0LX21H9 가 미리보기 하기도 좋고 색상도 좋습니다.
아쉬운점은 배경이 맘에 안드는군요..ㅎㅎㅎㅎㅎ
여하튼 데모 페이지 에 보시면 여러 사이트가 있으니 참고하시기 바랍니다.
jQuery UI Bootstrap
사이트를 둘러보고 제작해보니 아쉬운점이 있었습니다. jquery는 부드러운 화면이동이라든가 jquery ui 에서 제공하는 아이콘이 있습니다.
부트스트랩도 아이콘을 제공하고 사용하는데요.....이런 부트스트랩의 아쉬운 부분을 jquery 를 이용해서 좀더 업그레이드시키는 노력이 있습니다.
http://addyosmani.github.com/jquery-ui-bootstrap/
여기서도 다운로드를 할 수 있습니다. 다운로드 받아보니 각각 분리되어 있어서 원하는 부분만 취할 수도 있습니다.
부트스트랩의 메인메뉴의 드롭다운을 보면 클릭하면 보여지고 감쳐지는데 반해 jquery에서는 부드럽게 내려오는 슬라이딩 효과를 준것 같습니다.
역시 부드러운 이동이나 jquery 의 달력등이 강점인것 같습니다.
업데이트나 기술적인 부분에 대해서는 블로그나 github에서 더 알아볼 수 있습니다.
http://addyosmani.com/blog/
https://github.com/addyosmani/jquery-ui-bootstrap
WordPress Bootstrap
부트스트랩은 워드프레스에서도 적용됩니다.
무료로 부트스트랩의 테마를 사용할 수도 있고, 사이드바가 있는경우, 없는경우 모두 있고, 미디어쿼리나 옵션 등 다양하게 이용할 수 있습니다.
http://320press.com/wpbs/
코드나 적용방법 등 사용할 부분에 대해서 잘 알려주고 있습니다.
워드프레스를 위한 테마도 있지만 루츠 테마도 있습니다.
부트스트랩을 이용해서 티스토리 스킨을 만들어 봤습니다.
지금 블로그에 적용되어 있는 하단에 탭 아코디언을 적용해봤고, 사이드바는 아예 모두 표시하는것을 전제로 아코디언으로 만들어봤습니다.
출처 - http://demun.tistory.com/2133
1. 부트스트랩 (Bootstrap, from Twitter) 은 무엇인가?
부트스트랩 (http://twitter.github.com/bootstrap/) 은 트위터에 근무하는 두 명의 엔지니어 (Mark Otto와Jacob Thornton)가 개발한 가볍고 간단한 오픈소스기반 (아파치2.0라이센스) 의 HTML5, CSS3 UI 프레임워크입니다. HTML5, CSS3, Javascript 로 구성되어 있고, 가볍게 트위터 디자인 비슷한 UI 를 빠르게 구현해낼 수 있는 각종 콤포넌트들을 제공해 주고 있습니다.
2. 부트스트랩 다운로드
부트스트랩 홈페이지 (http://twitter.github.com/bootstrap/) 에서 릴리즈된 버전을 다운로드 할 수 있습니다. 현재 2.0 까지 릴리즈됐고, 부트스트랩 저장소 (http://github.com/twitter/bootstrap)를 살펴보면, 현재 2.0.1 버전으로 작업이 진행중이네요.
3. 내 홈페이지에 bootstrap 적용하기
HTML, CSS, Javascript 에 선수지식이 있으면 조예가 깊지 않아도, 부트스트랩을 가져다가 나만의 사이트를 만들 수 있습니다. 이미 샘플로 구성된 부트 스트랩 예제 화면을 참조하면 어렵지 않게 따라 만들 수 있습니다. 또한 부트스트랩 홈페이지에서 자세한 설명까지 설명되어 있으니, 조금만 시간을 내어 읽어보면 원하는 입맛대로 만들어 낼 수 있습니다. 기본적으로 CSS 에 대한 깊은 지식이 없어도 class 를 이용하는 것으로 충분히 원하는 의도대로 만들어 낼 수 있다는 점에서, 디자인에 약한 개발자에게는 나홀로 이쁜 사이트 만들기에 최적화된 아이템임에 틀림없습니다.
저도 간단하게, 샘플 가져다 만들어 봤습니다. (rkJun’s bootstrap) -_-;
4. 커스터마이징
어느정도까지는 내 입맛대로 바꿔서 쓸 수 있어야, 써볼 맛이 납니다. 부트스트랩 페이지에서도 이미 커스터마이즈 기능을 기본으로 제공해 주고 있습니다. 추가로 부츠왓치(http://bootswatch.com/) 사이트를 통해서도 간단하게 색상 변경을 통해 원하는 CSS 를 얻어낼 수도 있습니다. 랩부트스트랩 (http://wrapbootstrap.com/) 에서는 부트스트랩용 테마를 판매하고 있기도 합니다.
5. 웹 개발자의 놀이가 되어 줄 부트스트랩.
사이트의 틀을 부트스트랩이 잡아주니, 나머지는 웹 개발자 혼자서도 어떻게든, 그럭저럭 이쁜 사이트를 만들어 낼 수 있을 듯 합니다. 나머지 코딩은 개발자 몫인 거죠. 부트스트랩에 최적화된 JQuery Plugin 들도 꽤 흥미롭습니다. 특히나 캐러셀 (carousel : 화면을 회전하듯 부드럽게 전환시키는 방식.) 같은 기능들은 왠지 무조건 넣고 봐야 하는 거죠.^^;
6. 더 많은 정보들.
http://www.initializr.com/
15 초안에, HTML5 프로젝트를 시작할 수 있게 해준다는 이니셜라이져(initializr.com) 사이트인데, HTML5 템플릿을 생성해 줍니다. 최근 부트스트랩2 지원되고 있습니다.
http://bootswatch.com/
위에서 언급했던 부트스트랩 커스터마이징해주는 사이트입니다.
http://wrapbootstrap.com/
여기도 위 커스터마이징 얘기할 때 언급하기는 했는데, 부트스트랩용 테마를 판매하고 있습니다.
http://stylebootstrap.info
위에서는 언급하지 않았지만, Bootswatch 처럼 커스터마이징할 수 있는 곳입니다. 똑같은 디자인은 싫어. 라고 하신다면 스타일부트스트랩에서 나만의 디자인으로 간단하게 부트스트랩을 커스터마이징할 수 있습니다.
https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme#readme
부트스트랩은 반응형 디자인 (Responsive Design)으로 되어 있지만, 아예 모바일에 특화하길 원한다면 jQuery Mobile Bootstrap Theme 를 이용하는 방법도 있습니다.
7. 국내 부트스트랩 적용된 사이트들
http://dogfeet.github.com/
좋은 글들이 많이 올라오는 블로그입니다. Pro Git 한글 번역도 하셨고, 도움이 많이 되는 곳이네요. (아, 부트스트랩 얘기하다 갑자기 샛길로;;)
http://feed9.com/
역시 부트스트랩기반. 소스공개도 되어 있습니다. ( https://github.com/sungchi/feed9)
8. 잡담
디자인에 약한 웹 개발자들(특히나 서버사이드개발자) 에게 꽤 흥미로운 물건이다. 쉽고 재밌게 가져다 쓸 수 있는 것도 큰 장점이고. 암튼 이 bootstrap 의 기반에는 less (http://lesscss.org/) 기술도 사용되어지고 있는데 이게 또 꽤 흥미로운데, 이건 나중에 차차 다시 포스팅해야겠다.
출처 - http://rkjun.wordpress.com/2012/02/28/bootstrap-2-0-intro/
출처 - http://www.hwangc.com/wordpress-twitter-bootstrap-themes-10/
'Web > Common' 카테고리의 다른 글
| HTTPS 및 TCP를 통한 SSL 및 SOAP 보안의 인증서 유효성 검사 차이점 (0) | 2013.01.09 |
|---|---|
| screen(display) resolution (0) | 2012.11.20 |
| http - X-Forwarded-For 헤더 필드 (0) | 2012.08.21 |
| 움직이는 GIF 파일 배경 투명하게 (0) | 2012.07.22 |
| http - referer 헤더 속성 (2) | 2012.06.28 |
