demun(대문블로그)

퍼블리셔/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 에디터로 작..

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

Sublime Text 2를 설치하고, Package Control, Zen Coding, Emmet 등을 모두 설치하고, 사용하는 방법을 알아봤습니다. 오늘은 Prefixr 을 설치하고 사용하는 방법을 알아보겠습니다. Prefixr 는 Cross Browser에 맞게 코드를 작성하는 것을 말합니다. 이전에도 소개한 적이 있는데요. css 코드를넣으면 각 브라우져의 벤더프리픽스를 포함해서 코드를 만들어주는 사이트 입니다. http://prefixr.com/ Prefixr 설치하는 방법. Prefixr 을 설치하는 방법은 Zen Coding을 설치하는 방법과 동일합니다. Ctrl+Shift+P 를 클릭해서 명령 팔렛트를 불러와서 Package Control 을 인스톨하고, Prefixr 을 인스톨합니다. ..

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

up date.서브라임에서 젠코딩을 사용하는 방법은 아래의 방법도 있지만 emmet 플러그인을 설치하면 html에서 젠코딩을 사용할 수 있을뿐아니라 css 등에서도 사용할 수 있습니다. 그러니 아래의 방법보다는 emmet 플러그인을 설치하고 사용하길 권장합니다.Emmet 사용하는 방법 -> http://demun.tistory.com/2222 Sublime Text 2에서 Zen Coding을 사용하는 방법 기본적으로 Zen Coding 에 대해서 안다고 가정하고 진행합니다. 만약 모른다면 제 블로그에서 Zen Coding 를 검색해보세요. Sublime Text 2를 설치하고, Package Control, Zen Coding 을 모두 설치했다고 가정합니다. 만약 그렇기 못하다면 이전글을 참고하세요. ..

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

Sublime Text 2를 설치하고 프러그인을 설치하기 위해 Package Control 을 설치했다면 이제 다른 플로그인을 설치해서 Sublime Text 2의 진가를 맛봐야합니다. Sublime Text 2의 플러그인은 몇가지 됩니다. 구지 따로 다운로드를 받지 않아도 Sublime Text 2에서 명령을 통해 사용할 수 있습니다. Sublime Text 2에서 기본적으로 사용할 수 있는 플러그인은 Sublime Packages를 참고하시기 바랍니다. Zen Coding 의 플러그인 파일은 ZenCoding 에 있습니다. Zen Coding 설치하는 법. 어디에도 Zen Coding 을 설치하는 법이 나와 있지 않았습니다. 그리고 Zen Coding 에서 사용하는 단축키도 나와 있지 않더군요. 찾는..

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

서브라임 에디터 때문에 몇일 고생했습니다. 개발자들이 좋다느니 평이 좋와서 사용해보고 있습니다.모든글이 영어로 되어 있다보니 설정하는데 있어서 문제점이 많이 있었습니다. 영어실력이 형편없어서..... 기본 설정만으로도 다른 에디터보다 좋다고 판단이 되는군요.가벼우면서도 너무 많은 기능이 있다보니 잘만 다듬으면 최고의 에디터가 되지 않을까 생각됩니다. 서브라임은 맥, 윈도우, 리눅스 등 다양한 운영체제에서도 사용이 가능합니다. 더군다나 맥에서나 보여지는 스타일을 윈도우에서도 사용할 수 있다는 점이 큰 강점이 아닌가 싶네요. 홈페이지에 보면 어떤식으로 사용하는지와 어떤식으로 확장해서 사용하는지 대략 나옵니다. 홈페이지 : http://www.sublimetext.com/ 사용방법에 대해서 알려드립니다.일단 ..

퍼블리셔/css2012. 11. 1. 09:00

css 를 사용하는데 좀더 편하고, 확장할 수 있는 방법이 less 나 sass 를 사용하는겁니다. 관련한 한글로 된 문서는 많이 없는데요. 제가 하나 하나 하면서 추가해볼까 합니다. 그럼 less, sass 이게 뭐냐? css 의 전처리 도구라고 생각하면 됩니다. 아니 좀더 편하게 , 좀더 체계적으로 사용할 수 있게 하는 도구라고 생각하면 될듯 싶습니다. less -> http://lesscss.org/ sass ->http://sass-lang.com/ 몇가지 예를들면 이해가 가실겁니다. 왼쪽이 less 고 우측이 컴파일된 css 코드 입니다. 대략 설명하자면 @gray 에 #333 을 설정하고 p는 @gray 그대로 사용합니다. 그 바로 아래 a 는 p 안에 a 를 말합니다. color 은 @gra..