우리가 사는 세상은 폰트와 관련하여 두가지 미디어로 분류됩니다. 하나는 인쇄물을 통한 미디어이고 다른 하나는 웹을 통한 미디어입니다. 인쇄물을 통한 미디어는 주로 명조체를 사용하고 웹에서는 고딕체를 사용합니다. 다 이유가 있더군요. 우선 폰트를 구분하는 명조체와 고딕체, 이에 더하여 자유체에 대해 알아보겠습니다. 폰트와 관련하여 동일한 의미의 많은 용어가 있습니다. 폰트는 영어이고 한글로는 가장 많이 사용하는 것이 한글인 "글꼴"이 있고 한문으로는 "서체(書體)"가 있으며 영어를 많이 사용하다보니 글꼴이라는 순수 한글로 사용하는 이도 많습니다. 제 경우는 폰트라는 단어가 익숙하기 때문에 책에서도 폰트라는 단어를 사용하지만 출판사에서 리뷰할 때는 글꼴로 전환하려고 해서 의견 충돌이 자주 있습니다. 제 경우..
http://brm.io/matter-js-demo/#slingshot 소스 검색하다가 찾은 사이트인데 물리 법칙을 표현하기 위한 자바스크립트로 만들어진 게임이 있습니다. 돌을 쏴서 드럼통 밀어내기 게임인데 석궁의 돌을 클릭 드래그 해서 각도와 강도를 잘 조절해 화살표 있는 곳에 쌓으면 가장 빠르게 떨어트릴 수 있습니다. 하지만 조절이 안되면 드럼통이 원하지 않는 곳에 위치하게 되고 시간이 더 걸립니다. 하다보면 방법을 알게 됩니다. 포인트는 방금 전에 쏜 돌의 각도와 강도를 잘 기억해야 어떤 위치로 돌을 올릴지 알 수 있습니다.
트위터 부트스트랩 기반의 무료 템플릿입니다. 원 페이지 사이트를 만들 수 있으며 디자인이 상당히 좋습니다. 픽셀부다(pixelpuddha)는 소스를 얻기 위해 제가 자주 방문하는 사이트 중 하나입니다. http://pixelbuddha.net/freebie/freebie-white-one-page-html-template 위 페이지에서 하단으로 스크롤하면 데모를 볼 수 있는 링크와 다운로드 링크가 있습니다. http://evick.ru/market/white/image_slider/index.html 데모 사이트 링크입니다. 로드 되는데 좀 시간이 걸립니다. 압축파일을 해제하고 html 폴더로 들어가면 두개의 폴더가 있는데 그중 하나의 폴더의 이미지들은 더미 이미지인데 다른 하나의 폴더에서 복사해 사용하..
웹 개발 시 유용한 사이트를 소개합니다. http://tympanus.net/codrops/ 웹 개발자라면 웹디자인 소스를 찾다가 한번쯤은 들렀을 정도고 아주 유명한 사이트입니다. 새로운 글들이 올라와 데모를 확인하면 아주 놀라울 정도로 참신합니다. 메뉴에서 Tutorial은 웹 개발 시 필요한 소스와 함께 깊이 있는 강좌가 있습니다. 개별 글에서 데모를 확인할 수 있습니다. Playground 메뉴에서는 최신의 기술을 사용한 강좌가 있습니다. Blueprints에서는 실험적인 강좌와 소스가 있습니다. 중요한 것이 Collective 메뉴의 콘텐츠인데 이곳에는 여러 사이트에서 새로 올라온 글 중 신선한 내용을 목록형태로 보여주고 해당사이트로 이동할 수 있습니다. 이 사이트를 통하면 이와 비슷한 사이트를 ..
트위터 부트스트랩은 손쉽게 레이아웃을 만드는 도구로 자리를 잡았습니다. 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 폴더가 만들어집니다. 이 폴더..
깃허브에서 새로운 텍스트 편집기인 아톰을 개발해 오픈소스로 공개했습니다. 깃허브는 개발 소스 저장소(Repository)로 유명하죠. OSX 버전용으로 개발했지만 윈도우나 리눅스로도 빌드가 가능한데 까다로워서 만들다가 포기하고 누군가 만들어주기를 기다렸는데 며칠만에 나왔습니다. 아톰이 원래 모든 소스를 공개해 Hackable이라는 부제가 있습니다. 개인이 빌드를 만들었으니 공식 버전이 아니며 공식 버전이 나오길 기대해 봅니다. OSX 버전 링크 : https://atom.io/ 각 플랫폼 빌드 방법 : https://github.com/atom/atom/blob/master/README.md#building 리눅스 버전 빌드 방법 참고 : http://crunchbang.org/forums/viewtop..
줄무늬 패턴과 점무늬 패터 생성 사이트를 소개합니다. 간단한 클릭으로 이러한 무늬의 패턴을 만들고 파일을 내려받을 수 있습니다. http://www.binaryturf.com/free-software/stripe-generator/ 줄무늬 사이즈와 간격 사이즈를 픽셀로 입력하고 각각의 색상을 설정합니다. 배경이 없는 이미지는 Transparent Background에 체크하고 Go 버튼을 클릭하면 이미지가 만들어지며 Download 버튼을 클릭해 내려받습니다. 점무늬 패턴
트위터 부트스트랩 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 프로젝트 내려받기 -->