작성일자
카테고리 부트스트랩/부트스트랩으로 디자인하기

현재 부트스트랩 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 현재)

저작자 표시 비영리 변경 금지
신고
BlogIcon 윈컴이

정말 많이 줄었네요.. ㅎㅎ;
베타인가요?

BlogIcon 베누시안

아직 베타도 아니고 현재 파일 상태로 제가 구성해본 것입니다. 버튼의 그래디언트나 다른 부분이 추가되면 스타일시트는 더 늘어나겠죠. 하지만 되도록이면 줄이려고 하는 것같습니다.

BlogIcon 윈컴이

그렇군요 ㅎㅎ
다시 보니 이쁘기도 하네요 :)

BlogIcon 윈컴이

혹시 다운로드 받아서 테스트해볼수는 없을까요? ㅎㅎ

BlogIcon 베누시안

파일 올렸습니다.

BlogIcon 윈컴이

감사합니다 ^^

BlogIcon 메리앤

책에 3.0버전도 수록하시는군요.
당분간은 2.0버전을 더 선호하게 되겠지만 기대가 됩니다.

BlogIcon 베누시안

안녕하세요. 네. 그러다 보니 분량이 좀 더 늘어나겠습니다. 저도 퍼센트로 디자인하기는 처음인데 적용하기는 쉽네요.

ws

전 프로그래밍과 전혀 관련없는 취미로 하는 사람인데요.. 초짜인 제가 봐도 대단하네요..
xe/gnu/kimsq 등을 이용해서 홈페이지를 새로 만들어볼가해서 찾던중 오게 되었습니다..
bootstrap처럼 편하게 사용할수있는 jquery도 있을까요?

BlogIcon 베누시안

HTML과 CSS를 어느 정도 알고 부트스트랩을 사용하면 웹디자인하기는 정말 쉽습니다.

수빈

안녕하세요!! 트위터부트스트랩 책을 사서 지금 하구 있는데요 ㅠㅡㅠ 왜 처음부터 진짜 똑같이 따라했는데 안되는지모르겠어요...ㅠㅡㅠ 버전이 다르면 그런가요??
부트스트랩 2.3.0버전어디서 구하나요... 지금 홈페이지에는 2.3.2.이던데... 처음부터 안되니까 머리 터질것같아ㅛㅇ...ㅠㅡㅠ 도와주세요...

BlogIcon 베누시안

2.0 버전은 별 차이가 없습니다. 첨부 파일의 다 만들어진 코드를 참고해서 틀린 곳을 찾아보세요. 다른 버전을 내려받는 방법은 아래 글을 참고하세요.

http://martian36.tistory.com/1253

티스토리 툴바