이전 글에서 익스프레스 엔진의 메뉴 구조를 2단의 서브 메뉴로 만들고 여기에 트위터 부트스트랩의 메뉴를 설치했습니다. 부트스트랩의 메뉴바는 서브 메뉴가 있는 메뉴를 클릭하면 해당 메뉴가 있는 페이지가 열리는 것이 아니라 서브 메뉴가 열립니다. 그렇다면 익스프레스 엔진으로 메뉴를 만들 때 서브 메뉴가 있는 메뉴는 페이지를 링크할 것이 아니라 비어있는 링크를 연결해야 합니다. 대부분의 경우 어떤 메뉴를 클릭하거나 마우스를 올렸을 때 서브 메뉴가 나타난다면 서브 메뉴의 아이템으로 이동해서 클릭하게 되죠. 이번 글에서는 이러한 부트스트랩 메뉴바를 사용하는 방법을 알아보겠습니다. 익스프레스 엔진 메뉴 수정하기 익스프레스 엔진이 1.7 버전으로 업그레이드 되면서 메뉴 설정이 아주 간편해졌습니다. 전체적인 UI가 이..
이전 글에서 익스프레스 엔진의 메뉴를 2단 서브 메뉴로 만들고 부트스트랩 라이브러리 파일들을 추가했습니다. 이번 글에서는 내비게이션 메뉴바를 만들어보겠습니다. 이전 글에서 알아봤듯이 익스프레스 엔진의 메뉴 구조는 여러가지 변수와 조건문에 의해 만들어지고 있어서 부트스트랩의 메뉴 선택자를 적절하게 나타나도록 조건문을 이용하면 됩니다. 메뉴바 만들기 이전 글에서 부트스트랩의 기본 메뉴 구조에 대해 알아봤는데 반응형 메뉴바는 몇가지 태그와 선택자가 추가됩니다. Project name 반응형 메뉴바는 화면 폭이 축소됐을 때 좌우로 정렬돼 있는 메뉴들이 상하로 배열되면서 감춰지고 버튼이 나타나며 버튼을 클릭하면 감춰진 메뉴들이 나타나는 구조입니다. 이러한 버튼 역할을 하는 것이 class="btn btn-navb..
어느 CMS나 마찬가지겠지만 부트스트랩을 해당 CMS에 적용할 경우 가장 복잡하고 어려운 부분이 내비게이션 메뉴입니다. 메뉴바라고도 하죠. 트위터 부트스트랩의 내비게이션 메뉴바는 각 요소에 정해진 클래스 선택자를 추가하면 메뉴를 클릭했을 때 서브 메뉴가 나타나는 구조입니다. 워드프레스의 경우도 마찬가지라서 내비게이션 메뉴가 함수에 의해 만들어지고 있기 때문에 부트스트랩의 선택자를 삽입하기 어려워서 Walker Nav이라는 별도의 프로그램을 만들어서 함수 파일에 추가하면 쉽게 부트스트랩의 메뉴 구조를 사용할 수 있습니다. 부트스트랩 관련 프로젝트의 자바스크립트를 추가하면 클릭하지 않고 마우스 오버 상태에서도 서브 메뉴가 나타나도록 할 수 있습니다. 우선 부트스트랩 기본 구조에 맞춰서 익스프레스 엔진의 메뉴..
트위터 부트스트랩 프레임워크 기반의 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 프로젝트 내려받기 -->
포토샵으로 웹디자인을 할 경우 폰트 아이콘으로 많이 사용하는 폰트 어썸 아이콘 폰트를 사용하는 방법에 대해 알아보겠습니다. 폰트 어썸은 트위터 부트스트랩에서 사용하도록 만들어졌지만 부트스트랩을 사용하지 않더라도 웹디자인에 사용할 수 있도록 돼있고 IE7 버전까지 지원하며 아이콘의 수도 계속 늘어나서 현재 360개를 사용할 수 있어서 많은 웹 개발자나 디자이너들이 선호하는 폰트 아이콘입니다. http://fortawesome.github.io/Font-Awesome/ 우선 폰트를 컴퓨터에 설치하기 위해서 위 사이트에서 노란색 버튼을 클릭해서 파일을 내려받아 압축 해제합니다. 폴더로 들어가서 ttf나 otf 폰트를 마우스 오른쪽 클릭해서 설치합니다. 폰트가 5종류가 있는데 나머지는 웹폰트 전용입니다. 첫번째..
CSS Copy 기능은 포토샵 CS 6.1 버전에서 업데이트 된 기능입니다. 포토샵 CC에서는 기본으로 설치돼 있습니다. 이것은 포토샵을 이용해서 버튼이나 HTML 요소를 이미지로 만들고 CSS Copy를 선택하면 스타일시트를 자동으로 만들어주는 기능입니다. 이를 그대로 스타일시트에 붙여서 사용하면 됩니다. 하지만 포토샵의 모든 효과가 스타일시트로 전환되는 것이 아니라 일부는 스타일시트를 생성하지 못합니다. 그래서 제3자 확장 프로그램이 개발됐습니다. 우선 포토샵 CC의 CSS Copy 기능을 알아보겠습니다. 포토샵 CC로 직접 버튼을 만들어도 되지만 부트스트랩 PSD 파일을 이용해보겠습니다. 이 파일을 포토샵 CC에 열고 기존에 열려있는 요소들을 안보이도록 눈아이콘을 모두 꺼준 다음 버튼 그룹의 Mai..
트위터 부트스트랩이 지난 며칠간 많은 변화가 있었습니다. 우선 폰트 아이콘이 기본 파일에서 제거되고 별도의 파일로 첨부해서 사용할 수 있도록 했습니다. 부트스트랩 3.0에 첨부된 폰트 아이콘은 160 개이지만 가장 많이 사용하는 폰트 어썸(Font Awesome) 폰트 아이콘은 최근에 업데이트돼서 361개까지 지원합니다. 대부분의 부트스트랩 프로젝트에서 이 폰트 아이콘을 사용합니다. 그러니 굳이 기본 파일에 포함시킬 필요가 없죠. 파일 용량만 차지하죠. 또한 폰트 아이콘 사용시 기존의 태그에서 태그로 변경됐습니다. 폰트 어썸은 그대로 태그입니다. 아마도 부트스트랩 3.0이 완료되면 그에 따라서 바뀔 것입니다. 두번째로 바뀐 것은 서브메뉴의 제거입니다. 초기 개발 단계에서부터 서브 메뉴를 제거했었는데 사용..
부트스트랩 3.0이 최근 버그 수정이 여럿 이루어졌고 두드러진 변경은 예제로 Off Canvas라는 레이아웃이 추가됐습니다. 이는 Mobile First라는 용어를 처음 사용한 Luke Wroblewski가 그의 같은 제목의 저서에서 제안한 레이아웃입니다. 이를 Jason Weaver라는 개발자가 자바스크립트로 만들어냈는데 Github에서도 Fork가 이루어지고 있고 Brad Frost 가 만든 레이아웃을 부트스트랩 3.0에 도입했습니다. 부트스트랩 문서에는 아직 정리가 안돼서 마지막 예제 썸네일이 나오지 않지만 제가 추가했습니다. 템플릿과 예제의 마지막 썸네일입니다. 이를 클릭하면 해당 페이지가 나오는데 스마트폰에서 보면 위의 그림처럼 컨텐트 영역에 화살표 아이콘이 나타납니다. 이를 탭하면 사이드바가 ..
지난 6일간 업데이트가 있었는데 주요 부분은 그리드 시스템입니다. 이미 언급한대로 도움말 문서 부분에서 정상적으로 업데이트 됐습니다. 이전의 경우 .col 선택자와 .col-lg-* 또는 .col-sm-* 선택자를 병용해서 그리드를 만들었는데 이것이 .col 선택자를 제거하고 사용하면서 3개의 기기 형태에 따라 선택자가 다릅니다. 스마트폰인 480이하에서는 .col-숫자, 태블릿 pc인 768이하에서는 .col-sm-숫자, 데스크탑인 768 이상에서는 .col-lg-숫자 입니다. 여러가지 선택자가 있는 것은 해당 사이즈에서 다르게 표현하기 위해서입니다. 물론 하나의 선택자만 사용해도 됩니다. 스마트폰과 데스크탑, 스마트폰, 태블릿 pc, 데스크탑의 사용예입니다. examples 폴더에서 gid 폴더의 i..
5월 23일 변경사항 업로드 후에 별로 변경된 것은 없고, 정리 차원에서 외부 URL이 수정됐습니다. 중요한 부분에서 수정이 진행되고 있는 부분이 그리드 시스템입니다. 아직 진행중인데 아주 어려운 부분인가 봅니다. 이전의 경우 .col 선택자와 .col-lg-* 또는 .col-sm-* 선택자를 병용해서 그리드를 만들었는데 이것이 .col 선택자를 제거하고 사용하도록 할 모양입니다. 즉 .col-lg-* 또는 .col-sm-* 만으로 그리드를 만드는 것이죠. 스타일시트에는 적용됐지만 도움말 문서에는 수정이 안됐습니다. 여러가지 웹브라우저, 특히 모바일 웹브라우저에서 나타나는 이상 증상을 해결하느라고 시간이 좀 걸리나 봅니다. 부트스트랩 3.0 6월 8일 현재 미리보기 --> http://twitter-bo..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. CSS3 Microsoft Modern Buttons 윈도우 8 메트로 스타일 버튼 프로그램 사이트 : http://ace-subido.github.io/css3-microsoft-metro-buttons/index.html Pixate iOS 앱 개발 프레임워크, XCODE를 이용, 개인용 무료임. 안드로이드용은 추후 발표 프로그램 사이트 : http://www.pixate.com/ HTML KickStart 부트스트랩 관련 프로젝트는 아니지만 부트스트랩과..
트위터 부트스트랩 3.0 버전이 이제 막바지에 이른 것 같습니다. 지난 5일 동안 스타일시트 부분의 수정은 거의 없고 일부 자바스크립트 부분에서 수정이 있었습니다. 또한 그동안 방치해뒀던 customize.html 부분을 재정리해서 말끔해졌습니다. 이전에 올렸던 파일은 제가 나름대로 편집한 것이었죠. 그리고 모든 파일을 jekyll(지킬)을 사용해서 컴파일했으니 원본과 동일한 파일이 됐습니다. 이전에는 윈도우에서 jekyll을 사용할 수 없어서 모든 파일을 일일히 수동으로 변환해야 했었습니다. 부트스트랩 문서가 jekyll로 만들어집니다. jekyll은 정적인 웹사이트를 만드는 프로그램으로 각종 Ruby gem을 사용합니다. 이것이 Unix 기반이라서 윈도우에서는 작동하지 않죠. 윈도우에서도 사용할 수 ..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. 이번 글은 php 개발 관련입니다. CODEIGNITER_FORM_BUILDER CODEIGNITER 라이브러리 폼 빌더 프로그램 사이트 : https://github.com/zwacky/codeigniter_form_builder WRIGHT 줌라 템플릿 생성 프레임워크 프로그램 사이트 : https://github.com/joomlashack/wright데모 사이트 : http://wright.joomlashack.com/demo/ Bootstrap fo..
트위터 부트스트랩이 지난 1주간 많이 변경됐습니다. 자바스크립트 부분이 상당히 변경됐고 CSS, Components 부분도 변경됐습니다. 주요 변경 내용을 보면 다음과 같습니다. .form-actions 선택자가 제거됐습니다. .form-inline을 사용하면 같은 효과를 거둘 수 있습니다. 반응형 선택자의 이름이 변경됐습니다. 이전에는 -phone, -tablet, -desktop을 사용했습니다. 자바스크립트가 수정이 되면서 개별 플러그인 파일은 제거됐습니다. 그외 여러가지 변경 사항은 파일을 참고하세요. 부트스트랩 3.0 미리보기 --> http://twitter-bootstrap.kr/bootstrap3/index.html 전체 파일 내려받기 -->
최근 트위터 부트스트랩 3.0의 문서 레이아웃이 전면 교체 됐습니다. 싱글 페이지의 레이아웃에서 이전의 레이아웃인 개별 페이지로 전환됐습니다. 하나의 페이지에서 수천개의 라인으로 돼있어서 검색의 잇점은 있지만 로딩에도 시간이 걸리고 관리하기도 힘들었죠. 이전의 레이아웃으로 복귀된 것입니다. 아울러 자바스크립트 플러그인인 Typeahead.js는 제거돼고 필요에 따라 Twitter's typeahead.js plugin 플러그인을 추가해서 사용할 수 있도록 했습니다. 그외 버그 수정이 많이 있었습니다. 그러면서 상단의 주메뉴 바가 다시 나타난 것이죠. 중앙의 View Docs 버튼은 제거됐습니다. getting-started.html 페이지 css.html 페이지 components.html 페이지 jav..