제목 : 트위터 부트스트랩 - 디자이너도 놀라워 할 매끈하고 직관적인 웹 사이트 디자인의 비밀(432페이지) 영문 제목 : Twitter Bootstrap for Web Development 원고는 한달 전에 완료가 됐지만 리뷰와 부트스트랩 3.0 버전 추가 수록으로 인해 책의 출간이 다소 늦어졌습니다. 이제 표지 디자인이 나왔고 모든 편집이 완료돼서 오늘부터 인쇄 작업에 들어가며 내일부터 각 인터넷 서점에 예약 판매를 올릴 예정입니다. 부트스트랩 3.0 버전이 현재 92% 진행됐는데 이달 말 정도면 완료되리라 생각합니다. 이전 글에서도 언급했듯이 부트스트랩 3.0은 모바일 우선 지원(Mobile First)이라서 2.0 버전과 좀 다릅니다. 레이아웃 방법도 달라지고 기능도 모바일에 맞게 줄어들었습니다...
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Bootstrap Android Application 프로그램 사이트 : http://www.androidbootstrap.com/ tapestry-bootstrap Tapestry 5 Twitter Bootstrap Module 프로그램 사이트 : https://github.com/trsvax/tapestry-bootstrap grails-bootstrap-ui 프로그램 사이트 : https://github.com/Grailsrocks/grails-boot..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. DATE RANGE PICKER 날짜 범위를 선택할 수 있습니다. 프로그램 사이트 : https://github.com/dangrossman/bootstrap-daterangepicker데모 사이트 : http://www.dangrossman.info/2012/08/20/a-date-range-picker-for-twitter-bootstrap/ Datepicker for Bootstrap 날짜 선택 프로그램 사이트 및 데모 사이트 : http://www.e..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. X-editable 링크를 클릭하면 팝오버 창이 나타나서 해당 내용을 수정할 수 있는 폼 에디터입니다. 프로그램 사이트 : http://vitalets.github.com/x-editable/데모 사이트 : http://vitalets.github.com/x-editable/demo.html jqBootstrapValidation 폼 유효성 검사 플러그인입니다. 프로그램 사이트 및 데모 사이트 : http://reactiveraven.github.com/jq..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. JASNY BOOTSTRAP 트위터 부트스트랩을 변형하여 여러가지 기능을 추가한 별개의 프레임워크입니다. 프로그램 사이트 및 데모 사이트 : http://jasny.github.com/bootstrap/ jquery-addresspicker 주소를 입력하면 지도가 나타나고 마커를 이동하면 주소가 업데이트됩니다. 프로그램 사이트 : https://github.com/elmariachi111/jquery-addresspicker데모 사이트 : http://mng..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Very simple jQuery color picker 폼에 컬러피커를 추가할 수 있습니다. 프로그램 사이트 : https://github.com/tkrotoff/jquery-simplecolorpicker데모 사이트 : http://plnkr.co/edit/VVclW0?p=preview bootstrap-wysihtml5 textarea에 간단한 구조의 편집기 도구모음을 추가할 수 있습니다. 프로그램 사이트 : https://github.com/jholl..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. d3-bootstrap-plugins 이 플러그인은 수많은 점이 만들어지고 각 점마다 마우스를 올리면 팝오버가 나타납니다. 아직 적당한 사용처를 알아내지 못했지만 유용할 듯합니다. 프로그램 사이트 : https://github.com/zmaril/d3-bootstrap-plugins데모 사이트 : http://bl.ocks.org/zmaril/3012212 bootstrap-notify 다양한 형태의 알림 메시지를 만들 수 있는 플러그인입니다. 프로그램 사이..
현재 부트스트랩 3.0이 개발 중에 있고 80% 정도 완성돼 있어서 조만간 출시될 예정입니다. 부트스트랩은 1.0 버전에서 데스트탑 전용으로 나왔고 2.0은 모바일 겸용, 3.0은 모바일 우선 지원, 데스크탑 겸용으로 진화하고 있는 것입니다. 현재 부트스트랩 책을 2.0 버전의 마지막 버전인 2.31을 기준으로 만들었지만 이 책이 나올 즈음에는 3.0 정식 버전이 나오겠죠. 그래서 책에 3.0 버전에 관한 내용을 수록하기 위해 작업하고 있습니다. 책을 두가지 버전에 대해 다루고 있는 이유는 우선 3.0 버전이 모바일 우선 지원이다 보니 IE7 버전을 지원하지 않습니다. 국내에서 아직도 IE7을 사용하고 있는 사용자가 상당하다보니 3.0 버전만 다루는데 무리가 있습니다. 두번째 이유로는 부트스트랩은 자바스..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. jquery-bootpag 컨텐트를 페이지로 만들 수 있는 플러그인입니다. 프로그램 사이트 및 데모 사이트 : http://botmonster.com/jquery-bootpag/#pro-page-7 tableclothjs 다양한 형태의 테이블을 만들 수 있습니다. http://tableclothjs.com/ pagedown-bootstrap 간단한 구조의 위지윅 편집기를 만들 수 있습니다. 프로그램 사이트 : https://github.com/samwilli..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Bootstrap Modal 부트스트랩에는 기본적으로 팝업창인 모달이 포함돼있지만 한가지 종류만 있습니다. 이 플러그인은 다양한 형태의 모달을 제공합니다. 프로그램 사이트 : https://github.com/jschr/bootstrap-modal/데모 사이트 : http://jschr.github.com/bootstrap-modal/ Fuel UX 트위터 부트스트랩에는 이미 폼을 만들기 위한 스타일시트가 있지만 이 플러그인을 사용하면 부트스트랩의 폼을 더욱..
1-1-3 웹 디자인 프레임워크프레임워크란 프로그램을 더 쉽고 빠르게 만들기 위해서 미리 만들어진 도구와 기능을 가진 코드의 라이브러리입니다. 정형화된 틀이 갖춰져 있어서 프레임워크라고 합니다. 웹 디자인을 하다 보면 정형화된 코드는 자주 사용하게 되므로 별도의 파일을 만들어서 저장하고 필요할 때마다 복사해서 사용합니다. 이른바 스니핏(snippet)이란 것인데 자주 사용하는 코드를 스니핏으로 만들어놓고 사용하면 다시 작성하지 않아도 되므로 빠르게 웹사이트를 만들 수 있습니다. 웹 디자인에 사용되는 정형화된 코드의 집합체인 프레임워크는 종류가 다양합니다. 보일러 플레이트(Boiler Plate: http://html5boilerplate.com/), 파운데이션(Foundation: http://found..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Acc-wizard 부트스트랩의 어코디언을 이용한 위자드(마법사)를 만들 수 있는 플러그인입니다. 이를 응용해서 쇼핑몰의 결제 단계별 과정이나 프로그램의 설치과정, 튜토리얼을 만들 수 있습니다. 프로그램 사이트: https://github.com/sathomas/acc-wizard데모 사이트: http://sathomas.me/acc-wizard/#prerequisites bootstrap-lightbox 이미지를 클릭하면 큰 이미지의 팝업창이 나오는 라이트..
지난 두달간의 작업으로 트위터 부트스트랩 책 원고를 마치고 현재 리뷰 중에 있습니다. 리뷰를 마치면 디자인 작업과 인쇄를 거쳐 3월 중순경에 책이 출간될 예정입니다. 트위터 부트스트랩은 그동안 나온 웹디자인 프레임워크 중에서도 탁월한 기능으로 인해 많은 인기를 얻으며 현재 2.3.0 버전까지 나와있고 향후 출시될 3.0 버전은 기존의 모바일 겸용에서 모바일 우선 지원 형태로 진화될 것으로 보입니다. 책의 내용은 3개의 장으로 구성되며 첫번째 장은 부트스트랩 기초, 두번째 장은 Less 프리프로세서, 세번째 장은 부트스트랩으로 디자인하기 입니다. 부트스트랩 스타일시트는 Less라는 프리프로세서로 만들어졌기 때문에 2장에 Less 사용법을 포함시켰습니다. 각 장의 간략한 내용을 알아보면 다음과 같습니다. 1..
부트스트랩의 특징 웹페이지를 쉽게 만들 수 있다 부트스트랩의 홈페이지에서도 언급하고 있듯이 부트스트랩을 다루기 위해서는 html과 CSS에 대한 지식을 필요로 합니다. 그렇다고 깊은 지식이 필요한 것은 아니며 html 태그의 사용법, 역할을 알고 있으면 되고 CSS는 혼자서 레이아웃을 만들줄만 알면 됩니다. 웹페이지는 html 태그로 뼈대가 만들어지며 태그에 CSS 선택자를 추가하고 이 선택자에 대해서 스타일시트에서 속성과 값을 선언해서 레이아웃을 만들게 됩니다. 그런데 선택자는 이미 부트스트랩 스타일시트에서 만들어 놓았으니 태그에 선택자만 삽입하면 되는 것이죠. 다만 어떤 선택자를 어느곳에 삽입해야하는지를 알아야하는 것입니다. html 코드의 재활용 부트스트랩은 이미 만들어진 스타일시트를 재활용하는 것..
부트스트랩이란? 트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다. html로 웹페이지의 뼈대를 만들고 스타일시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 미리 정의된 클래스 선택자를 html 코드에 삽입만 하면 레이아웃과 각종 요소가 만들어집니다. 부트스트랩의 스타일시트는 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있는 플랫폼으로 큰 인기를 얻고 있습니다. 웹사이트를 너무 쉽게 만들 수 있다는 점에서 진정한 웹디자인이 아니라는 우려의 목소리도 나올 정도입니다. 스타일시트의 재활용 스타일시트로 웹디자인을 하다보면 ..
"트위터 부트스트랩: 디자이너도 놀라워할 매끈하고 직관적인 웹 사이트 제작의 비밀" 책 소스코드 2013.3.17일 현재 부트스트랩 3.0 버전 2013.9.27일 현재 부트스트랩 3.0 버전 압축을 풀고 _gp_pages 폴더에 들어가서 index.html 파일을 선택하면 브라우저에 바로 열립니다. 참고 사이트 서적 웹사이트 : http://twitter-bootstrap.kr/ 2.0 버전으로 디자인하기 : http://twitter-bootstrap.kr/bootstrap-demo/ 3.0 버전으로 디자인하기 : http://twitter-bootstrap.kr/bootstrap-demo2/ 위 3.0 버전 데모 사이트는 3월 17일 현재 버전으로 디자인 한 것입니다. 부트스트랩 관련 플러그인이 업..