현재 부트스트랩 3.0이 개발 중에 있고 80% 정도 완성돼 있어서 조만간 출시될 예정입니다. 부트스트랩은 1.0 버전에서 데스트탑 전용으로 나왔고 2.0은 모바일 겸용, 3.0은 모바일 우선 지원, 데스크탑 겸용으로 진화하고 있는 것입니다. 현재 부트스트랩 책을 2.0 버전의 마지막 버전인 2.31을 기준으로 만들었지만 이 책이 나올 즈음에는 3.0 정식 버전이 나오겠죠. 그래서 책에 3.0 버전에 관한 내용을 수록하기 위해 작업하고 있습니다.
책을 두가지 버전에 대해 다루고 있는 이유는 우선 3.0 버전이 모바일 우선 지원이다 보니 IE7 버전을 지원하지 않습니다. 국내에서 아직도 IE7을 사용하고 있는 사용자가 상당하다보니 3.0 버전만 다루는데 무리가 있습니다.
두번째 이유로는 부트스트랩은 자바스크립트 플러그인을 13개를 기본으로 사용하고 있는데 웹사이트의 모든 기능을 다루는데 부족합니다. 그래서 부트스트랩 관련 프로젝트가 수백개에 이르고 이들 제3자(Third Party) 플러그인은 2.0 버전을 기준으로 만들어졌습니다. 부트스트랩이 모바일 우선으로 전환되면서 레이아웃이 유동폭으로 변경됐고 많은 플러그인이 3.0 버전을 지원하지 못하고 있으며 앞으로 3.0 정식 버전이 나오면 이에 맞춰 각 플러그인들이 개정판을 내놓을 것이므로 모든 플러그인이 제대로 작동하는데 상당한 시간이 걸릴것입니다.
세번째 이유로는 3.0 버전이 유동폭을 기준으로 하다보니 사용되는 단위가 픽셀에서 퍼센트로 바뀌고 rem이라는 새로운 단위를 사용하고 있습니다. 그동안 픽셀만 다뤄본 분들은 적응하는데 어려움이 있을 것입니다. 하지만 유동폭 레이아웃은 많은 잇점이 있습니다. 3.0 버전으로 디자인을 해보니 미디어쿼리를 많이 사용하지 않더라도 디자인 변경이 자유롭습니다.
네번째로 모바일 우선이라는 측면에서 2.0 버전의 기능들이 많이 축소됐습니다. 보다 가볍게 하기 위해서인지 스타일시트가 많이 줄었죠. 2.31 버전은 스타일시트가 7000줄이지만 3.0 버전은 5000줄에 못미칩니다.
이러한 이유로 인해서 부트스트랩을 처음 소개하는 책에서 모바일 우선 지원이라는 3.0 버전만 다루기에는 성급한 점이 있을 것으로 생각되어 두개의 버전에 대해 내용을 수록하기로 했습니다. 제 생각으로는 새로운 버전이 나오더라도 두개의 버전이 공존해서 사용될 가능성이 많을 것입니다. 오히려 2.0 버전을 더 선호하게 될 것 같습니다.
부트스트랩 3.0은 아직 개발 중인 상태이지만 레이아웃이나 대부분의 요소가 완료됐으며 어떤 부분을 추가할지 또는 제거할지 선택의 상황에 있으며 모바일 우선이라는 조건에 맞게 조정이 이뤄지고 있습니다.
부트스트랩 3.0의 초기화면입니다. 상단의 메뉴는 아직 완료되지 않은 상태이므로 제가 임의로 만들었습니다. 얼마전까지 Gallery 페이지가 있어서 부트스트랩으로 만들어진 웹사이트의 갤러리를 볼 수 있었지만 이부분을 따로 떼어서 http://expo.getbootstrap.com/ 로 이동해서 별도의 사이트에서 볼 수 있도록 했습니다.
파일의 기본 구조를 보면 스타일시트가 기본 스타일시트와 모바일용 스타일시트가 통합됐으므로 한 종류만 있습니다. 아이콘은 기존의 png 이미지를 폰트 아이콘으로 교체했으므로 img 폴더가 사라지고 fonts 폴더가 있으며 이 폴더 안에 5종류의 폰트가 있습니다. 다양한 종류의 폰트 확장자가 있는 것은 웹브라우저별로 다른 확장자를 사용하기 때문입니다.
<!--[if lt IE 9]>
<script src="assets/js/respond/respond.min.js"></script>
<![endif]-->
외부 자바스크립트 플러그인인 respond.js 를 사용해서 인터넷 익스플로러 8 이하의 버전에서도 미디어쿼리가 작동되도록 했습니다. 하지만 부트스트랩 3.0은 IE7버전 이하 버전을 전혀 지원하지 않으므로 실제로는 IE8에서만 미디어쿼리가 작동합니다. 이 플러그인이 작동되려면 웹서버 환경에서 html 파일을 열어야 합니다.
부트스트랩 3.0에서 가장 혁신적으로 바뀐 부분이 그리드 시스템입니다. 이전 버전과 동일하게 12컬럼 레이아웃을 사용하며 기존의 고정폭과 유동폭 두가지 레이아웃에서 유동폭 한가지 레이아웃으로 전환했습니다.
|
화면폭 컬럼 거터 크기 |
767px이하 |
768px 이상 |
|
1컬럼 폭 |
100% |
8.33..% |
|
거터(좌우 패딩) 폭 |
없음 |
좌우측 패딩 15픽셀 |
그러므로 컬럼의 폭은 .row나 .container에 폭이 정해지면 이 폭에 따라서 퍼센트에 의해 컬럼의 폭이 정해질 것입니다. 부트스트랩 3.0에서 .container의 폭은 다음과 같습니다.
|
화면폭 컬럼 거터 크기 |
767px이하 |
768px 이상 991px 이하 |
992px 이상 1199px 이하 |
1200px 이상 |
|
.container 폭 |
100% |
728px |
940px |
1170px |
|
거터(좌우 패딩) 폭 |
없음 |
좌우 패딩 15px |
좌우 패딩 15px |
좌우 패딩 15px |
자세한 변경 내용은 다음의 링크에 파일을 저장했으니 참고하시면 됩니다.
http://twitter-bootstrap.kr/bootstrap3
원본 사이트는 아래의 링크입니다.
https://github.com/twitter/bootstrap/tree/3.0.0-wip
위 링크에서 파일을 내려받아 html 파일을 실행하면 스타일시트와 자바스크립트 링크가 없습니다. 그리고 정리도 안돼있어서 정리한 파일은 아래의 파일을 내려받아 실험해보면 됩니다.
bootstrap-3.0.0-wip.zip(2113.3.17 현재)
