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

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

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

이런식으로 나옵니다.

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