서브라임 텍스트 플러그인 - Zen Coding

Sublime Text 2에서 Zen Coding 설치하는 방법

 

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 에서 사용하는 단축키도 나와 있지 않더군요. 찾는데 무척 애를 먹었습니다.
이렇한 모든 정보를 공유합니다.

설치하는 방법은 이전글인 Package Control 를 설치하는 방법을 보셨다면 금방 이해가 가실겁니다.
왜냐면 설치법이 똑같습니다.

Sublime Text 2에서 Tools - Command Palette 를 클릭, 또는 단축키 Ctrl+Shift+P 를 누르면 명령 팔렛트가 나오고 거기서 Install Package Control, Zen Coding 을 순서대로 입력하면 됩니다.
그럼 설치는 끝입니다.

Sublime Text 2에서 플러그인을 설치하는 방법은 모두 같습니다. 단축키 Ctrl+Shift+P 를 누르면 명령 팔렛트가 나오고 거기서 Install Package Control, 그리고 설치할 플로그인을 순서대로 입력하는 방식입니다.
wbond 에 있는 플러그인은 모두 위와 같은 방식입니다.
설치하는 장면만 동영상으로 캡쳐했습니다.

 

 

Sublime Text 2에서 Zen Coding을 사용하는 방법

 

Sublime Text 2에서 Zen Coding을 사용하는 방법 기본적으로 Zen Coding 에 대해서 안다고 가정하고 진행합니다.
만약 모른다면 제 블로그에서 Zen Coding 를 검색해보세요.

Sublime Text 2를 설치하고, Package Control, Zen Coding 을 모두 설치했다고 가정합니다.
만약 그렇기 못하다면 이전글을 참고하세요.
왜냐면 Package Control, Zen Coding을 모두 설치해야만 사용할 수 있습니다.
다른 에디터에서의 Zen Coding 은 코딩을 한후 확장키를 눌러야만 결과물을 볼 수 있습니다.
하지만 Sublime Text 2에서는 결과물을 보면서 코딩을 할 수 있다는 점이 아주 맘에 듭니다.

확장키는 Notepad++ 나 에이트플러스의 경우에는 단축키가 Ctrl+E 였습니다.
하지만 Sublime Text 2에서는 두가지의 경우가 있습니다.
간단하게 사용하는 단축키는 Tab키 입니다.
예를를어 div.test 라고 입력한다음 Tab키를 누르면

이런식으로 나옵니다.

또 하나의 방법은 Ctrl+Alt+Enter 입니다.
그럼 에디터 하단에서 Zen Coding의 마크업을 보면서, 에디터에서는 결과물을 동시에 볼 수 있습니다.
글로써는 이해가 잘 안됩니다.
간단한 동영상을 만들었으니 참고하세요.

 

출처 : http://demun.tistory.com/2220