트위터 부트스트랩이 최근 며칠 동안 개발이 신속히 진행되고 있는 듯합니다. 3월 31일 현재 추가된 새로운 기능이 있어서 소개합니다. 1. 리스트 그룹 리스트는 기존에 내비게이션 항목에서 탭(Tab), 필(Pill)과 같이 있던 것을 별도의 항목으로 떼어서 처리했습니다. 바로가기 2. 패널 패널 기능이 추가됐습니다. 사이드바의 위젯에 사용하면 좋을 듯합니다. 바로가기 3. 상단으로 가기 버튼 부트스트랩의 기능이 아니라 문서의 사용을 편리하게 하기 위한 상단으로 이동하기 버튼이 추가됐습니다. 긴 내용의 문서에서는 반드기 필요한 기능이죠. 이것은 부트스트랩에 있는 affix 기능을 이용한 것입니다.

부트스트랩 3.0이 개발 중인 상태이며 최근에 문서 레이아웃이 대폭 변경됐습니다. 그동안 여러개의 파일로 있던 것을 하나의 파일로 만들었습니다. 이에 따라서 하나의 페이지에서 검색해서 관련 내용을 찾을 수 있으므로 찾기 쉽게 했습니다. 관련 글: http://martian36.tistory.com/1154 상단에 있던 메뉴바는 필요없으므로 제거됐고 그대신에 문서로 이동할 수 있는 버튼이 추가됐습니다. View docs 버튼을 클릭하면 부트스트랩의 모든 내용이 있는 페이지로 이동합니다. 문서의 초기화면입니다. 좌측의 사이드바에서 메뉴를 선택하면 해당 내용으로 이동합니다. 최근에 바뀐 내용은 그리드 시스템에서 그동안 .span+숫자의 형태에서 .col-span-숫자의 형태로 바뀌어서 더 특정화했습니다. 즉 ..

책 제목 : 트위터 부트스트랩 - 디자이너도 놀라워 할 매끈하고 직관적인 웹 사이트 디자인의 비밀(432페이지, PDF 포함 504페이지)영문 제목 : Twitter Bootstrap for Web Development 2013. 3.29일 인쇄 완료되어 선정된 분들에게 오늘 날짜로 발송됩니다. 늦어도 다음 주 월요일에는 받아보실 수 있습니다. 트위터 부트스트랩 책 출간 기념으로 이벤트를 진행합니다. 이 책이 CSS와 HTML을 다룰 줄 아는 분을 기준으로 만들어졌기 때문에 어느정도 웹 디자인 지식이 있어야 따라하실 수 있습니다. 대상 : 웹디자이너, 웹 개발자, 및 CSS로 웹사이트를 스스로 만들 줄 아시는 분을 기준으로 네이버, 티스토리, 다음, 각 포털 사이트 블로거를 배분하여 10명을 선정합니다...

제목 : 트위터 부트스트랩 - 디자이너도 놀라워 할 매끈하고 직관적인 웹 사이트 디자인의 비밀(432페이지) 영문 제목 : Twitter Bootstrap for Web Development 원고는 한달 전에 완료가 됐지만 리뷰와 부트스트랩 3.0 버전 추가 수록으로 인해 책의 출간이 다소 늦어졌습니다. 이제 표지 디자인이 나왔고 모든 편집이 완료돼서 오늘부터 인쇄 작업에 들어가며 내일부터 각 인터넷 서점에 예약 판매를 올릴 예정입니다. 부트스트랩 3.0 버전이 현재 92% 진행됐는데 이달 말 정도면 완료되리라 생각합니다. 이전 글에서도 언급했듯이 부트스트랩 3.0은 모바일 우선 지원(Mobile First)이라서 2.0 버전과 좀 다릅니다. 레이아웃 방법도 달라지고 기능도 모바일에 맞게 줄어들었습니다...

현재 부트스트랩 3.0이 개발 중에 있고 80% 정도 완성돼 있어서 조만간 출시될 예정입니다. 부트스트랩은 1.0 버전에서 데스트탑 전용으로 나왔고 2.0은 모바일 겸용, 3.0은 모바일 우선 지원, 데스크탑 겸용으로 진화하고 있는 것입니다. 현재 부트스트랩 책을 2.0 버전의 마지막 버전인 2.31을 기준으로 만들었지만 이 책이 나올 즈음에는 3.0 정식 버전이 나오겠죠. 그래서 책에 3.0 버전에 관한 내용을 수록하기 위해 작업하고 있습니다. 책을 두가지 버전에 대해 다루고 있는 이유는 우선 3.0 버전이 모바일 우선 지원이다 보니 IE7 버전을 지원하지 않습니다. 국내에서 아직도 IE7을 사용하고 있는 사용자가 상당하다보니 3.0 버전만 다루는데 무리가 있습니다. 두번째 이유로는 부트스트랩은 자바스..

1-1-3 웹 디자인 프레임워크프레임워크란 프로그램을 더 쉽고 빠르게 만들기 위해서 미리 만들어진 도구와 기능을 가진 코드의 라이브러리입니다. 정형화된 틀이 갖춰져 있어서 프레임워크라고 합니다. 웹 디자인을 하다 보면 정형화된 코드는 자주 사용하게 되므로 별도의 파일을 만들어서 저장하고 필요할 때마다 복사해서 사용합니다. 이른바 스니핏(snippet)이란 것인데 자주 사용하는 코드를 스니핏으로 만들어놓고 사용하면 다시 작성하지 않아도 되므로 빠르게 웹사이트를 만들 수 있습니다. 웹 디자인에 사용되는 정형화된 코드의 집합체인 프레임워크는 종류가 다양합니다. 보일러 플레이트(Boiler Plate: http://html5boilerplate.com/), 파운데이션(Foundation: http://found..

지난 두달간의 작업으로 트위터 부트스트랩 책 원고를 마치고 현재 리뷰 중에 있습니다. 리뷰를 마치면 디자인 작업과 인쇄를 거쳐 3월 중순경에 책이 출간될 예정입니다. 트위터 부트스트랩은 그동안 나온 웹디자인 프레임워크 중에서도 탁월한 기능으로 인해 많은 인기를 얻으며 현재 2.3.0 버전까지 나와있고 향후 출시될 3.0 버전은 기존의 모바일 겸용에서 모바일 우선 지원 형태로 진화될 것으로 보입니다. 책의 내용은 3개의 장으로 구성되며 첫번째 장은 부트스트랩 기초, 두번째 장은 Less 프리프로세서, 세번째 장은 부트스트랩으로 디자인하기 입니다. 부트스트랩 스타일시트는 Less라는 프리프로세서로 만들어졌기 때문에 2장에 Less 사용법을 포함시켰습니다. 각 장의 간략한 내용을 알아보면 다음과 같습니다. 1..

부트스트랩의 특징 웹페이지를 쉽게 만들 수 있다 부트스트랩의 홈페이지에서도 언급하고 있듯이 부트스트랩을 다루기 위해서는 html과 CSS에 대한 지식을 필요로 합니다. 그렇다고 깊은 지식이 필요한 것은 아니며 html 태그의 사용법, 역할을 알고 있으면 되고 CSS는 혼자서 레이아웃을 만들줄만 알면 됩니다. 웹페이지는 html 태그로 뼈대가 만들어지며 태그에 CSS 선택자를 추가하고 이 선택자에 대해서 스타일시트에서 속성과 값을 선언해서 레이아웃을 만들게 됩니다. 그런데 선택자는 이미 부트스트랩 스타일시트에서 만들어 놓았으니 태그에 선택자만 삽입하면 되는 것이죠. 다만 어떤 선택자를 어느곳에 삽입해야하는지를 알아야하는 것입니다. html 코드의 재활용 부트스트랩은 이미 만들어진 스타일시트를 재활용하는 것..

부트스트랩이란? 트위터 부트스트랩은 웹디자인을 쉽게하기 위해서 CSS의 클래스 선택자에 정의된 스타일시트와 자바스크립트 플러그인의 라이브러리입니다. html로 웹페이지의 뼈대를 만들고 스타일시트에서 레이아웃을 만들기 위한 CSS의 속성과 값을 입력하는 대신 미리 정의된 클래스 선택자를 html 코드에 삽입만 하면 레이아웃과 각종 요소가 만들어집니다. 부트스트랩의 스타일시트는 7000여 라인으로 만들어져 있어서 웹페이지를 만들기 위한 거의 모든 요소에 대해서 정의를 해놓았기 때문에 손쉽게 웹사이트를 만들 수 있는 플랫폼으로 큰 인기를 얻고 있습니다. 웹사이트를 너무 쉽게 만들 수 있다는 점에서 진정한 웹디자인이 아니라는 우려의 목소리도 나올 정도입니다. 스타일시트의 재활용 스타일시트로 웹디자인을 하다보면 ..

"트위터 부트스트랩: 디자이너도 놀라워할 매끈하고 직관적인 웹 사이트 제작의 비밀" 책 소스코드 2013.3.17일 현재 부트스트랩 3.0 버전 2013.9.27일 현재 부트스트랩 3.0 버전 압축을 풀고 _gp_pages 폴더에 들어가서 index.html 파일을 선택하면 브라우저에 바로 열립니다. 참고 사이트 서적 웹사이트 : http://twitter-bootstrap.kr/ 2.0 버전으로 디자인하기 : http://twitter-bootstrap.kr/bootstrap-demo/ 3.0 버전으로 디자인하기 : http://twitter-bootstrap.kr/bootstrap-demo2/ 위 3.0 버전 데모 사이트는 3월 17일 현재 버전으로 디자인 한 것입니다. 부트스트랩 관련 플러그인이 업..

웹사이트 디자인할 때 아이콘은 시각적 효과로 인해서 필수적인 요소로 돼가고 있습니다. 이전에는 투명 기능을 제공하는 png 파일의 아이콘 사용해서 CSS의 background 속성을 이용해 요소에 배치하고 사용했지만 폰트 아이콘이 등장하면서 훨씬 편하게 사용할 수 있고 폰트의 성질을 갖고 있으므로 색상 변경이나 크기 변경도 자유롭습니다. 폰트 아이콘은 개발하는 회사 마다 달라서 어느 한 곳의 아이콘에 마음에 드는 아이콘이 없어서 다른 폰트 아이콘을 추가해야할 수도 있어서 이러다 보면 몇개의 폰트 아이콘을 사용하고자 수십개의 파일을 사용해야하고 폰트 하나의 용량도 커서 웹 페이지 로딩 속도에도 영향을 미칩니다. 그런데 여러가지 폰트 아이콘을 한곳에 모아놓고 원하는 아이콘만 뽑아서 쓸 수 있다면 여간 편리한..

다음은 몇개월 후 발행될 책 내용의 일부입니다. 1. 부트스트랩 파일 내려받기 http://twitter.github.com/bootstrap/ 위 링크로 이동하면 트위터 부트스트랩 홈페이지가 나타납니다. 부트스트랩 파일을 내려받는 방법은 3가지가 있습니다. 우선 기본적인 파일을 내려받으려면 파란색의 “Download Bootstrap” 버튼을 클릭하고, 부트스트랩 관련 전체 파일을 내려받으려면 “GitHub project” 링크를 클릭해서 페이지를 이동한 후, zip 파일을 내려받으면 됩니다. 마지막 방법은 메뉴 상단의 Customize 링크를 클릭해서 원하지 않는 부분을 제거하고 내려받는 방법입니다. 이 책에서는 아이콘의 활용도가 높은 Font Awesome 폰트 아이콘을 사용할 것이므로 Custom..