demun(대문블로그)

퍼블리셔/SublimeText2012. 11. 17. 09:00

Sublime Text 2에서 자바스크립트를 압축하는 플러그인은 jsMinifier 이 있습니다. https://github.com/cgutierrez/JsMinifier 헌데 저는 자바스크립트를 압축하는 과정에서 오류를 경험한적이 몇번있어서 압축은 무조건 YUI Compressor 를 이용합니다. http://www.refresh-sf.com/yui/ 그래서 Sublime Text 2에서 YUI 를 이용하는 방법은 없을까 찾아봤더니 역시 있더군요. Sublime Text 2는 왠만한것은 다 있습니다. Sublime Text 2에서 YUI Compressor 설치하는 방법. Ctrl + Shift + P 를 눌러 Package Control 을 설치합니다. yui 를 입력하면 아래처럼 YUI Compre..

퍼블리셔/SublimeText2012. 11. 16. 09:00

less 는 동적 스타일시트 언어라고 합니다. CSS를 좀더 간단하게 작성하고, 확장성있게 작성할 수 있는 도구입니다. less : http://lesscss.org/ 이와 비슷한것은 Sass 라고 있습니다. 좀더 자세한것은 less와 sass 를 검색해보시면 됩니다. 윈도우상에서 less 에디터는 Crunch 가 유일합니다. 다른것은 전부 변환하는 기능만을 가지고 있는데 반해 Crunch는 에디터의 기능을 좀 합니다. Crunch 에 대해서 제가 간략하게 설명을 한 글을 참고하시면 도움이 됩니다. [Design/코딩] - 윈도우용 less 에디터 Crunch Sublime Text 2에서는 less 파일도 구문강조 할 수 있는 플러그인이 있습니다. 플러그인을 설치하는 방법인 Ctrl + Shift + ..

퍼블리셔/SublimeText2012. 11. 15. 18:59

Sublime Text 2에서 Package Control 을 설치하는 방법이 정확하지 않아 수정후에 재발행하는 글입니다. Sublime Text 2는 상당이 많은 기능을 지원합니다. 사용자가 어떤걸 어떻게 사용하느냐에 따라 좋은 에디터가 될수도 안될수도 있습니다. Sublime Text 2를 설치한 후 가장 먼저해야할 것은 Package Control 입니다. 이걸 설치해야만 다른 모든 플러그인을 설치할 수 있습니다. 여기서 플러그인은 파이어폭스의 확장기능처럼 Sublime Text 2의 기능을 모두 사용할 수 있도록 해주는 기능들의 모음이라고 생각하시면 됩니다. 즉, Sublime Text 2 를 설치하면 무조건 Package Control 을 설치해야 한다라고만 알아두시면 됩니다. 윈도우에서 설치하..

퍼블리셔/SublimeText2012. 11. 15. 09:00

수정합니다. 기존의 발행된글이 미흡해서 수정해서 재발행 합니다. 기본적으로 Sublime Text 2를 설치하고, Package Control 을 모두 설치했다고 가정합니다. 만약 그렇기 못하다면 이전글을 참고하세요. 여기서는 Emmet 를 설치하는 방법과 간단하게 사용하는 방법을 알아보겠습니다. Emmet 은 개인적으로 가장 먼저 설치해야 하는 플러그인이 아닌가 생각이 들 정도로 무척 용이한 플러그인입니다. html에서는 Zen Coding 처럼 사용하고 css 에서도 편리하게 코딩할 수 있는 플러그인 입니다. Emmet 설치하는 방법. 플러그인을 설치하는 방법은 모두 동일합니다. 단축키인 Ctrl+Shift+P 를 클릭해서 명령 팔렛트를 불러와서 Package Control 을 인스톨합니다. 바로 다..

퍼블리셔/도구2012. 11. 15. 09:00

less 를 사용하는 툴은 몇가지가 있지만 윈도우에서 에디터로 less 를 다루는 도구는 현재 Crunch가 유일합니다. 제가 알기로는.... Crunch : http://crunchapp.net/ less 가 무엇인지는 이전에 제가 작성한 글 CSS 생산성을 높여주는 less, sass 를 참조하시면 도움이 됩니다. 물론 홈페이지를 참조해도 많은 도움이 됩니다. less : http://lesscss.org/ sass : http://sass-lang.com/ 여기서 소개할 것은 윈도우에서 less 에디터로 소개할 Crunch 입니다. Crunch에서 다운로드 받아서 일반 프로그램과 같이 똑같이 설치합니다. 그러면 less 파일이 아래처럼 아이콘이 변경되어 연결된 프로그램이 뭔지 쉽게 알 수 있습니다...

퍼블리셔/SublimeText2012. 11. 14. 09:00

Sublime Text 2에 여러가지 기능이 있지만 Alignment 라고 해서 코드를 들여쓰기하고 정렬하는 기능이 있습니다. 예를들어 어떤식으로 바뀌는지 아래 그림을 보시면 되며 아래그림과 같은 코드도 많이 보셨을 겁니다. 꼭 우측으로 코드를 정리해놓은듯한 결과를 보여줍니다. 실행전과 후를 참고하세요. 설치법과 사용법을 알아보겠습니다. 먼저 Ctrl+Shift+P 를 눌러 명령팔렛트를 불러와서 Control Package 를 설치합니다. 바로 alignment 를 선택해서 설치하면 설치는 끝입니다. 위처럼 사용하려면 기본기능에 한가지를 더 추가합니다. 설치가 끝나면 Sublime Text 2 메뉴에서 Preferences - Package Setings - Alignment - Settings - De..

퍼블리셔/SublimeText2012. 11. 13. 09:00

온라인에 업로드된 코드를 미리 가지고 오지 않고도 최신 업데이트된 파일을 손쉽게 가져오는 기능이 Sublime Text 2에 있습니다. css, js 등등의 파일과 패키지로 통채로 가지고 올수도 있습니다. 예를들어 워드프레스 파일을 다운로드 받아서 압축을 풀고, 해당파일을 에디터로 열어야 하는 과정을 Sublime Text 2에서는 간단하게 가져오는 방법입니다. 시작할까요? 어느때와 마찬가지로 무조건 단축키인 Ctrl+Shift+P 를 눌러 Package Control 를 설치합니다. 그다음 바로 nettuts 를 입력하면 아래처럼 Nettuts+ Fetch 가 나옵니다. 엔터. 다음 fetch 를 입력해서 Fetch: Manage remote files 를 선택합니다. 이 파일은 Packages\Use..

퍼블리셔/SublimeText2012. 11. 12. 09:00

오늘은 Gist에 발행한 코드를 불러오는 방법, 그리고 업데이트 하는 방법, 그리고 발행한 코드를 바로 브라우져로 여는 방법 등을 알아봅니다. 이전에 발행하는 Sublime Text 2로 발행하는 방법을 알아봤으니 이제 불러오고 업데이트 해보겠습니다. https://sublime.wbond.net/packages/Gist 코드 불러오기. Ctrl+Shift+P 를 눌러 gist를 입력하면 아래처럼 Gist: Open Gist 가 나옵니다. 엔터. 그럼 바로 발행했던 코드 이름들이 나옵니다. 이전글에서 보았던 티스토리 스킨 xml 파일이 있군요. 클릭 또는 엔터하면 gist 에 발행했던 코드를 그대로 불러옵니다. 불러온 화면입니다. 이것 저것 수정을 했다고 가정한다면 다시 업데이트를 해야 합니다. 스크롤을..

퍼블리셔/SublimeText2012. 11. 10. 09:00

코드 프로젝트로 https://github.com/ 를 많이 이용합니다. 아무래도 세계 1위가 아닌가 싶네요. 저도 간혹 코드를 사용하기 위해 이 사이트를 이용하곤 했었는데요. http://demun.tistory.com/2227 이 사이트를 Sublime Text 2 로 이용하는 방법을 알아봅니다. Sublime Text 2 에디터는 정말 많은 기능이 있는것 같습니다. 하나 하나 알아갈때마다 놀라곤 합니다. 먼저 github 를 이용하려면 이 사이트에 가입이 되어 있어야 합니다. 회원가입하세요. 회원가입이 되어 있다고, 즉 계정이 있다고 가정하고 진행합니다. 자 이제 Sublime Text 2에서 사용하는 방법입니다. 먼저 Ctrl+Shift+P 를 눌러 Package Control 을 설치합니다. 바..

퍼블리셔/SublimeText2012. 11. 9. 09:00

Sublime Text 2 에디터는 사이드바라는 개념이 있습니다. 물론 다른 에디터에도 있긴 있지만 여기서는 기본적으로 제공하는 에디터의 사이드바 기능보다 좀더 확장해서 사용하는 방법을 알아보겠습니다. [플러그인] SideBarEnhancements(사이드바향상) Open With 환경설정하는법 > http://demun.tistory.com/2394[플러그인]Sublime text(서브라임텍스트) Sidebar Enhancements(사이드바의 향상된 기능) 두번째 -> http://demun.tistory.com/2386[플러그인]Sublime Text(서브라임텍스트) Sidebar Enhancements(사이드바의 향상된 기능) -> http://demun.tistory.com/2385 에디터로 작..