demun(대문블로그)

퍼블리셔/Bootstrap2013.10.11 01:00

Progress bars(진행바)는 작업의 흐름이나 액셕의 진행을 나타낼때 사용합니다.CSS3 의 트렌지션과 에니메이션을 사용하기 때문에 IE9 이하나 구버젼의 파이어폭스에서는 지원되지 않습니다.또 오페라 12도 애니메이션을 지원하지 않는다고 하네요.기본예제는 아래와 같습니다..progress 클래스로 진행바의 영역을 감싸고 진행바의 상태를 표시하기 위해 .pregress-bar 클래스를 사용합니다.일관된 스타일을 유지하기 위해 sucess, inf..

퍼블리셔/Bootstrap2013.10.10 01:00

부트스트랩의 미디어객체는 다양한 유형 즉 블로그의 댓글이나 트위등에 사용하기 좋은 스타일입니다. 이미지를 왼쪽이나 오른쪽에 붙일 수도 있습니다..media 클래스를 사용하며 다음에 오는 요소로 왼쪽에 배치하고 싶으면 .pull-left 오른쪽으로는 .pull-right 클래스를 사용합니다.기본 형태는 미디어 객체 즉 이미지, 동영상, 소리 등을 왼쪽이나 오른쪽에 배치합니다.아래 예제는 64*64 의 이미지를 배치한 형태입니다.리스트 형태.댓..

퍼블리셔/Bootstrap2013.10.08 01:00

부트스트랩 Bootstrap 3 에서는 이미지, 비디오, 텍스트 등을 쉽게 그리드하려면 썸네일 컨포넌트와 부트스트랩의 그리드시스템을 이용하라고 합니다.부트스트랩에서 썸네일은 최소한의 필수 마크업으로 인한 링크 이미지를 보여주기위해 고안되었다고 합니다.아래는 기본 예제입니다.링크 안에 이미지가 존재하는 형식입니다.콘텐츠에 맞게 제작도 가능합니다.약간의 추가 마크업으로 이미지와 텍스트, 그리고 버튼 등이 같은 너비에 보여지도록 가능합니..

퍼블리셔/Bootstrap2013.08.28 09:00

내용이 길어 전편에 이어갑니다.브라우져 지원.부트스트랩 버젼 2에서는 IE 7까지 지원을 했었습니다. 물론 버젼 3에서도 IE7도 충분이 잘 동작합니다.동작하는데는 문제가 없지만 부트스트랩 버젼3에서는 CSS3 를 많이 사용함으로 IE9 이하에서는 동일하게 보여지지 않을 수 있습니다.또한 미디어쿼리를 지원하지 않기 때문에 respond.js 등을 링크 시켜야 합니다.호환성을 위해 IE 최신모드를 사용하도록 head 안에 아래와 같은 코드를 ..

퍼블리셔/Bootstrap2013.08.27 08:55

이전에 홈페이지나 다운로드 링크를 알려드렸습니다.오늘도 다운로드 링크와 함께 부트스트랩 3을 어떻게 시작해야 하는지 알아봅니다.홈페이지에서 Getting started 를 클릭하면 아래와 같은 화면이 나옵니다.보시면 css, js, fonts 등만을 포함한 최소한의 파일을 다운로드 할 수 있는 링크를 제공하고 있습니다.다운로드 하시면 홈페이지에서 다운로드하는 것과는 폴더명이 다른 dist 가 붙은 파일로 다운로드를 제공합니다.다운로드는 이전 포스트에..

퍼블리셔/Bootstrap2013.08.26 12:52

부트스트랩이 버젼 3이 나왔지만 베타버젼으로써 RC1,2 를 거쳐 3.0버젼까지 올라갔습니다.모바일 우선주의로 인해 이전에 부트스트랩 2 버젼은 IE7 이상을 지원했지만 이제는 IE 9이상을 써야 됩니다.즉 IE 무시.....ㅎㅎㅎ.대략 그렇다고치고, 릴리즈에 대한 내용은 github 사이트의 https://github.com/twbs/bootstrap/releases 를 참고하시면 됩니다.부트스트랩 3.0 홈페이지 ->&nb..

일상2013.08.03 23:28

야심차게 계획하고 제작한것이 에드센스 스킨 4버젼이였습니다.다양한 분들에게 광고 탑제가 쉽게 만들려고 했고, 다양한 컬러셋을 사용함으로써 질리지않게 오래 사용하도록 할려고 한것이 목적이였습니다.많은 분들이 호응이 있었습니다. 보시면 아시겠지만 현재 글쓰는 시점에 195개의 댓글이 달릴정도이니 말입니다.나중에는 제가 사용하고 있는 자바스크립트가 포함된 버젼을 배포하는것이였습니다.자바스크립트가 포함된 것은 공유가 되었는데요. 그것은 버젼1이고 다듬은것이..

퍼블리셔2013.04.29 08:32

부트스트랩 3이 나왔습니다. 버젼3은 모바일에 최적화 됐다는점이 특징이고 이전과 비슷하고 좀더 최적화한것 같습니다.부트스트랩 3은 아직 현재 진행형인것 같습니다.배포 버젼은 2.3.1 입니다.2.3.1 버젼은 현재 버그수정이 약 7%가량 진행되었고, 3.0 은 94% 진행된걸로 나옵니다.진행상황보기 -> https://github.com/twitter/bootstrap/issues/milestones부트스트랩 3 -> h..

티스토리/스킨변경제작이력2012.12.13 09:00

부트스트랩 프레임워크를 활용해서 버젼3까지 제작하고 이번에는 Responsiv 라는 이름으로 반응형 티스토리 스킨을 제작해보았습니다.부트스트랩이 그리드 시스템을 지원하니 어지간하면 따로 미디어쿼리를 제작하지 않아도 반응형으로 작동합니다.허나 티스토리 자체의 요소가 있기에 전혀 손을 안되고는 안되더군요.현제 제 블로그 스킨은 Responsive 입니다. 2012.12.10 현재.주요 사항이 배경을 rgba 를 사용해서 보일듯 말듯 스타일을 처리했습니다..

퍼블리셔/기술2012.10.25 09:00

부트스트랩의 장점중 하나는 기본 틀이 만들어져 있어서 갖다 쓰기만 하면 된다는 점입니다. 그중에서 드롭다운 형식의 메뉴바입니다. 자세한 내용은 http://twitter.github.com/bootstrap/javascript.html#dropdowns 를 참고하시기 바랍니다. 일단 예제를 한번 보시죠.  어떤걸 말하는지 보시면 알 수 있을겁니다. ..