지난 10일 동안 많은 부분의 수정이 있었습니다. 대부분 버그 수정이고 중요한 부분은 그동안 기본 버튼의 클래스를 .btn만 사용했는데 .btn과 .btn-default를 같이 사용하도록 했습니다. 다른 색상의 버튼은 그대로입니다. 버튼 크기를 다르게 하는 선택자를 사용할 때도 .btn-default를 사용해야합니다. 미리보기 사이트 --> http://twitter-bootstrap.kr/bootstrap3/index.html내려받기 -->
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. 이번 글은 윈도우 8 메트로 디자인 관련입니다. Cosmo 프로그램 사이트 및 데모 사이트 : http://bootswatch.com/cosmo/ 아래의 화면의 다운로드 메뉴에서 bootstrap.css 링크를 우클릭해서 다른이름으로 링크 저장을 선택하면 파일로 받을 수 있습니다. 위 화면에서 Preview 메뉴를 선택하면 여러가지 테마를 볼 수 있으며 위와 마찬가지 방법으로 스타일시트를 내려받을 수 있습니다. 아래 그림은 slate라는 메뉴를 선택했을 때 ..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. bootstro.js 웹페이지를 둘러 볼 수 있는 가이드를 만드는 플러그인입니다. 프로그램 사이트 : https://github.com/clu3/bootstro.js데모 사이트 : http://clu3.github.io/bootstro.js/ Layout it 웹페이지 요소를 드래그해서 간편하게 만들 수 있는 사이트입니다. 프로그램 사이트 : http://www.layoutit.com/build Bootply 드랍다운 메뉴에서 스니핏 코드를 선택해서 코드를 ..
트위터 부트스트랩은 문서 파일에 있는 내용을 그대로 복사해서 사용하거나 스니핏을 생성해서 빠르게 웹페이지를 만들 수 있는 프레임워크입니다. 이번에 소개할 스타터 킷은 웹사이트에서 사용되는 거의 대부분의 페이지가 이미 만들어져 있어서 더 쉽게 웹사이트를 만들 수 있는 도구입니다. 더구나 요즘 인기있는 아이소톱(Isotope) 플러그인을 사용해서 썸네일의 높이에 상관없이 배치가 잘 돼고 카테고리를 선택하면 썸네일의 분류도 가능한 기능이 추가돼있어서 핀터레스트 사이트와 같은 웹사이트를 만들 수 있습니다. 제가 만든 트위터 부트스트랩 책과 비슷한 내용들이 들어있더군요. http://www.bootstraptor.com/ 위 링크로 이동하면 아래와 같은 화면이 나옵니다. 이 킷의 특징을 알아보겠습니다. 1. 아이..
오늘 현재로 중요한 부분에서 변경이 있었네요. 그리드 시스템에서 .col-span-숫자를 사용하던 것을 .col과 .col-lg-숫자 형태로 변경됐습니다. 그러면서 모바일 기기에 사용되는 그리드 시스템은 .col과 .col-sm-숫자 형태로 바뀌었습니다. lg는 large이고 sm은 small을 의미합니다. 데스트탑용 그리드 시스템 선택자 오프셋 그리드는 이전과 같이 .col-offset-숫자 형태를 사용합니다. 모바일 기기에서는 모든 그리드의 폭이 100%로 되므로 상하로 배열되는데 좌우로 배열되도록 하기 위해서 위와같이 .col-sm-숫자의 선택자를 추가로 삽입합니다. 3.0 버전이 이전에 96%까지 진행됐었는데 94%로 후퇴를 했군요. 여러가지 기능 중 제거할 것은 제거하고 새롭게 만들기 위해서 인..
SK 텔레콤에서 트위터 부트스트랩을 기반으로한 웹앱 프레임워크를 개발했더군요. 지난 2월 11일 오픈소스로 공개해서 무료로 사용이 가능합니다. 단순히 부트스트랩만 포함시킨 것이 아니라 부트스트랩 기반의 여러가지 플러그인, MVC 패턴 지원을 위한 백본(Backbone.js) 등을 포함하고 있습니다. http://cornerstone.sktelecom.com 위 링크로 이동하면 코너스톤 관련 모든 문서를 볼 수 있습니다. 저장소 링크를 클릭하면 깃허브로 연결되며 관련된 모든 파일을 내려받을 수 있습니다. 용량이 153Mb나 되므로 받는 시간에 따라 속도가 엄청 차이납니다. 아침 시간에 받으니 몇분 걸리는데 어제는 몇시간이나 걸리더군요. 중간에 받다가 중단됐죠. 위 화면에서 3개의 버튼은 개별적으로 관련 파..
트위터 부트스트랩 3.0 버전이 4월 24일 현재 96% 진행됐습니다. 이전 업로드와 바뀐 것은 대부분 버그 수정입니다. 2.3.2 버전 수정이 7 퍼센트 진행됐습니다. 문서 초기 화면인 index.html 파일의 화면이 아주 단순하게 변경됐습니다. 부트스트랩 3.0 미리보기 --> http://twitter-bootstrap.kr/bootstrap3/ 내려받기-->
현재 출판사와 협의해서 워드프레스로 쇼핑몰 만들기 책을 기획 중에 있습니다. 제가 워드프레스 쇼핑몰 플러그인을 3개 번역했는데 그중에서 우커머스(Woocommerce)가 가장 좋아보입니다. 현재 2.08 버전으로 업데이트되면서 번역량이 엄청 늘어났고 언어파일도 두개로 분리됐더군요. 테마 제작회사인 Wootheme에서 만든 것이라서 기능도 많고 업데이트도 활발하며 관련 테마도 좋습니다. 그래서 이 플러그인을 사용해서 책 내용을 구성하려고 합니다. 문제는 한국의 신용카드 결제 시스템을 이 플러그인과 결합(Integration)을 하는 플러그인인 PG(Payment Gateway)의 개발이 필요합니다. 제가 개발자가 아니다보니 작업을 할 수는 없고 별도의 개발자가 작업해줘야하는 상황입니다. 국내에서도 이 플러..
트위터 부트스트랩 3.0 버전이 4월 14일 현재 95퍼센트 완료됐습니다. 2.0 버전에서 추가로 수정할 것이 있는지 버전 번호가 하나 추가됐습니다. 지난번 미리보기 업로드 후 지속적으로 세부적인 부분에서 버그를 수정해왔으며 새로 추가된 부분은 없고 버그 수정 작업이 계속되고 있습니다. 샘플 페이지에서 사용되던 이미지를 모두 더미 이미지로 교체해서 파일 용량을 대폭 축소했습니다. 6.7mb --> 2.3mb 미리보기 사이트 --> http://twitter-bootstrap.kr/bootstrap3/ 압축 파일 -->
트위트 부트스트랩 프레임워크가 인기를 얻으면서 해외 및 국내의 CMS가 부트스트랩을 기본 프레임워크로 채용하고 있습니다. 기본 프레임워크로 채용한다는 것은 테마나 스킨에 사용된다는 것이 아니라 CMS 자체, 즉, 관리자 화면을 의미합니다. 테마나 스킨은 이미 만들어서 사용하고 있고 사용자가 원하는 대로 디자인을 변경할 수 있는 것이죠. 중요한 것은 관리 시스템에서 부트스트랩 프레임워크를 사용한다는 것인데 이는 모바일 레이아웃을 위한 것입니다. 그만큼 부트스트랩이 모바일에 적용하기 쉽기 때문이죠. 해외에서는 3대 CMS인 워드프레스, 드루팔, 줌라가 있고 국내에서는 XE(익스프레스 엔진), 그누보드, 텍스트큐브(태터툴스: 티스토리 CMS), 킴스큐가 있습니다. 이들이 부트스트랩과 어떤 관련이 있는지 알아보..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Bootstrap Magic 부트스트랩 사용자 스타일시트 만들기 프로그램 사이트 : http://pikock.github.io/bootstrap-magic/index.html jQuery-Mobile-Bootstrap-Theme 부트스트랩 모바일 테마 프로그램 사이트 : https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme데모사이트 : http://andymatthews.net/code/jQuery..
아래의 링크로 이동하면 3개의 부트스트랩 템플릿을 내려받을 수 있습니다. http://jobpixels.com/bootbusiness.html Coming soon page 이중에서 Coming soon page 템플릿은 웹사이트를 개발할 때 공개하기 전에 첫 화면으로 사용하면 좋습니다. 웹사이트 공개시까지의 시간을 설정해서 카운트 다운 할 수 있습니다. 방법은 파일을 내려받아서 js 폴더에서 coming-soon.js 파일을 열고 until: '+1y'로 돼있는 것을 다음과 같이 수정합니다. $(".timer").countdown({ until: new Date(2013, 7, 1), 2013년 7월 1일 사이트를 연다는 것이므로 이 날짜를 기준으로 카운트 다운하게 됩니다. 해당 날짜를 기준으로 시간이..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. bootstrap-multisuggest 부트스트랩 다중 선택박스 프로그램 사이트 : https://github.com/rroppolo/bootstrap-multisuggestplugin데모 사이트 : http://htmlpreview.github.io/?https://github.com/rroppolo/bootstrap-multisuggestplugin/blob/master/demo.html bootstrap-wysiwyg 부트스트랩 위지위그 편집기. 음성..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Bootstrap 3 for IE7 부트스트랩 3 용 인터넷 익스플로러 7 핵 - 베타버전 프로그램 사이트 및 데모 사이트 : https://github.com/coliff/bootstrap-ie7 SCREENCHECK 모바일 디자인 테스트 사이트 프로그램 사이트 및 데모 사이트 : http://cybercrab.com/screencheck/ HTML BUTTON GENERATOR 부트스트랩 버튼 생성기 프로그램 사이트 및 데모 사이트 : http://boo..
지난번 제 블로그에서 실시한 이벤트에 이어서 출판사에서 YES 24 홈페이지에서 서평이벤트를 실시합니다. 트위터 부트스트랩 서평 이벤트 바로가기 저자 : 김덕기 출판사 : 위키북스 신청기간 : 4월5일-4월11일 모집인원 : 5명 리뷰어발표 : 4월 12일 (금) 웹 개발자와 디자이너를 위한 정말 쉬운 웹 디자인 프레임워크 부트스트랩! 이 책은 4부분으로 나뉜다. 1장에서는 부트스트랩을 다루기 위한 기초 단계로 부트스트랩의 전체 내용에 대해 설명하고 있다. 일반 웹사이트 및 모바일 웹사이트를 제작하기 위해서 부트스트랩의 모든 기능을 설명한다. 부트스트랩은 스타일시트와 자바스크립트 라이브러리로서 웹페이지에 사용되는 모든 요소에 대해 미리 스타일시트를 만들어 놓고 있으므로 HTML에 선택자만 삽입해도 멋지게..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. BOOTSTRAP TOUR 사이트 투어 위자드. 프로그램 사이트 : https://github.com/Gild/bootstrap-tour데모 사이트 : http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin DURANDAL 싱글 페이지 앱 프레임워크 프로그램 사이트 : https://github.com/BlueSpire/Durandal데모 사이트 : http://durandaljs.com/page..