BLOG main image
분류 전체보기 (313)
교육 (13)
NEIS (6)
Edufine (0)
Programmer (5)
Android Programming (1)
Internet W3 (18)
JAVA Programming (9)
JSP/Servlet (1)
Framework (7)
Spring For Beginner (4)
eGovFrame (10)
MEAN Stack (2)
NodeJS (5)
SublimeText (30)
SublimeText_Tips (18)
Eclipse (16)
JavaScript (8)
jQuery (12)
jQuery_tips (1)
Ajax (3)
DWR(Direct Web Remote) (4)
JSON(JS Object Notation) (4)
Oracle (2)
MySQL (28)
OS (16)
Download (3)
Life (10)
Favorit Site (1)
Books (2)
Healthy (1)
Stocks (1)
HTML5/CSS (1)
Python (4)
Security (7)
CISSP (0)
Ruby On Rails (5)
일기장 (0)
영어 교과서(중2) (3)
알고리즘 (0)
Go Lang (3)
VB 2010 (12)
C# (1)
정보보안기사(네트워크보안) (0)
업무 활용 엑셀 (11)
틈틈이 활용팁 (14)
하루 하루 살아가며 ……. (2)
기술 (1)
파이썬 & 데이터분석 (1)
Visitors up to today!
Today hit, Yesterday hit
daisy rss
tistory 티스토리 가입하기!
2015. 7. 13. 09:25

Emmet 소개

Emmet은 인기있는 텍스트 에디터들의 HTML 및 CSS 작업능률을 향상시키는 플러그인이다. 기본적으로 대부분의 텍스트 편집기는 스니펫(snippets)이라고 불리는 재사용 가능한 코드를 저장할 수 있는데, 이를 직접 정의해야하고 실행시간을 연장할 수 없는 문제가 있다.

Emmet은 CSS를 닮은 표현식을 입력하고 입력한 축약어에 대한 내용을 출력한다. HTML/XML과 CSS에 관련된 작업을하는 웹개발자를 위해 개발되었고 최적화되었지만, 프로그래밍 언어들에서 또한 사용할 수 있다.

홈페이지 : Emmet
플러그인 : Emmet for Sublime Text

지원사항

Emmet의 다운로드 메뉴를 이용하면 사용가능한 텍스트 에디터들과 온라인 서비스들이 표기된다.

  • 완벽지원 : Sublime Text, Atom, Eclipse/Aptana, TextMate, Coda, Espresso, Chocolat, komodo edit, Notepad++, PSPad, textarea, CodeMirror, Brackets, NetBeans, Adobe Dreamweaver
  • 온라인 서비스 : JSFiddle, JS Bin, CodePen, ICEcoder, Divshot, Codio, Codeanywhere
  • 써드파티 지원(모든 기능을 지원하진 않음) : EditPlus, SynWrite, WebStorm, PhpStorm, Vim, HTML-Kit, HippoEDIT, CodeLobster PHP Edition, TinyMCE, EverEdit, Emacs, WeBuilder

Emmet 플러그인 설치

이 플러그인은 자바 스크립트로 작성하고 실행하는 PyV8와 구글의 V8 바이너리를 사용하기 때문에 어떤 운영체제에서 전혀 작동하지 않을 수 있다.

  1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
  2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.
  3. emmet을 입력하여 Emmet가 검색되면 선택한 후, 엔터를 눌러 설치한다.

  4. 서브라임 텍스트를 재실행한다.

    이 플러그인을 설치하면 자동적으로 PyV8 바이너리를 다운로드하는데 만일 자동적으로 다운로드하는데 문제가 생긴다면 수동설치하라.

 

Emmet 축약어

축약어는 Emmet의 핵심이다. CSS 선택자와 닮은 표현식을 확장하는데 아래의 예를 보라.

 

 #page>div.logo+ul#navigation>li*5>a{Item $}

 

아래처럼 변환된다.

<div id="page">

  <div class="logo"></div>

    <ul id="navigation">

      <li><a href="">Item 1</a></li>

      <li><a href="">Item 2</a></li>

      <li><a href="">Item 3</a></li>

      <li><a href="">Item 4</a></li>

      <li><a href="">Item 5</a></li>

    </ul>

</div> 

 
자세한 설명은 Emmet Documentation에서 확인하라.
 

Emmet 액션

증가/감소 액션
  • 1씩 증가 - Ctrl + ↑
  • 1씩 감소 - Ctrl + ↓
  • 0.1씩 증가 - Alt + ↑
  • 0.1씩 감소 - Alt + ↓
  • 10씩 증가 - ⌥⌘↑ / Shift+Alt+↑
  • 10씩 감소 - ⌥⌘↓ / Shift+Alt+↓

Emmet 사용하는 방법.

단축된 코드를 입력한 후 Tab 를 입력하면 확장됩니다.

예를들어

html 에서는 젠코딩처럼 이용하고, CSS에서 margin : 10px; 라는 결과를 얻을려면 순수하게 코딩을 해야하지만, Emmet을 설치하면 m10 이라고 코딩하고 Tab을 클릭하면 똑같은 결과가 나옵니다.

이미지를 보면 이해가 가실겁니다.

왼쪽이 확장키인 Tab 을 누르기전이고 오른쪽이 Tab 키를 누른후 입니다.

서로 어떻게 변하는지 비교해보세요.

 

 

 

 

 

또 스킨을 제작하거나 할때 예제 텍스트가 필요합니다. 그럴때는 Lorem Ipsum 을 사용하는데요. 저는 참고로 http://html-ipsum.com/ 을 사용합니다.
이런 예제 텍스트를 복사해서 붙여넣기 방법으로 사용하는데 Emmet 은 이런것을 에디터에서 바로 사용할 수 있습니다.즉 lorem 하고 탭을 클릭하면 더미텍스트가 삽입됩니다.

원하는 길이만큼도 삽입이 가능합니다.

 

 

Emmet 에 대한 자세한 내용은 http://docs.emmet.io/ 를 참고하세요.

출처 : http://webdir.tistory.com/399 / http://demun.tistory.com/2222
반응형
2015. 7. 13. 09:09

Sublime Text 2에 여러가지 기능이 있지만 Alignment 라고 해서 코드를 들여쓰기하고 정렬하는 기능이 있습니다.

예를들어 어떤식으로 바뀌는지 아래 그림을 보시면 되며 아래그림과 같은 코드도 많이 보셨을 겁니다. 꼭 우측으로 코드를 정리해놓은듯한 결과를 보여줍니다.

실행전과 후를 참고하세요.

 

 

Aligment 소개

복수의 선택지역과 여러 줄을 손쉽게 정렬하도록 도와준다.

홈페이지 : Sublime Alignment
GitHub R : sublime_alignment

Aligment 특징

  • 공백(스페이스) 혹은 탭을 삽입하여 동일한 열에 복수의 선택을 맞춘다.
  • 여러 줄로 선택된 지역을 같은 들여 쓰기 수준으로 모든 줄을 맞춘다.
  • 동일한 열에 여러줄에 걸쳐 선택한 각 행의 첫번째 =를 기준으로 정렬한다.

Aligment 설치

  1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
  2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.
  3. alig를 입력하여 Aligment가 검색되면 선택한 후, 엔터를 눌러 설치한다.

 

 

Aligment 사용법

원하는 지역을 선택하고, Windows와 Linux에서는 Ctrl+Alt+A를, OS X에서는 Cmd+Ctrl+A로 정렬한다.

 

세팅 방법

바로 alignment 를 선택해서 설치하면 설치는 끝입니다. 위처럼 사용하려면 기본기능에 한가지를 더 추가합니다.
설치가 끝나면 Sublime Text 2 메뉴에서 Preferences - Package Setings - Alignment - Settings - Default 를 선택해서 엽니다.

마우스가 선택된 부분 "alignment_chars" 부분을 아래그림처럼 해줍니다.

 

 

그럼 준비는 끝났습니다.

Aligment 의 단축키는 Ctrl+Shift+a 입니다.

원하는 부분을 블럭을 잡고 Ctrl+Shift+a 를 누르면 끝입니다.

코드가 변경이 되었습니다. Ctrl+Alt+a 를 누르세요

 

 

 

변경된 부분이 보이시나요?
가운데 분리자는 어떤걸 사용해도 되니 원하대로 수정이 가능합니다.


플러그인인 Alignment 는 http://wbond.net/sublime_packages/alignment , https://github.com/wbond/sublime_alignment 에서 보실수 있습니다.

 

출처 : http://demun.tistory.com/2229 / http://webdir.tistory.com/404

반응형
2015. 7. 10. 07:55

인코딩의 변환을 도와주는 플러그인입니다만, 어떤 인코딩이든 UTF-8로 변환을 시도하는 것이지 반대의 경우는 지원되지 않습니다.

 

 

서브라임 텍스트3 버전 이상 사용자들을 위한 주의사항

  • 수동으로 설치하지 말고, Package Control2 버전 이상을 사용하여 업데이트 및 설치를 진행하라.
  • 서브라임 텍스트3 build 3057 이후로, 인코딩 메뉴는 상태바로 이동되었다. 인코딩과 행끝맺음에 보여주는 설정은 www.sublimetext.com/3dev를 참고하라.

EncodingHelper 소개

EncodingHelper는 UTF-8로 문서를 변환하는데 도움을 주는것이 목표이며, 아래와 같은 특징이 있다.

  • 파일의 인코딩을 추측하려고 시도한다.
  • 부정확한 인코딩 혹은 인코딩이 불일치하는 파일을 열었을때, 현재 문서가 깨지면 표시한다.
  • 메뉴에서 인코딩의 종류를 선택하여 UTF-8로 변환한다.
  • 메뉴항목을 통해 추측된 인코딩을 재빨리 UTF-8로 변환한다.
  • User 환경설정을 통해 정의된 인코딩을 찾아 자동적으로 UTF-8로 변환한다.

홈페이지 : Encoding​Helper
포럼 : Forum Thread

파일의 인코딩을 추측하려고 애쓰고 있지만 100% 정확한 인코딩이 아니라는 것에 대해 인지하고 있어야 한다. 또한 CPU를 소비하기에 최적화를 많이 포함하고 있다는 도구이다.

EncodingHelper 설치

  1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P로 Command Palette를 불러온다.
  2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.
  3. encoding을 입력하여 EncodingHelper 를 검색되면 선택한 후, 엔터를 눌러 설치한다.

 

 

출처 : http://webdir.tistory.com/397

 

반응형
2015. 7. 10. 07:50

서브라임 텍스트에서 사랑받는 몇몇 기능들을 간단히 소개한다.

어디로든 이동 (Goto Anything)

서브라임 텍스트(Sublime Text) 최고의 기능인 모두 이동하기(Goto Anything)는 이클립스의 Open Resource와 비슷합니다. 현재 서브라임 텍스트에 포함된 모든 파일을 검색하는 기능이죠.

Ctrl+P를 클릭해서 원하는 파일명을 입력하세요.

 

 

Go To 창은 사이드 바에 있는 모든 파일을 색인 작업 후에 열리는데, 파일명이나 머리글자, 확장자, 접두사 등으로 찾을 수 있습니다. 이 기능은 정말 많이 사용할 수 밖에 없네요.

파일명을 정확히 모르는 상태에서 파일명의 일부만 알고 있어도 다 찾아주니 편리합니다.

Esc 버튼을 누르거나 마우스로 다른 곳을 클릭해서 취소할 수 있습니다.


  • 몇글자의 축약된 키입력만으로도 파일을 찾아 오픈하고 파일의 내용을 들여다볼 수 있다.
  • @심볼명 과 같이 입력함으로써, 함수등의 특정 심볼 정의로 이동한다.
  • #단어 와 같이 입력함으로써, 특정 단어로 이동한다.
  • :줄번호 를 입력함으로써, 해당 라인으로 이동한다.
  • 무엇보다 파일을 찾아주는 기능이 매우 편리하다. 프로젝트를 등록해두면 해당 프로젝트에 포함된 폴더와 파일들에서 파일을 찾아주기에 강추하는 기능이다.
    명령어 모음판 (Command Palette)

    단축키 Ctrl+Shift+P 를 사용해 여러 동작들을 실행할 수 있다. 메뉴들을 찾아가 실행하거나 단축키를 외우는 것 대신에 몇몇 글자를 입력해서 원하는 명령어를 찾는 방식이다.

     

    분할 편집 (Split Editing)

    원하는 만큼의 행과 열을 나눌수 있고, 하나의 파일에서 두개의 위치를 편집할 수도 있다. 다중 모니터를 사용한다면 서브라임 텍스트를 여러개 실행시켜서 각각을 편집할 수도 있다.

    View/Layout 메뉴에서 분할 옵션들을 살펴보라. 하나의 파일에 여러 뷰를 열려면 파일메뉴 항목의File/New View를 사용한다.

     

     

     

    어떤것이든 사용자정의 (Customize Anything)

    단축키, 메뉴들, 스니펫, 매크로등 서브라임 텍스트는 간한한 JSON 파일로 사용자정의 할 수 있다. 프로젝트 단위와 파일 단위 설정을 지정할 수 있는 이 시스템은 유연성을 자랑한다.

    복수 선택 (Multiple Selections)
    • 단어의 복수 선택은 아래와 같다.
      • 원하는 단어를 마우스로 드래그한 후, Ctrl + D 를 이용해 같은 단어를 복수 선택후 수정할 수 있다.
      • Ctrl + U 를 이용해 선택 취소
      • Ctrl + D 를 이용해서 선택하고 Ctrl + K 를 이용해 취소하고 Ctrl + D를 이용해 다음 단어 선택할 수 있다.
      • Ctrl + D 를 이용해 단어를 선택하고 Alt + F3 로 단어를 현재 문서에서 전체 선택할 수 있다.
      • 원하는 지역을 마우스로 드래그한 후, Ctrl+Shift+L 를 이용해 여러개의 행을 동시에 수정할 수 있다.
    • 행의 복수 선택은 아래와 같다.
      • Ctrl + L 를 이용하여 커서가 위치하는 있는 행을 선택, 반복사용
      • Ctrl + L 로 원하는 행 선택후, Ctrl+Shif+L 로 각각의 행들 뒤에 커서를 삽입
    • 마우스로 복수 선택은 아래와 같다.
      • Shift + 마우스 우클릭 으로 세로행으로 선택
    • 기타
      • Shift+Ctrl+M 으로 브라켓 내의 범위 선택

     

     

    집중모드 (Distraction Free Mode)

    단축키 Shift + F11 를 사용함으로써, 집중모드에 들어가게 된다. 모든 UI나 메뉴들이 제거되고 코딩에 더욱 집중할 수 있는 환경을 조성해준다. 전체모드보다 좀더 심플해진다고 생각하면 된다.

    Instant Project Switch

    서브라임 텍스트의 프로젝트는 수정 및 저장되지 않은 파일을 포함하여 작업 공간의 전체 내용을 캡처한다. 그래서 저장하지 않고 종료를 하더라도 다음번에 서브라임 텍스트가 다시 실행되어지면 그 전 내용을 복원해 놓는다.

    Plugin API

    강력한 파이썬 기반의 플러그인 API를 사용한다. API와 함께, 실시간 대화형 파이썬 콘솔이 내장되어 있다.

    Cross Platform

    서브라임 텍스트는 OS X, Windows 및 Linux에서 이용 가능하다. 하나의 라이센스로 OS에 상관없이 사용한다.

    서브라임 텍스트(Sublime Text) 설치

    위에서 언급한 다운로드 링크를 따라가면, 자신의 OS에 맞는 설치 버전 및 포터블 버전을 다운로드 할 수 있고, 이를 실행하면 된다. 설치시 별다른 설정은 필요없다.

    사용시(특히 저장시)에 가끔씩 구매를 권하는 팝업이 등장하며, 사용에 다른 제약은 없다.

    아래 링크는 참조할 만한 공식 문서의 링크이다.

    출처 : http://webdir.tistory.com/397

    반응형
    2015. 7. 10. 07:29

    서브라임 텍스트의 플러그인 설치는 매우 손쉽게 접근할 수 있도록 구성되어져 있습니다. 웹을 돌아디니며 안전한 파일을 일일이 다운받을 필요도 없고, 편의성을 고려한 티가 납니다.

     

    https://packagecontrol.io/

     

    Package Control 설치

    서브라임 텍스트는 플러그인들을 관리해주는 도구로 Package Control를 제공하고 있는데, 이를 이용해 손쉽게 플러그인들을 설치 및 제거, 업데이트를 할 수 있다. 서브라임 버전별로 다른 방법이 사용되니 유의하자.

    1. 서브라임 텍스트3의 경우 Sublime Text3 Package Control의 코드를 복사한다.

    import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

     

                    서브라임 텍스트2의 경우 Sublime Text2 Package Control의 코드를 복사한다.

     

     import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

     

               2.   서브라임 텍스트를 실행하고, Ctrl + `로 콘솔을 불러온다.

               3.   복사한 내용을 붙여넣고 엔터를 누른다.

    플러그인 설치

    설치를 원하는 플러그인들을 찾아봐야 하는데 https://packagecontrol.io/browse에서 둘러본 후, 설치해도 되고 Sublime Text 플러그인으로 검색해서 원하는 플러그인을 찾아봐도 된다.

    기본적인 설치 방법은 아래와 같다.

    1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P로 Command Palette를 불러온다.
    2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.
    3. 설치를 원하는 플러그인의 이름으로 검색하여 선택한 후, 엔터를 눌러 설치한다.

    플러그인 설치 리스트

    1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P로 Command Palette를 불러온다.
    2. list 입력하고 자동완성되는 Package Control: List Package를 선택하고 엔터를 누른다.
    3. 설치된 플러그인들이 나열된다.

    플러그인 삭제법

    1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P로 Command Palette를 불러온다.
    2. remove를 입력하고 자동완성되는 Package Control: Remove Package를 선택하고 엔터를 누른다..
    3. 설치된 플러그인들이 리스팅되면 삭제할 것을 선택하고 엔터를 누른다.

    출처 : http://webdir.tistory.com/396

     

    ----------------------------------------------------------

    플러그인 (참고)

    ----------------------------------------------------------


    ConvertToUTF8

    한글이 깨지네 요것도 설치


    IMESupport

    한글입력할때 텍스트창에서 입력값을 보여준다

    입력이 편해지네요


    Emmet

    코딩에 도움이 됨 zen-coding

    https://code.google.com/p/zen-coding/

    zen-coding - Set of plugins for HTML and CSS hi-speed coding - Googl...
    code.google.com
    본문으로 이동

    HTML-CSS-JS Prettify
    코드 정릴를 도와준다
    사용하기 위해서는 http://nodejs.org에서 nodejs를 설치해야 한다


    BracketHighlighter
    코드 열고 닫고 도움을 준다.


    JsLint
    js 검사


    JSONLint
    json 검사

    Color Picker
    색상등록이 쉬워진다


    MarkdownEditing
    마크다운 편집에 도움을 준다


    MarkdownPreview
    마크다운 미리보기


    Terminal
    터미널을 open한다 (ctrl + shift + t)


    SideBarEnhancements
    사이드바 context menu

    Git
    git


    GitGutter
    라인을 추가, 수정 또는 삭제 된 있는지를 나타내는 왼쪽 여백에 작은 아이콘을 추가합니다

    AllAutocomplete
    라임의 기본 자동 완성은 현재 파일에있는 단어를 고려한다. 이 플러그인은 열려있는 모든 파일에서 일치하는 항목을 찾을 수있는 자동 완성 단어 목록을 확장

    SublimeREPL
    파이썬 인터프리터 세션을 실행할 수 있다

    Pylinter
    파이썬 자동 편집기
    반응형