아주 옛날에 웹개발의 기본인 HTML, CSS를 배우던 시절이 있었습니다. 가장 절실했던 것은 간단한 편집기이면서 작성한 코드를 바로 확인할 수 있는 편집기였습니다. 내가 작성한 코드가 어떻게 보이는지 일일히 저장하고 웹브라우저에서 확인하는 것이 너무 불편했죠. 오늘자 웹디자이너 뉴스 기사에 이런 편집기가 나타났습니다. 이 편집기는 웹브라우저인 파이어폭스의 제작사로 모질라에서 만든 것이더군요. 그래서 신뢰성이 더합니다. 설치할 필요도 없고 회원가입만 하면 바로 사용할 수 있고 퍼블리싱도 가능해서 간단한 웹사이트도 만들 수 있습니다. https://thimble.mozilla.org/en-US 홈 화면에서 "Start a project from scratch" 버튼을 클릭하면 편집기가 열립니다. 우측에서 ..
부트스트랩 문서 파일을 필요에 의해 내 컴퓨터에서 볼 수 있도록 만들었습니다. 부트스트랩 공식 최종 버전인 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.0 버전의 인기에 이어 한층 더 사용하기 좋아진 3.0 버전이 이미 많은 인기를 얻고 있습니다. 현재 4.0 버전이 나올 예정으로 올해 초에는 알파버전이 나올 듯합니다. 이전에 2.0 버전을 기준으로 책을 출간했는데 절판 되어 3.0 버전을 기준으로 새로운 책을 준비하고 있습니다. 원고가 거의 완성됐고 리뷰와 인쇄 과정을 거치면 2월 말이나 3월 초 4월 중에는 출간 될 것으로 보입니다. 이전의 책에서는 단순히 HTML 페이지만 만들었는데 사실 HTML로는 이메일도 보낼 수 없죠. 그래서 생각했던 것이 단순한 CMS를 사용해보고자 했습니다. CMS를 이용해 부트스트랩으로 레이아웃을 만들고 실질적으로 사용할 수 있는 웹사이트를 만들..
"트위터 부트스트랩으로 만드는 워드프레스 테마" 서적 첨부 파일입니다. - 이곳의 모든 첨부 파일은 "부트스트랩으로 만드는 워드프레스 테마" 서적 구매자에 한해 사용할 수 있으며 배포할 수 없습니다. 책에서 279페이지에서 사용한 코드에 오타가 있으니 아래의 글을 참고해서 수정하세요.바로가기 329 페이지 상단의 본문 첫 번째 줄 imagesloaded.pkgd.js는 imagesloaded.pkgd.min.js입니다. 420페이지 코드 85번째 줄에서 는 로 수정합니다. 일부 php 환경에서는 로 해도 작동이 됩니다. 참고: 바로가기 파일 내용 파일 책 1장에서 사용된 코드를 사이트 형태로 만들었습니다. 알집이나 세븐집으로 "여기에 압축풀기"로 해제하면 bootstrap1 폴더가 만들어집니다. 이 폴더..
트위터 부트스트랩 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 현재로 변환한 파..
트위터 부트스트랩이 거의 완성 단계에 있어서 RC(Release Candidate) 버전의 첫번째가 나왔습니다. 그러나 현재도 계속 버그 수정과 문구 수정이 일어나고 있고 일부 링크는 작동하지 않습니다. 기본 색상이 이전의 붉은 색에서 변경 됐습니다. 다운로드 버튼을 클릭하면 실제의 RC1 버전이 받아집니다. 하지만 실제 파일을 볼려면 Jekyll로 컴파일 해야 합니다. 또한 그동안 많은 수정과 업데이트가 이뤄졌습니다. 사용자 정의 페이지는 RC2까지 기다려야 합니다. 많은 수정이 있어서 Jekyll로 변환하고 일반 파일로 전환하는데 시간이 걸리는군요. 부트스트랩 3.0 버전 RC1 내려받기 --> 사이트 -->http://twitter.github.io/bootstrap/
트위터 부트스트랩 3.0 버전이 지난 10일간 많은 변화가 있었습니다. 파일 내부에 있던 예제(examples) 파일들이 분리돼서 별도의 프로젝트에서 관리됩니다. 얼마전엔 폰트아이콘이 이런 식으로 됐었죠. 첫 화면에서 링크를 클릭하면 웹페이지로 이동하도록 했지만 현재는 에러 화면이 나오고 문서 내부에 보면 깃허브 프로젝트 링크도 있습니다. 릴리즈 후보 버전을 내놓지 않는다고 했는데 내려받기 버튼에는 RC1이라고 나오는 것을 보면 정식 버전 이전에 후보 버전을 내놓을 모양입니다. 부트스트랩이 2.0 버전과 3.0 버전이 현격히 차이가 나는 관계로 2.0 버전은 예상대로 별도의 사이트에서 볼 수 있게 될 것입니다. 메뉴바 바로 아래에 링크가 있고 각 페이지마다 2.0 버전의 링크가 있습니다. 예제 파일은 깃..
트위터 부트스트랩 프레임워크 기반의 CMS 관리자 패널을 만들 수 있는 템플릿입니다. 상당히 많은 파일로 돼있음에도 무료로 사용할 수 있습니다. Laravel php 프레임워크를 사용할 경우 번들 버전도 있습니다. 프로그램 홈페이지 -- http://usman.it/free-responsive-admin-template/ 깃허브 -- https://github.com/usmanhalalit/charisma 데모 -- http://usman.it/themes/charisma/
트위터 부트스트랩 3.0 버전의 개발이 지난 10여일간 그다지 큰 변화는 없었고 각 요소들의 버그 수정과 개선이 많이 이뤄졌습니다. 현재 96%의 진행이 보여지고 있고 언제 정식 버전이 나올지에 대한 질문에 곧 업데이트 될 것이라는 말 밖에는 없습니다.(We'll have an update on timing soon enough. Hang tight http://twitter-bootstrap.kr/bootstrap3/ 부트스트랩 3.0 프로젝트 내려받기 -->
