demun(대문블로그)

퍼블리셔/도구2014. 3. 26. 07:00

반응형으로 검색을 하다가 좋은 프레임웍이 있어 소개합니다. 바로 320 and Up 입니다. 장점은 뭐냐? 1. 미디어쿼리: 480,600,768,992,1382 등에 맞쳐 미디어쿼리를 만들어놓았습니다. 2. 컬러, texture, 타이포그래피 등을 레이아웃과 분리하여 작성하여 두었습니다. 3. 부트스트랩의 버튼, 폼, 테이블 스타일을 사용할 수 있습니다. 4. Modernizr, Selectivizr 과 responsive type tester 그리고 design tester 등을 사용할수 있도록 했습니다. 5. Less 와 Sass 를 사용할 수 있습니다. 다운로드해서 index.html 을 보면 HTML5 Boilerplate 를 사용한것을 볼 수 있습니다. 그리드 시스템은 frameless 를 사..

퍼블리셔/Bootstrap2013. 10. 3. 01:00

Jumbotron 과 Page header 에 대해서 이야기 합니다.부트스트랩에서 말하는 Jumbotron 은 사이트에서 주요 내용을 소개하기 위한 박스 형태의 스타일을 말합니다.메인페이지에 보면 컨텐츠 상단에 가장 중요한 글이나 주요내용을 표시하는 공간이 있는데요. 바로 그런 부분을 말합니다. Page header 은 해당 페이지의 제목부분에 해당하는 부분을 말합니다. Jumbotron 위에서도 말했듯 페이지의 주요내용이나 중요 콘텐츠를 줄여 표기하기 위한 공간을 말합니다.그런 공간을 사용하라고 부트스트랩에서는 따로 클래스를 만들어놨습니다..jumbotron 클래스를 사용하면 되는데요. 여기안에 .container 를 사용하면 적절한 여백을 유지하며 둥근 모서리를 제공합니다. Page header 페이..

퍼블리셔/Bootstrap2013. 8. 28. 09:00

내용이 길어 전편에 이어갑니다. 브라우져 지원. 부트스트랩 버젼 2에서는 IE 7까지 지원을 했었습니다. 물론 버젼 3에서도 IE7도 충분이 잘 동작합니다.동작하는데는 문제가 없지만 부트스트랩 버젼3에서는 CSS3 를 많이 사용함으로 IE9 이하에서는 동일하게 보여지지 않을 수 있습니다. 또한 미디어쿼리를 지원하지 않기 때문에 respond.js 등을 링크 시켜야 합니다. 호환성을 위해 IE 최신모드를 사용하도록 head 안에 아래와 같은 코드를 추가해야 합니다. 이것은 IE 최신버젼을 사용하라는 내용입니다. Windows Phone 8 and Internet Explorer 10 윈도우8과 익스플로러 10에서 뷰포트 장치의 너비를 구분하지 못하는 일이 있어 미디어쿼리를 제대로 설정할 수가 없습니다.MS..

퍼블리셔/Bootstrap2013. 8. 27. 08:55

이전에 홈페이지나 다운로드 링크를 알려드렸습니다.오늘도 다운로드 링크와 함께 부트스트랩 3을 어떻게 시작해야 하는지 알아봅니다.홈페이지에서 Getting started 를 클릭하면 아래와 같은 화면이 나옵니다. 보시면 css, js, fonts 등만을 포함한 최소한의 파일을 다운로드 할 수 있는 링크를 제공하고 있습니다.다운로드 하시면 홈페이지에서 다운로드하는 것과는 폴더명이 다른 dist 가 붙은 파일로 다운로드를 제공합니다. 다운로드는 이전 포스트에서도 말했든 github 저장소에서 프로젝트 형식으로 다운로드 받을 수 있습니다. 이전부터 부트스트랩은 CDN 을 제공하고 있습니다. 다운로드를 받지 않아도 cdn 링크만 걸어줘도 사용할 수 있다는 말입니다.예제는 홈페이지에 나와 있듯 아래 이미지와 같습니..

티스토리/스킨배포2012. 7. 26. 06:00

부트스트랩 스킨 버젼 3 입니다. 이번 스킨에서는 기능에 대해서 좀 추가를 많이 했습니다. 변경된 점과 추가된 기능에 대해서 소개합니다. 아무래도 조금 더 다듬으면 좋은 스킨이 될것 같습니다. html 마크업 - Fluid grid system 이번에는 격자 시스템 중에서 꽉찬 화면인 Fluid grid system 을 사용했습니다. 기존과 다른점은 아무래도 클래스에 fluid 가 붙는다는 겁니다. 좀 더 다듬어야 할 부분은 화면이 줄었을때를 대비해서 미디어쿼리를 작성해야 하는데..... 티스토리는 모바일 화면을 독점으로 사용하니...따로 작성할 필요가 없습니다. html5 에 맞게 section 같은 추가된 태그를 사용해야 하는데....안햇습니다. 아래 이미지는 평상시 모습입니다. 사이즈를 줄이면 해더..

티스토리/스킨배포2012. 7. 12. 06:00

부트스트랩을 이용한 티스토리 스킨을 배포합니다. 스킨명은 Bootstrap_TS 입니다. 이 스킨은 제가 현재 시점에 적용한 스킨입니다. 기본 디폴트 테마는 부트스트랩에서 제공하는 자바스크립트 플러그인 포함하지 않은 스킨입니다. 단 jQuery 만 포함해서 하단의 top 버튼을 클릭하면 상단으로 부드러운 화면이동을 합니다. 이외에는 아무것도 포함하지 않은 깨끗한 버젼입니다. 되도록이면 디폴트로 사용해서 다른 테마도 이용할 수 있게 만들었습니다. 한 스킨에 아래의 테마를 모두 사용할 수 있습니다.제가 글을 잘 못 썻는지 요청하시는분이 어떤 테마, 어떤 테마 주세요하고 신청을 하십니다. 근데 이 스킨은 한스킨안에 아래의 테마를 모두 사용할 수 있습니다. 사용하는 방법을 아래에서 알려드리는 겁니다.5가지 테마..

티스토리/스킨변경제작이력2012. 7. 8. 14:57

부트스트랩으로 스킨을 변경했습니다. bootstrap 과 kickstrap 에 대해서 하나 하나 풀어가려고 일단 이놈으로 변경했습니다. 아쉬운점은 부트스트랩에서 제공하는 아코디언 메뉴를 티스토리 스킨에서는 사용하지 못합니다. 중간에 치환자가 들어가서 됏다 안됐다 합니다. 하지만 치환자가 들어가지 않은 곳에서는 얼마든지 사용할수 있습니다. 이 스킨에서는 그닥 스타일이 많이 변경된것이 없습니다. 흰색 배경에 회색 사이드바 정도....아니면 댓글 부분이 회색인 정도.... 그건 윈본에서 지원하는 것만 사용했기 때문입니다. 아래 이미지는 본문에서 kickstrap 에 대한 글을 쓴적이 있는데 그걸 스샷으로 찍었습니다. 되도록이면 원본을 건드리지 않는 선에서 제작을 했습니다. 원본을 조금만 건드리니 좀더 보기 좋..

퍼블리셔/Bootstrap2012. 7. 8. 06:00

얼마전 부트스트랩을 소개한적이 있었습니다. 보자마자 티스토리 스킨에 적용을 해보았지요.... Bootstrap - 홈페이지 개발 및 디자인을 위한 혁명적인 도구 => http://demun.tistory.com/2133 부트스트랩(Bootstrap)에 관한 유용한 도구 => http://demun.tistory.com/2136 부트스트랩으로 만들어본 티스토리 스킨 참고 이미지. 그냥 흰색 배경에 사이드바는 아코디언 메뉴로 만들어 봤습니다. 상단 네비게이션은 부트스트랩에서 지원하는 드롭다운으로 만들었구요. 또 하단에는 탭메뉴를 적용해봤습니다. 부트스트랩도 완전하지는 않았습니다. 아니 티스토리에 적용하는데 잇어 단점도 보이더군요. 특히 자바스크립트 부분이 티스토리는 치환자를 사용하기 때문에 아코디언 부분이 ..

퍼블리셔/Bootstrap2012. 6. 23. 12:22

제목이 거창하지요....ㅎㅎㅎㅎ. 제가 부트스랩을 알고서부터 티스토리 블로그에 적용해볼려고 이것 저것 살펴보고 적용해보고 하는 과정에서 싸여만 가는 정보가 넘 많아서 이렇게 중간에 공유하게 됐습니다. 부트스트랩 ( http://twitter.github.com/bootstrap/index.html ) 은 html5, css3, javascript 로 홈페이지 제작을 도와주는 오픈소스기반의 프레임워크입니다. 자세한 내용은 위의 주소에 가면 나와있구요. 한글로 차근 차근 설명한 분이 있는데 nhn 개발팀에 박경일님으로 설명을 대신합니다. 제가 부트스트랩을 접했을때는 무엇보다도 자바스크립트에 대한 지식이 없어도 어느정도 응용이 가능하다는 점이였습니다. 또한 테마 또한 여러가지를 제공하고 있고 무엇보다도 격자(..