트위터스러운 웹사이트 간단하게 만들어보기

twitter의 hackweek에 만들어졌다는 bootstrap은

트위터에서 사용하는 UI모듈들이 먹기 좋게 만들어져있습니다.


세련된 형태의 그리드, 레이아웃, 테이블, 입력폼, 네비게이션, 경고창을 손쉽게 가져다 쓸 수 있습니다.

이미지의 사용 전혀 없이 오로지 CSS로 표현이 구현되었으며,

단순히 HTML코드를 사용하는 것만으로도 충분히 매력적인 웹사이트 디자인을 완성할 수 있습니다.



bootstrap을 사용해서 만들어진 예제입니다.

http://twitter.github.com/bootstrap/examples/hero.html
http://twitter.github.com/bootstrap/examples/fluid.html


멋지죠?

사용방법은 어렵지 않아요.



단지 여러분의 홈페이지에

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

이 코드를 넣으세요.

이게 끝입니다.


그리고 적절한 태그와 정의된 클래스를 사용하면 아래의 멋진 UI가 완성됩니다.

좀더 다양한 예제는 boostrap 홈페이지에서 찾아보세요.


bootstrap에 less.js가 사용되었는데요.

변수나 함수를 이용해서 CSS를 만들어내는 자바스크립트 라이브러리입니다.

일단 이부분에 대해서는 모르셔도 됩니다.

단지 압축된형태의 CSS를 사용하시면 됩니다.

다음에 언제 제 블로그를 통해서 less도 소개해드리겠습니다.




PS. 이 포스팅은 예전에 작성해두었던, 나중에 공개하려고한 포스팅이었는데

곧 Bootstrap 2.0이 발표될 것이라 당겨서 작성한 글입니다.

나중에 2.0에 대한 소개도 올리도록 하겠습니다.