작성일자
카테고리 부트스트랩/부트스트랩으로 디자인하기

트위터 부트스트랩은 문서 파일에 있는 내용을 그대로 복사해서 사용하거나 스니핏을 생성해서 빠르게 웹페이지를 만들 수 있는 프레임워크입니다. 이번에 소개할 스타터 킷은 웹사이트에서 사용되는 거의 대부분의 페이지가 이미 만들어져 있어서 더 쉽게 웹사이트를 만들 수 있는 도구입니다. 더구나 요즘 인기있는 아이소톱(Isotope) 플러그인을 사용해서 썸네일의 높이에 상관없이 배치가 잘 돼고 카테고리를 선택하면 썸네일의 분류도 가능한 기능이 추가돼있어서 핀터레스트 사이트와 같은 웹사이트를 만들 수 있습니다. 제가 만든 트위터 부트스트랩 책과 비슷한 내용들이 들어있더군요.


http://www.bootstraptor.com/


위 링크로 이동하면 아래와 같은 화면이 나옵니다. 이 킷의 특징을 알아보겠습니다.


1. 아이소톱(Isotope) 플러그인을 사용한 썸네일의 자동배치



이 스타터 킷의 가장 큰 특징은 아이소톱 플러그인을 사용해서 높이가 다른 썸네일을 배치하고 있다는 것입니다. 위 썸네일을 보면 높이가 다른데도 불구하고 아래의 썸네일의 위치가 잘 맞춰져 있습니다. 아이소톱 플러그인이 만들어주는 기능입니다. isotope은 요즘 아주 인기 있는 제이쿼리 플러그인으로 워드프레스 테마나 웹사이트에서 많이 사용돼고 있습니다. 유료지만 개발자가 한번 구매하면 자신이 만든 웹사이트는 무한대로 사용할 수 있습니다. 즉 프로그램별로 사용권한이 있는 것이 아니라 개발자 단위로 사용 권한이 주어집니다. 개당 25불입니다.


http://isotope.metafizzy.co/


David DeSandro 라는 사람이 개발한 것으로 개인용으로는 무료로 사용할 수 있으나 상업용은 구매를 해야합니다. 위 링크로 가면 영문으로 사용법이 자세히 나와있습니다. 기능이 상당히 많습니다.


http://twitter-bootstrap.kr/bootstrap-demo/gallery2.php


위 링크는 제가 만든 데모 사이트로 트위터 부트스트랩 책에 이 플러그인에 대해 자세히 소개돼 있습니다.



메뉴에서 선택하면 썸네일을 분류할 수 있으며 스크롤해서 내리면 다음 페이지가 자동으로 로드되는 기능도 있습니다. 이것은 무한 스크롤 플러그인을 추가로 사용한 것입니다.



2. 스타터 킷 내려받기



스타터 킷을 내려받으려면 위와같은 버튼이 있는 곳으로 스크롤해서 좌측의 버튼을 클릭하면 팝업창이 나옵니다. 이메일로 구독신청을하면 확인메일이 오고 파일을 내려받을 수 있는 링크가 나중에 옵니다. 금방 오는 줄 알았는데 시간이 한참 지나서 오더군요. 우측은 개발자 버전인데 유료입니다.



3. 파일의 내용



압축을 풀면 12개의 템플릿이 있습니다. 각 폴더로 들어가서 htm 파일을 클릭하면 이미 만들어진 웹페이지가 나타납니다.



portfoliofilter.htm 파일입니다. 버튼을 클릭하면 카테고리별 썸네일이 분류됩니다.



블로그 페이지 템플릿입니다.



parallaxer 페이지입니다. 이것도 요즘 인기있는 웹사이트 형태로 하나의 페이지에 여러가지 내용을 넣고 스크롤해서 내리면 모든 내용을 한 페이지에서 볼 수 있도록 하고 있습니다. One Page Template이죠. 패럴랭스란 이미지나 글자가 애니메이션 되는 속도가 달라서 3차원 입체효과가 나타나는 기능입니다. 



블로그 카테고리 목록 페이지입니다.



여러가지 다양한 콘텐츠를 사용해서 포털 화면으로 사용할 수 있는 indexbusinessinfo 페이지입니다. 


이런 키트를 사용하면 웹사이트는 금방 만들겠죠?


티스토리 툴바