워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

블로그 인기글

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그

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