부트스트랩 문서 파일을 필요에 의해 내 컴퓨터에서 볼 수 있도록 만들었습니다. 부트스트랩 공식 최종 버전인 Bootstrap 3.3.6과 부트스트랩 4 알파 버전 2입니다. WAMP 서버나 오토셋으로 웹서버 환경을 만들어 놓고 WAMP의 경우 www 폴더에, 오토셋의 경우 public_html 폴더에 붙여넣고 열어야 합니다. 부트스트랩 3의 경우 웹브라우저에서 http://localhost/bootstrap3/를 입력하고 엔터키를 누르면 됩니다. 부트스트랩 4버전이 알파 버전 단계인데 아직 베타 단계도 들어가지 못하고 있어서 언제 공식 버전이 나올지 소식이 없는 상태입니다. 작년 8월에 알파 1버전이 나온 이후로 개발 속도가 아주 느립니다. 부트스트랩의 인기는 아직 시들지 않고 있습니다. 씸포레스트에서 ..
부트스트랩 템플릿 중 쓸만한 것이 나타나면 계속 소개하고 있습니다. 이번 템플릿은 컨택트 폼 스크립트까지 포함돼있습니다. 요즘은 HTML 템플릿을 검색하면 거의 부트스트랩으로 만들어진 것만 나타나고 있습니다. 그만큼 부트스트랩의 사용도가 높아지고 있습니다. 세계 최대의 템플릿 사이트인 씸포레스트에서 부트스트랩으로 검색하면 전체 19,000 여개의 템플릿 중 6천여개가 검색됩니다. 거의 3분의 1에 해당합니다. 2년전만해도 엄청 적은 숫자였습니다. 여기에는 워드프레스 테마 등 각종 테마도 포함됩니다. 최근에는 구글의 머티리얼 디자인을 적용한 부트스트랩 테마도 나오고 있습니다. 현재 개발 중인데 디자인이 상당히 좋습니다. https://github.com/FezVrasta/bootstrap-material-..
부트스트랩 템플릿 6종입니다. 이전의 템플릿보다는 퀄리티가 좀 나은 것 같습니다. 부트스트랩에서 테마란 디자인의 변경을 위한 CSS 파일을 말하는데 우리나라에서는 템플릿을 테마로 부르고 있더군요. 이 테마의 변경만으로 간단하게 디자인이 변경됩니다. 이미 만들어진 부트스트랩 사이트를 위한 파일은 정식으로 말하자면 템플릿으로 해야 합니다. 일부는 다운로드 하려면 SNS에 공유해야 합니다. Seven - HTML Single Page Creative Portofolio Template 다운로드 사이트 데모 사이트 Pluton - Free Single Page Bootstrap Html Template 다운로드 사이트 데모 사이트 Smak - Free HTML single page template 다운로드 사이..
부트스트랩 템플릿 12종입니다. 일부 템플릿은 자바스크립트 에러 메시지가 나오고 구글 맵이 나타나지 않습니다. 위 코드에서 key=AIzaSyASm3CwaK9qtcZEWYa-iQwHaGi3gcosAJc& 부분을 제거하고 저장하면 됩니다. Barrier- a business template 다운로드 사이트 데모 사이트 Blue OnePage HTML5 Business Template 다운로드 사이트 데모 사이트 없음 Bondy — Free Multipurpose Bootstrap 3 One Page 다운로드 페이지 데모 사이트 Oleose — Eye Catching Mobile App Landing Page 다운로드 페이지 데모 사이트 SevenApp — Free Beautiful Mobile App La..
트위터 부트스트랩 기반의 무료 템플릿입니다. 원 페이지 사이트를 만들 수 있으며 디자인이 상당히 좋습니다. 픽셀부다(pixelpuddha)는 소스를 얻기 위해 제가 자주 방문하는 사이트 중 하나입니다. http://pixelbuddha.net/freebie/freebie-white-one-page-html-template 위 페이지에서 하단으로 스크롤하면 데모를 볼 수 있는 링크와 다운로드 링크가 있습니다. http://evick.ru/market/white/image_slider/index.html 데모 사이트 링크입니다. 로드 되는데 좀 시간이 걸립니다. 압축파일을 해제하고 html 폴더로 들어가면 두개의 폴더가 있는데 그중 하나의 폴더의 이미지들은 더미 이미지인데 다른 하나의 폴더에서 복사해 사용하..
지난 2월에 원고를 완료했지만 편집 디자인 작업과 리뷰가 다소 늦어져 4월 20일에 서점에 나옵니다. 표지 디자인이 나왔으니 이제 인쇄 작업을 거치면 책이 나오게 됩니다. 서적 예제 사이트 http://bootstrap.diywordpress.kr/ 책에서 만든 사이트입니다. 다만 홈 페이지 메뉴와 One page 메뉴에서는 여러 가지 제이쿼리 플러그인의 테스트를 위해 추가한 페이지이니 서적에는 포함되지 않았습니다. 책을 이해한다면 소스를 이용해 다양한 슬라이더를 만들 수 있습니다. 예약 판매 Yes24 알라딘 교보문고 인터파크 11번가 강컴닷컴 동영상 보조 강좌 안내 트위터 부트스트랩으로 만드는 워드프레스 테마 서문 필자가 처음 부트스트랩을 접했던 것은 의뢰를 받아 웹사이트를 제작하던 때였습니다. 이 ..
트위터 부트스트랩 3.0 버전이 출시됐지만 거의 매일 수정이 이뤄지고 있습니다. 폰트 아이콘도 당초 180개에서 200개로 늘어났고 소소한 내용은 지속적으로 수정이 진행되고 있습니다. 아래의 파일은 10월 26일 현재의 부트스트랩 3.0 버전으로 파일을 바로 열어서 확인할 수 있도록 일반 html파일로 변환한 것입니다. 부트스트랩 원본을 내려받아서는 바로 열어볼 수 없고 Jekyll이라는 Ruby 기반의 프로그램을 설치하고 로컬호스트에서 가동해야 하죠. 부트스트랩의 그리드 시스템에서는 여러 가지 그리드 선택자가 있어서 이해하기 어려운데 이것에 대해 간략하게 알아보겠습니다. 이전에 부트스트랩 3.0이 업데이트 될 때마다 10일 단위로 파일을 업데이트하고 수정된 내용에 대해서 설명을 드린 바 있습니다만 선택..
트위터 부트스트랩을 이용하면 기본적으로 메뉴바의 주메뉴를 클릭해야 서브 메뉴가 나타나는 것이 기본 설정입니다. 이전 글에서 클릭하지 않고도 마우스만 올리면 서브 메뉴가 나타나는 방법을 소개했는데 새로운 방법이 있더군요. 간단하게 스타일시트만 추가하면 됩니다. 이 방법은 CSS에서 아주 많이 사용해왔는데 고정관념이란 것이 아주 무섭네요. 부트스트랩은 이렇게 설정이 돼있으니까 항상 이렇게 사용해야한다는 것이 고정관념이었습니다. 더구나 마우스를 올리면 서브 메뉴가 나오도록 하는 플러그인이 나와있으니까 이러한 고정관념을 더욱 부채질하지 않았나 하는 생각도 듭니다. 이 플러그인이 존재의 가치가 있을지는 두고봐야겠지만 스타일시트로 간단하게 처리하는 방법은 다음과 같습니다. ul.nav li.dropdown:hove..
트위터 부트스트랩은 기본적으로 드롭다운 메뉴를 클릭해야만 서브 메뉴를 볼 수 있습니다. 마우스를 올렸을 때 서브 메뉴를 나타나게 하려면 별도의 제이쿼리 플러그인을 추가하고 코드를 수정해 줘야 합니다. 더 간단한 방법 --> http://martian36.tistory.com/1265 https://github.com/CWSpear/twitter-bootstrap-hover-dropdown 위 링크로 이동하면 파일을 받을 수 있습니다. 오른쪽 사이드바 하단에서 Download zip 버튼을 클릭하면 됩니다. 지금 사용하고 있는 티스토리 스킨도 부트스트랩으로 만들어졌는데 제 블로그를 기준으로 변경하는 방법을 알아보겠습니다. 압축을 풀면 데모 파일이 있고 파일을 열면 어떻게 사용하는지 알 수 있습니다. 우선 ..
부트스트랩 3.0이 정식 버전으로 발표됐어도 계속 버그 수정이 이루어지고 있습니다. 아래의 사이트에서는 항상 수정되면 바로 업데이트됩니다. http://getbootstrap.com/ 구버전인 2.3.2는 하단의 첫번째 링크로 이동하면 볼 수 있고 커스터마이징도 가능합니다. 파일을 받으려면 두번째 링크로 갑니다. 그러면 3.0의 문서파일이 보이고 우측에 Download ZIP을 클릭하면 3.0 버전을 전체 파일로 받을 수 있습니다. 하지만 문서를 열어보면 index.html 파일을 클릭해도 제대로 열리지 않습니다. Jekyll이라는 정적인 웹사이트 만드는 프로그램으로 변환을 해줘야 가능합니다. 그래서 제 블로그에서 변환한 파일을 일반적인 파일로 변환해서 그동안 업로드를 해왔죠. 8.31 현재로 변환한 파..
그동안 5천원에서 1만원까지 기부를 조건으로 공개했었는데 수정 요청과 문의가 많아 해당 글을 내리고 공개를 하지 않았는데 요청자가 꽤 있어서 이메일로 보내드리기는 제가 좀 바쁘네요. 공개 조건은 이전과 같이 기부를 하는 조건이지만 강제하지는 않겠습니다. 가급적 기부를 해주세요. 저도 이것 만드느라고 시간이 많이 들었습니다. 나중에 다시 더 좋은 스킨을 만들어 공개하도록 하겠습니다. 사용 방법에 관해서는 일체 답변을 못드립니다. 제 글 중에 티스토리 카테고리에서 찾으면 사용법이 있습니다. 또한 수정도 못해드립니다. 스킨 파일은 해당 글에 첨부 파일로 올리겠습니다. 현재 제가 사용 중인 스킨입니다. 트위터 부트스트랩으로 만든 것이라서 반응형 디자인입니다. 해당 글 --> http://martian36.tis..
트위터 부트스트랩이 거의 완성 단계에 있어서 RC(Release Candidate) 버전의 첫번째가 나왔습니다. 그러나 현재도 계속 버그 수정과 문구 수정이 일어나고 있고 일부 링크는 작동하지 않습니다. 기본 색상이 이전의 붉은 색에서 변경 됐습니다. 다운로드 버튼을 클릭하면 실제의 RC1 버전이 받아집니다. 하지만 실제 파일을 볼려면 Jekyll로 컴파일 해야 합니다. 또한 그동안 많은 수정과 업데이트가 이뤄졌습니다. 사용자 정의 페이지는 RC2까지 기다려야 합니다. 많은 수정이 있어서 Jekyll로 변환하고 일반 파일로 전환하는데 시간이 걸리는군요. 부트스트랩 3.0 버전 RC1 내려받기 --> 사이트 -->http://twitter.github.io/bootstrap/
개발자들이 애용하는 서브라임 텍스트가 3 버전으로 업그레이드 됐는데 서브라임 텍스트가 인기가 있는 이유는 많은 플러그인을 쉽게 설치해 사용할 수 있다는데 있습니다. 그런데 서브라임 텍스트 3 버전에서는 2 버전에서처럼 패키지 설치를 하면 에러가 나더군요. 그래서 구글링 했더니 해결책이 나와있습니다. 역시 구글에는 모든 해결책이 있었습니다. 방법은 git을 이용해 설치하는 것입니다. 설치하는 장소를 알기 위해 메뉴에서 Preferences - Browse Packages를 선택하면 브라우저 창이 나타나는데 이곳이 설치할 장소입니다. 명령 프롬프트에서 위와같이 입력하고 엔터키를 누르면 경로가 바뀝니다. 경로는 이전 그림에서 주소창에서 필요한 부분만 복사해서 스페이스가 있는 Sublime Text 3 부분은 ..
트위터 부트스트랩 3.0 버전이 지난 10일간 많은 변화가 있었습니다. 파일 내부에 있던 예제(examples) 파일들이 분리돼서 별도의 프로젝트에서 관리됩니다. 얼마전엔 폰트아이콘이 이런 식으로 됐었죠. 첫 화면에서 링크를 클릭하면 웹페이지로 이동하도록 했지만 현재는 에러 화면이 나오고 문서 내부에 보면 깃허브 프로젝트 링크도 있습니다. 릴리즈 후보 버전을 내놓지 않는다고 했는데 내려받기 버튼에는 RC1이라고 나오는 것을 보면 정식 버전 이전에 후보 버전을 내놓을 모양입니다. 부트스트랩이 2.0 버전과 3.0 버전이 현격히 차이가 나는 관계로 2.0 버전은 예상대로 별도의 사이트에서 볼 수 있게 될 것입니다. 메뉴바 바로 아래에 링크가 있고 각 페이지마다 2.0 버전의 링크가 있습니다. 예제 파일은 깃..
이전 글에서도 언급했지만 트위터 부트스트랩으로 디자인을 하면 모두 같은 디자인이 나오기 때문에 되도록이면 다르게 나타나도록 디자인을 수정하는 것이 좋습니다. 메뉴가 선택됐을 때 inset으로 인해서 내부 그림자 효과가 나타나죠. 이것을 다르게 나타나도록 변경해보겠습니다. 이번 글에서 작업할 내용은 위와 같습니다. 선택되지 않은 메뉴는 우측 상단에 세모 도형이 나오고 선택된 메뉴는 세모 도형이 접히는 효과와 함께 그림자도 나타납니다. 또한 메뉴 사이에 부트스트랩의 vertical-divider가 나타나도록 했습니다. 이것은 익스프레스 엔진으로 하여금 반복되도록 출력할 수가 없어서 CSS를 이용해서 각 li 태그에 나타나도록 했습니다. 부트스트랩의 스타일시트를 제거하려면 해당 요소를 선택하고 요소검사를 해서..