간단히 말하면 웹기반의 ui프레임웍입니다. 기존 웹기반의 프레임웍과 다른 점은 HTML5에 특화된 프레임웍이라는 점입니다.
그래서 구시대적인 table을 사용하지않았습니다. 센챠나 제이쿼리모바일보다는 좀더 낮은단계의 프레임웍입니다.
좀더 기초적인 부분의 유아이 엔진을 원하신다면 부트스트랩을 권합니다.
(참고로 백본은 세트로 써야합니다.)
http://twitter.github.com/bootstrap/index.html
부트스트랩이란?
출처 : http://martian36.tistory.com/1142
트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다. html로 웹페이지의 뼈대를 만들고 스타일시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 미리 정의된 클래스 선택자를 html 코드에 삽입만 하면 레이아웃과 각종 요소가 만들어집니다. 부트스트랩의 스타일시트는 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있는 플랫폼으로 큰 인기를 얻고 있습니다. 웹사이트를 너무 쉽게 만들 수 있다는 점에서 진정한 웹디자인이 아니라는 우려의 목소리도 나올 정도입니다.
스타일시트의 재활용
스타일시트로 웹디자인을 하다보면 수많은 선택자에 CSS 속성과 값이 선언돼있습니다. 스타일시트를 다뤄본 분이라면 아이디 선택자 보다는 클래스 선택자를 사용하는 것이 훨씬 편리하다는 것을 알게 됩니다. 왜냐하면 한번 선언해 놓으면 여러 곳에서 재사용이 가능하기 때문이죠. 하나의 클래스 선택자를 만들고 이 선택자에 대해서 버튼을 만들어 놓으면 버튼이 필요한 곳에 이 선택자를 사용하면 됩니다. 색상 변경이 필요할 경우 다른 선택자를 이용해 배경 색상만 변경해주면 되겠죠.
다음과 같이 저장 버튼을 위한 클래스 선택자를 만들고 버튼을 위한 속성과 값을 선언했습니다.
<button class="save">저장하기</button>
.save {
background: #ddd;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #999;
color: #333;
text-shadow:1px 1px 1px #fff;
}
그러면 위에서 선언된 대로 웹페이지에는 버튼이 만들어질 것입니다. 그런데 위의 .save라는 선택자는 특수한 경우에 사용되는 단어가 됩니다. 즉 저장할 버튼에만 사용될 것을 예상할 수 있습니다. 그러면 이 선택자의 이름을 일반적인 용어를 사용해서 .button이라고 만들어주면 다른 웹페이지에서 버튼을 만들고자 할 때 이 선택자를 넣어주면 될 것이고 단지 저장하기 버튼에만 사용하는 것이 아니라 어떤 곳에서도 재활용이 가능해질 것입니다.
<button class="button">저장하기</button>
.button {
background: #ddd;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #999;
color: #333;
text-shadow:1px 1px 1px #fff;
}
그런데 버튼의 색상을 변경해서 적용하고자 할 경우 다음과 같이 할 것입니다.
<button class="button-blue">저장하기</button>
.button-blue {
background: #08c;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #999;
color: #fff;
text-shadow:1px 1px 1px #333;
}
그런데 위의 버튼을 보면 공통적으로 적용되는 곳이 있습니다. .blue-button에는 .button이라는 선택자에 이미 있는 속성이 있으니 다음과 같이 수정하고 두개의 선택자를 사용하면 같은 버튼이 나타나면서 코드의 양은 줄어들게 됩니다.
<button class="button button-blue">저장하기</button>
.button-blue {
background: #08c;
border: 1px solid #999;
color: #fff;
text-shadow:1px 1px 1px #333;
}
녹색 버튼을 만들고자 하면 이미 만들어놓은 두개의 선택자에 새로운 선택자를 추가하고 배경 색상만 변경해서 적용하면 될 것입니다.
<button class="button button-blue button-green">저장하기</button>
.button-green {
background: #51a351;
}
간단한 예를 들었지만 이것이 복잡한 형태의 그래디언트 효과나 박스 그림자 효과 등 여러가지가 추가된다면 이러한 방식의 스타일시트 재활용이 아주 편리해질 것입니다.
트위터 부트스트랩의 스타일시트는 이러한 이미 선언해 놓은 속성과 값을 재활용하기 쉽게 만들어놓은 스타일시트 라이브러리입니다. 위와 같은 버튼 뿐만 아니라 form에 사용되는 각종 태그, 아이콘, 드랍다운 메뉴 등 웹페이지에 사용되는 모든 요소에 대해서 스타일시트를 미리 만들어 놓고 html 페이지의 태그에 선택자만 삽입하면 모든 디자인이 자동으로 만들어지도록 해놓은 것입니다.
부트스트랩은 이처럼 간단하게 선택자만 삽입해도 웹페이지가 멋지게 만들어지지만 기능을 확장시키기 위해서 자바스크립트를 사용하고 있습니다. 그 기능이란 팝업창, 드랍다운 메뉴, 툴팁, 이미지 슬라이더, 등 가장 많이 사용하는 자바스크립트가 포함돼있으며 버전이 높아지면서 기능이 추가되고 있습니다.
부트스트랩이 나타난 배경
웹개발 시 하나의 프로젝트는 한사람에 의해 만들어지는 것이 아니라 개발자의 취향에 따라 도구도 다르고 자신만의 라이브러리를 사용하기도 해서 서로 다른 인터페이스를 사용한 여러 사람들의 공동작업으로 이루어집니다. 그러면 디자인도 달라지고 관리하기도 힘들죠. 트위터의 개발자인 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)은 이러한 다른 인터페이스에서 오는 관리상의 어려운 점을 개선하기 위해서 정형화된 인터페이스를 가진 툴을 만들었습니다. 정식으로 만들어진 것이 아니라 처음에는 주말과 가외 시간을 이용해서 1년동안 작업을 해서 다른 개발자들에게 선보였는데 반응이 좋아 많은 개발자들이 사용하기 시작했고 단순한 툴이 아닌 플랫폼으로 발전했습니다.
http://twitter.github.com/bootstrap/index.html
2011년 8월에 트위터는 부트스트랩을 오픈소스로 공개했습니다. 그 반응은 폭발적이어서 오픈소스 웹하드 서비스인 깃허브(Github)에서 최고의 인기를 얻고 있으며 부트스트랩과 관련된 프로젝트는 현재 수백개에 이르고 있습니다.
http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources
위 링크로 가면 아래의 화면이 나오는데 현재 268개의 프로젝트가 부트스트랩과 관련돼 있습니다.
위 사이트에 있는 것만이 아니라 다른 프로젝트도 많이 있으며 새롭게 발견되는 대로 추가되고 있습니다. 왜 이런 프로젝트들이 부트스트랩과 관련을 맺으려고 할까요? 그만큼 부트스트랩이 획기적인 플랫폼이라는 것을 증명하는 것입니다.
