demun(대문블로그)

퍼블리셔/도구2017. 12. 5. 13:40

온라인상에서 글쓰기 도구라고 검색하면 많은 툴이 나옵니다.그중에서도 sphinx 나 read the docs 같은 툴이 있습니다.mkdocs 는 마크다운 형식으로 문서를 작성하고 github 에 올리면 Github Pages 로 호스팅되어 볼 수 있습니다. 깃 저장소는 https://github.com/demun/mkdocs-tuts 이며 mkdocs 로 제작되는 튜토리얼이 호스팅되는 주소는 https://demun.github.io/mkdocs-tuts/ 입니다.아래는 로컬에서 작업중인 화면을 캡쳐한 것입니다.

퍼블리셔/도구2016. 8. 25. 07:00

요즘에는 콘솔 즉 명령창(cmd) 를 많이 사용합니다.Grunt 를 많이사용하니 npm install 등의 명령어도 많이 사용하고 이래저래 명령어를 많이 사용합니다. 더군다나 git 을 사용하니 관련 명령어도 많이 사용하구요. 그래서 좀더 사용하기 좋은 콘솔창은 없을까 찾다보니 좋은게 있더군요. 바로 cmder 입니다. cmder 홈페이지 -> http://cmder.net/단축키와 설정까지 할수있어 사용자의 입맛에 맞게 변경할수 있습니다.다운로드 받아서 바로 사용하면 됩니다.명령어를 사용하기 편하려면 해당 폴더에서 명령창을 여는경우가 많습니다.git bash 의경우 해당 폴더에서 바로 마우스 우측버튼으로 열수가 있습니다. 그러면 아주 유용하죠.cmder 도 위의 이미지처럼 마우스 우측버튼을 누르면 나오..

퍼블리셔/도구2015. 11. 17. 07:00

온라인에서 코드를 작성하고 보여주는 사이트는 몇군데 있습니다. 이전에도 비슷한 글을 작성한 적이 있지요.온라인 구문강조 사이트 -> http://demun.tistory.com/2038이번에는 현재 나와있는 사이트중에서 가장 많은 기능을 제공하고 있는 곳입니다. 바로 codepen 입니다. 1. 회원가입http://codepen.io/먼저 회원가입이 안되어 있으시면 우측 상단에 Sign Up 을 통해서 가입하시길 바랍니다.공개하면 무료로 사용할 수 있습니다. 왼쪽 하단에 Free Plan 을 클릭해서 무료로 사용할 수 있습니다. 가입후 로그인을 해야 제가 올린 코드를 쉽게 찾을 수 있습니다. 2. 장점사용시 우측 상단에 New Pen 을 클릭해서 코드를 작성하시면 됩니다.기본적으로 새개의 패널이 열립니다..

퍼블리셔/도구2015. 2. 10. 09:49

CSS 의 전처리 언어는 크게 세가지가 있습니다. LESS, SASS, STYLUS 입니다. 각자의 장점이 있기에 사용을 많이 하는데요. 사용하다보면 각각 변환을 해야할때가 있습니다. 저는 GRUNT 를 사용해서 변환을 하지만 그래도 간단이 변환을 해야할때가 있는데요. LESS 같은 경우는 JS 를 로드해서 변환하기도하고 툴을 이용해서 변환을 하기도 하지만 좀더 편하게 사용할 수 있는 사이트가 있어 알려드립니다.CSS 로 변환하거나 또는 꺼꾸로 LESS, SASS, STYLUS 로 변환을 자유롭게 할 수 있는 사이트 입니다. 해당 사이트는 바로 http://csspre.com/convert 입니다.보시면 대략 아시겠지만 LESS -> SASS 로 변환한다든가 LESS -> STYLUS 로 변환한다든가 하..

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

홈페이지 제작을 위한 프레임워크는 유명한 부트스트랩이 있지요. 또 Foundation 이나 Skeleton 도 많이 사용합니다. 더 많은 프론트 엔드 프레임워크는 http://usablica.github.io/front-end-frameworks/compare.html 에서 보실수 있습니다. 하지만 이 모든것이 외국것이라는.....아쉬운점이 있습니다. 우리나라에서 제작한 것도 있습니다 그래서 여러분들께 알려드릴려고 이렇게 포스팅하게 되었습니다. 바로 엑시스제이(AXISJ) 입니다. -> http://www.axisj.com/ 장기영이라는 분이 제작한 걸로 알고 있고, 여러분이 협업하여 도와주시고 있는걸로 알고 있습니다. http://dev.axisj.com/ 로 가시면 다양한 UI 들을 보실수 있습니다...

퍼블리셔/도구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 를 사..

퍼블리셔/도구2013. 1. 14. 05:00

요즘은 html5에 대한 관심이 날로 높아지는 시기입니다.티스토리 블로그를 하고 잇지만 다른곳에서는 html5와 css3에 대한 템플릿이나 기술들이 넘쳐납니다. 저도 매번 html5로 코딩을 하는것을 잠시 뒤로 하고 남들이 만들어놓은것을 찾아보던중 좋은 곳이 있어 소개합니다. http://www.html5webtemplates.co.uk/templates.html 이 사이트의 템플릿을 모두 공짜입니다. 미리보기도 할 수 있으며 미리보기를 클릭하면 브라우져 지원 현황까지 나옵니다.대부분이 IE7이상은 모두 지원하는것으로 나옵니다. 또 한군데는 http://smashinghub.com/best-free-html5-and-css3-templates.htm 입니다. 좋은 템플릿중에서 html5, css3 를 지..

퍼블리셔/도구2013. 1. 11. 05:00

웹폰트 아이콘을 표시하는 Font Awesome 에 대해서 소개합니다.Font Awesome -> http://fortawesome.github.com/Font-Awesome/ Font Awesome 는 부트스트랩을 지원합니다.부트스트랩 스킨을 사용하는 분이면 이걸 추천합니다. 문제는 티스토리에서는 파이어폭스가 제대로 표시하지 못하는 단점이 있습니다. 이유는 도메인때문인것으로 알고 있습니다. 티스토리쪽에 질문을 남겼는데 언제 해답이 올런지는 아직 미지수..... 여하튼 웹폰트를 사용해서 아이콘을 표시한다는 겁니다.이전에도 이와 비슷한 글을 남긴적이 있습니다.@font-face kits를 이용하여 버튼 아이콘 만들기-고급팁 -> http://demun.tistory.com/2055 Font Awesome ..

퍼블리셔/도구2013. 1. 10. 05:00

그리드시스템이란 레이아웃을 격자형태로 짤라서 잡아주는 도구를 말합니다. 검색을 해보시면 아주 많은 그리드가 나옵니다. 그중에서 오늘 소개하는 것은 세만틱 그리드 시스템입니다. -> http://semantic.gs/ 이 semantic 은 제가 제작한 반응형 스킨 Responsive 에 사용된 그리드 시스템입니다. 반응형 스킨 Responsive -> http://demun.tistory.com/2271 홈페이지에 보시면 다운로드 링크와 함께 사용방법이 적혀있습니다. 예제. Fixed Layout , Fluid Layout , Maximum-width , Nested Columns , Responsive Semantic 의 장점 또는 특징. 1. less 를 지원합니다. 그리드 시스템중에서 less , ..

퍼블리셔/도구2013. 1. 9. 04:30

블로그를 하다가도 이쁜 버튼하나 만들려면 html, css 코드 넣어야하고, 경우에 따라서는 이미지도 만들어야 합니다.하지만 간단하게 원하는 디자인을 만들거나 선택한 다음 생성버튼만 클릭하면 코드가 나오는 사이트가 있습니다. 퀄리티 또한 괜찮습니다.버튼 생성기 -> http://livetools.uiparade.com/button-builder.html 보시면 아시겠지만 우측에 셋팅을 이것 저것 만져보세요. 왼쪽에 미리보기를 통해서 쉽게 조작이 가능합니다.아래는 노멀상태와 마우스가 올라갔을때의 호버상태, 그리고 클릭했을때의 상태등을 쉽게 보고 판단할 수 있습니다. 설정이 모두 완료되면 아래의 Generate HTML,CSS 등을 클릭해서 코드를 복사할 수 있습니다. 보시면 아시겠지만 각 브라우져의 벤터 ..