부트스트랩이란?

1

부트스트랩이란? 트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다. html로 웹페이지의 뼈대를 만들고 스타일시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 미리 정의된 클래스 선택자를 html 코드에 삽입만 하면 레이아웃과 각종 요소가 만들어집니다. 부트스트랩의 스타일시트는 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 ...

 

부트스트랩의 특징

부트스트랩의 특징   웹페이지를 쉽게 만들 수 있다 부트스트랩의 홈페이지에서도 언급하고 있듯이 부트스트랩을 다루기 위해서는 html과 CSS에 대한 지식을 필요로 합니다. 그렇다고 깊은 지식이 필요한 것은 아니며 html 태그의 사용법, 역할을 알고 있으면 되고 CSS는 혼자서 레이아웃을 만들줄만 알면 됩니다. 웹페이지는 html 태그로 뼈대가 만들어지며 태그에 CSS 선택자를 추가하고 이 선택자에 대해서 스타일시트에서 속성과 값을 선언해서 레이아웃을 만들게 ...

 

트위터 부트스트랩 책 출간

3D Book Cover-tw

제목 : 트위터 부트스트랩 - 디자이너도 놀라워 할 매끈하고 직관적인 웹 사이트 디자인의 비밀(432페이지) 영문 제목 : Twitter Bootstrap for?Web Development   원고는 한달 전에 완료가 됐지만 리뷰와 부트스트랩 3.0 버전 추가 수록으로 인해 책의 출간이 다소 늦어졌습니다. 이제 표지 디자인이 나왔고 모든 편집이 완료돼서 오늘부터 인쇄 작업에 들어가며 내일부터 각 인터넷 서점에 예약 판매를?올릴 예정입니다.     부트스트랩 3.0 버전이 ...

 

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 이미지를 클릭하면 큰 이미지의 팝업창이 나오는 라이트 박스입니다. 프로그램 사이트:?https://github.com/jbutz/bootstrap-lightbox 데모사이트:?http://jbutz.github.com/bootstrap-lightbox/   Bootstrap-Image-Gallery 이미지 갤러리를 만들 ...

 

트위터 부트스트랩 유용한 플러그인 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 간단한 구조의 위지윅 편집기를 만들 수 있습니다. 프로그램 사이트 :?https://github.com/samwillis/pagedown-bootstrap 데모 사이트 :?http://samwillis.co.uk/pagedown-bootstrap/demo/browser/demo.html   Twitter Bootstrap: Dropdown on Hover Plugin 부트스트랩의 ...

 

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

12

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

 
©트위터 부트스트랩 2012 Proudly powered by WordPress