4장 부트스트랩 3.0

4-1

4장 부트스트랩 3.0 현재 부트스트랩 3.0이 개발 중에 있고 80% 정도 완성돼 있어서 조만간 출시될 예정입니다. 이 책이 나올 즈음에는 정식 버전이 나오겠죠. 그래서 이번 장에서 부트스트랩 3.0에 대한 내용을 다루려고 합니다. 이전 장에서 여러 곳에서 언급했듯이 부트스트랩 3.0은 모바일 우선 지원이 됩니다. 부트스트랩은 1.0 버전에서 데스트탑 전용으로 나왔고 2.0은 모바일 겸용, 3.0은 모바일 우선…

 

3장 부트스트랩으로 디자인하기

3-5

3장 부트스트랩으로 디자인하기 웹사이트 제작은 크게 웹 개발과 웹디자인으로 나뉘어서 개발자는 php와 같은 웹프로그래밍 언어를 사용해서 웹사이트에서 사용되는 각종 기능을 만들고 웹디자이너는 CSS, 포토샵, 플래시, 제이쿼리와 같은 도구를 이용해서 디자인을 합니다. 제이쿼리가 개발 분야인지 디자인 분야인지는 애매하지만 각종 플러그인을 무료로 사용할 수 있어서 제이쿼리에 대한 약간의 지식과 CSS를 잘 다룰줄 안다면 얼마든지 사용할 수 있기…

 

2장 LESS 프리프로세서

2-2

2장 CSS 프리프로세서 사용하기 (Less) CSS 프리프로세서는 CSS 스타일 시트를 효율적이고 체계적으로 작성하기 위한 프로그램입니다. 부트스트랩을 만드는데 사용된 Less의 사용법에 대해 전반적인 내용을 간략하게 알아보기로 합니다. 이번 장의 내용은 다음과 같습니다. 프리프로세서란? 스타일 시트를 사용해서 디자인하다 보면 중복되는 코드가 많습니다. 체계적인 스타일 시트를 만들기 위한 CSS 프리프로세서의 역할을 알아봅니다. Less 사용 환경 만들기 Less를 사용하기…

 

1장 부트스트랩 기초

1-1

1장 부트스트랩 기초 부트스트랩은 미리 만들어진 스타일 시트와 자바스크립트 플러그인의 라이브러리입니다. HTML로 웹페이지의 뼈대를 만들고 스타일 시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 부트스트랩에 미리 정의된 클래스 선택자를 HTML 코드에 삽입만 하면 레이아웃과 각종 요소를 만들 수 있습니다. 부트스트랩의 스타일 시트는 약 7,000줄로 웹페이지를 만드는 데 필요한 거의 모든 요소를 정의해놓았기 때문에 손쉽게…

 

트위터 부트스트랩 유용한 플러그인 1

Bootstrap_Arrows_-_CoolNovo_2013-02-25_20-04-40

트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인?기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다.   Acc-wizard 부트스트랩의 어코디언을 이용한?위자드(마법사)를 만들 수 있는 플러그인입니다. 이를 응용해서 쇼핑몰의 결제 단계별 과정이나 프로그램의 설치과정, 튜토리얼을 만들 수 있습니다. 프로그램 사이트:?https://github.com/sathomas/acc-wizard 데모 사이트:?http://sathomas.me/acc-wizard/#prerequisites     bootstrap-lightbox 이미지를 클릭하면…

 

트위터 부트스트랩 유용한 플러그인 2

Bootstrap-modal_by_jschr_-_CoolNovo_2013-02-25_20-13-47

트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인?기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다.   Bootstrap Modal 부트스트랩에는 기본적으로 팝업창인 모달이 포함돼있지만 한가지 종류만 있습니다. 이 플러그인은 다양한 형태의 모달을 제공합니다. 프로그램 사이트 :?https://github.com/jschr/bootstrap-modal/ 데모 사이트 :?http://jschr.github.com/bootstrap-modal/   Fuel UX 트위터 부트스트랩에는 이미 폼을…

 

트위터 부트스트랩 유용한 플러그인 3

7

트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인?기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다.   jquery-bootpag 컨텐트를 페이지로 만들 수 있는 플러그인입니다. 프로그램 사이트 및 데모 사이트 :?http://botmonster.com/jquery-bootpag/#pro-page-7   tableclothjs 다양한 형태의 테이블을 만들 수 있습니다. http://tableclothjs.com/ pagedown-bootstrap 간단한 구조의 위지윅 편집기를 만들 수…

 

트위터 부트스트랩 유용한 플러그인 4

12

트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인?기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다.   d3-bootstrap-plugins 이 플러그인은 수많은 점이 만들어지고 각 점마다 마우스를 올리면 팝오버가 나타납니다. 아직 적당한 사용처를 알아내지 못했지만 유용할 듯합니다. 프로그램 사이트 :?https://github.com/zmaril/d3-bootstrap-plugins 데모 사이트 :?http://bl.ocks.org/zmaril/3012212   bootstrap-notify 다양한 형태의…

 

트위터 부트스트랩 유용한 플러그인 5

18

트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인?기트허브(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/jhollingworth/bootstrap-wysihtml5…

 

트위터 부트스트랩 유용한 플러그인 6

22

트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인?기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다.   JASNY BOOTSTRAP 트위터 부트스트랩을 변형하여 여러가지 기능을 추가한 별개의 프레임워크입니다. 프로그램 사이트 및 데모 사이트 :?http://jasny.github.com/bootstrap/   jquery-addresspicker 주소를 입력하면 지도가 나타나고 마커를 이동하면 주소가 업데이트됩니다. 프로그램 사이트 :?https://github.com/elmariachi111/jquery-addresspicker…

 
Home Archive for category "트위터 부트스트랩"
©트위터 부트스트랩 2012 Proudly powered by WordPress