일반적으로 웹페이지 내부의 일정한 장소로 이동하는 기능은 HTML의 name 속성을 사용합니다. 아래의 코드에서 a태그의 링크를 클릭하면 href 속성값에 해당하는 #C4가 있는 Chapter 4로 이동하죠. 이동하는 곳의 a 태그에는 name 속성이 사용됐습니다. href 속성은 클릭하는 곳에 name 속성은 이동하는 곳에 넣고 값을 일치시켜주면 됩니다. href의 값에서 #는 현재 페이지를 의미합니다. Chapter 4 바로가기 Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter ex..
SK 텔레콤에서 트위터 부트스트랩을 기반으로한 웹앱 프레임워크를 개발했더군요. 지난 2월 11일 오픈소스로 공개해서 무료로 사용이 가능합니다. 단순히 부트스트랩만 포함시킨 것이 아니라 부트스트랩 기반의 여러가지 플러그인, MVC 패턴 지원을 위한 백본(Backbone.js) 등을 포함하고 있습니다. http://cornerstone.sktelecom.com 위 링크로 이동하면 코너스톤 관련 모든 문서를 볼 수 있습니다. 저장소 링크를 클릭하면 깃허브로 연결되며 관련된 모든 파일을 내려받을 수 있습니다. 용량이 153Mb나 되므로 받는 시간에 따라 속도가 엄청 차이납니다. 아침 시간에 받으니 몇분 걸리는데 어제는 몇시간이나 걸리더군요. 중간에 받다가 중단됐죠. 위 화면에서 3개의 버튼은 개별적으로 관련 파..
트위터 부트스트랩 3.0 버전이 4월 24일 현재 96% 진행됐습니다. 이전 업로드와 바뀐 것은 대부분 버그 수정입니다. 2.3.2 버전 수정이 7 퍼센트 진행됐습니다. 문서 초기 화면인 index.html 파일의 화면이 아주 단순하게 변경됐습니다. 부트스트랩 3.0 미리보기 --> http://twitter-bootstrap.kr/bootstrap3/ 내려받기-->
각종 웹브라우저가 지속적으로 업그레이드되면서 CSS3 규칙의 채용이 더욱 늘어나는 추세입니다. 그러면서 스타일시트만으로 멋진 웹페이지를 만들 수 있죠. 이전에는 포토샵이나 파이어워크로 만든 이미지로 버튼, 메뉴바, 아이콘 등에 사용했습니다. 이러한 이미지를 사용하면 반응형 모바일 디자인에서는 레이아웃을 벗어나게 됩니다. 그래서 포토샵으로 만든 UI 그래픽 디자인도 사라질 전망입니다. 스타일시트만으로 얼마든지 위와같은 모양을 만들 수 있기 때문이죠. 부트스트랩 관련 프로젝트 중에는 위와같은 psd 파일을 만들어놓은 것이 있습니다( http://gui.repixdesign.com/#bootstrap ). CSS 만으로 얼마든지 만들 수 있는데 왜 이런 것을 만들었을까요. 포토샵으로 레이아웃 디자인을 먼저 만..
트위터 부트스트랩 3.0 버전이 4월 14일 현재 95퍼센트 완료됐습니다. 2.0 버전에서 추가로 수정할 것이 있는지 버전 번호가 하나 추가됐습니다. 지난번 미리보기 업로드 후 지속적으로 세부적인 부분에서 버그를 수정해왔으며 새로 추가된 부분은 없고 버그 수정 작업이 계속되고 있습니다. 샘플 페이지에서 사용되던 이미지를 모두 더미 이미지로 교체해서 파일 용량을 대폭 축소했습니다. 6.7mb --> 2.3mb 미리보기 사이트 --> http://twitter-bootstrap.kr/bootstrap3/ 압축 파일 -->
트위트 부트스트랩 프레임워크가 인기를 얻으면서 해외 및 국내의 CMS가 부트스트랩을 기본 프레임워크로 채용하고 있습니다. 기본 프레임워크로 채용한다는 것은 테마나 스킨에 사용된다는 것이 아니라 CMS 자체, 즉, 관리자 화면을 의미합니다. 테마나 스킨은 이미 만들어서 사용하고 있고 사용자가 원하는 대로 디자인을 변경할 수 있는 것이죠. 중요한 것은 관리 시스템에서 부트스트랩 프레임워크를 사용한다는 것인데 이는 모바일 레이아웃을 위한 것입니다. 그만큼 부트스트랩이 모바일에 적용하기 쉽기 때문이죠. 해외에서는 3대 CMS인 워드프레스, 드루팔, 줌라가 있고 국내에서는 XE(익스프레스 엔진), 그누보드, 텍스트큐브(태터툴스: 티스토리 CMS), 킴스큐가 있습니다. 이들이 부트스트랩과 어떤 관련이 있는지 알아보..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Bootstrap Magic 부트스트랩 사용자 스타일시트 만들기 프로그램 사이트 : http://pikock.github.io/bootstrap-magic/index.html jQuery-Mobile-Bootstrap-Theme 부트스트랩 모바일 테마 프로그램 사이트 : https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme데모사이트 : http://andymatthews.net/code/jQuery..
아래의 링크로 이동하면 3개의 부트스트랩 템플릿을 내려받을 수 있습니다. http://jobpixels.com/bootbusiness.html Coming soon page 이중에서 Coming soon page 템플릿은 웹사이트를 개발할 때 공개하기 전에 첫 화면으로 사용하면 좋습니다. 웹사이트 공개시까지의 시간을 설정해서 카운트 다운 할 수 있습니다. 방법은 파일을 내려받아서 js 폴더에서 coming-soon.js 파일을 열고 until: '+1y'로 돼있는 것을 다음과 같이 수정합니다. $(".timer").countdown({ until: new Date(2013, 7, 1), 2013년 7월 1일 사이트를 연다는 것이므로 이 날짜를 기준으로 카운트 다운하게 됩니다. 해당 날짜를 기준으로 시간이..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. bootstrap-multisuggest 부트스트랩 다중 선택박스 프로그램 사이트 : https://github.com/rroppolo/bootstrap-multisuggestplugin데모 사이트 : http://htmlpreview.github.io/?https://github.com/rroppolo/bootstrap-multisuggestplugin/blob/master/demo.html bootstrap-wysiwyg 부트스트랩 위지위그 편집기. 음성..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. Bootstrap 3 for IE7 부트스트랩 3 용 인터넷 익스플로러 7 핵 - 베타버전 프로그램 사이트 및 데모 사이트 : https://github.com/coliff/bootstrap-ie7 SCREENCHECK 모바일 디자인 테스트 사이트 프로그램 사이트 및 데모 사이트 : http://cybercrab.com/screencheck/ HTML BUTTON GENERATOR 부트스트랩 버튼 생성기 프로그램 사이트 및 데모 사이트 : http://boo..
지난번 제 블로그에서 실시한 이벤트에 이어서 출판사에서 YES 24 홈페이지에서 서평이벤트를 실시합니다. 트위터 부트스트랩 서평 이벤트 바로가기 저자 : 김덕기 출판사 : 위키북스 신청기간 : 4월5일-4월11일 모집인원 : 5명 리뷰어발표 : 4월 12일 (금) 웹 개발자와 디자이너를 위한 정말 쉬운 웹 디자인 프레임워크 부트스트랩! 이 책은 4부분으로 나뉜다. 1장에서는 부트스트랩을 다루기 위한 기초 단계로 부트스트랩의 전체 내용에 대해 설명하고 있다. 일반 웹사이트 및 모바일 웹사이트를 제작하기 위해서 부트스트랩의 모든 기능을 설명한다. 부트스트랩은 스타일시트와 자바스크립트 라이브러리로서 웹페이지에 사용되는 모든 요소에 대해 미리 스타일시트를 만들어 놓고 있으므로 HTML에 선택자만 삽입해도 멋지게..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. BOOTSTRAP TOUR 사이트 투어 위자드. 프로그램 사이트 : https://github.com/Gild/bootstrap-tour데모 사이트 : http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin DURANDAL 싱글 페이지 앱 프레임워크 프로그램 사이트 : https://github.com/BlueSpire/Durandal데모 사이트 : http://durandaljs.com/page..
트위터 부트스트랩(Twitter Bootstrap)은 웹사이트 제작에 사용되는 프레임워크입니다. 트위터 개발자들이 내놓은 이 툴은 처음에는 트위터 내부에서 인터페이스의 일관성을 위해 만들어졌지만 오픈소스로 공개하면서 큰 인기를 얻고 있습니다. 일정한 틀을 가진 저작도구를 프레임워크라고 하는데 티스토리나 워드프레스도 블로그나 웹사이트를 만들기 위한 프레임워크라고 할 수 있습니다. 이들은 블로그나 웹사이트의 콘텐츠를 만들 수 있는 도구이지만 부트스트랩은 웹사이트의 레이아웃인 스킨이나 테마 디자인을 하기 위한 도구입니다. 그동안 웹 프레임워크는 여러 종류가 개발됐지만 웹사이트의 모든 요소에 대해 스타일시트를 정의한 것은 부트스트랩이 처음입니다. 웹 페이지를 만들 때 어떤 요소가 필요할까요? 우선 제 블로그를 ..
트위터 부트스트랩을 이용해서 웹 페이지를 디자인에 필요한 각종 플러그인을 수록하겠습니다. 부트스트랩은 웹 개발자의 무료 하드디스트 서비스인 기트허브(Github)에 오픈소스로 등록되어 있어서 관련 프로젝트도 대부분 이곳에서 오픈소스로 공개돼있습니다. WATable 데이터 테이블, 분류, 페이징, 필터링 가능 프로그램 사이트 및 데모 사이트 : http://wootapa-watable.appspot.com/ jekyll bootstrap 정적인(Static) 웹사이트를 만들 수 있는 프레임워크, 부트스트랩 테마 사용, 데이터베이스가 필요 없어서 빠른 속도의 웹사이트 제작 가능. 현재 부트스트랩 3.0의 문서도 이 프레임워크로 제작. 웹 개발자들은 워드프레스에서 이 프레임워크로 전향 중. 향후 자세한 사용법..
트위터 부트스트랩이 최근 며칠 동안 개발이 신속히 진행되고 있는 듯합니다. 3월 31일 현재 추가된 새로운 기능이 있어서 소개합니다. 1. 리스트 그룹 리스트는 기존에 내비게이션 항목에서 탭(Tab), 필(Pill)과 같이 있던 것을 별도의 항목으로 떼어서 처리했습니다. 바로가기 2. 패널 패널 기능이 추가됐습니다. 사이드바의 위젯에 사용하면 좋을 듯합니다. 바로가기 3. 상단으로 가기 버튼 부트스트랩의 기능이 아니라 문서의 사용을 편리하게 하기 위한 상단으로 이동하기 버튼이 추가됐습니다. 긴 내용의 문서에서는 반드기 필요한 기능이죠. 이것은 부트스트랩에 있는 affix 기능을 이용한 것입니다.
부트스트랩 3.0이 개발 중인 상태이며 최근에 문서 레이아웃이 대폭 변경됐습니다. 그동안 여러개의 파일로 있던 것을 하나의 파일로 만들었습니다. 이에 따라서 하나의 페이지에서 검색해서 관련 내용을 찾을 수 있으므로 찾기 쉽게 했습니다. 관련 글: http://martian36.tistory.com/1154 상단에 있던 메뉴바는 필요없으므로 제거됐고 그대신에 문서로 이동할 수 있는 버튼이 추가됐습니다. View docs 버튼을 클릭하면 부트스트랩의 모든 내용이 있는 페이지로 이동합니다. 문서의 초기화면입니다. 좌측의 사이드바에서 메뉴를 선택하면 해당 내용으로 이동합니다. 최근에 바뀐 내용은 그리드 시스템에서 그동안 .span+숫자의 형태에서 .col-span-숫자의 형태로 바뀌어서 더 특정화했습니다. 즉 ..