서브라임 텍스트(Sublime Text 2) 에서 플러그인인 Emmet 에 대해서 포스팅한적 있습니다.

Emmet 에 대해서 모르신다면 이전글을 참고하세요.

Sublime Text 2에서 Emmet 사용하는 방법 -> http://demun.tistory.com/2222


좀더 편하게 사용하려면 어떤 기능 즉 단축키가 있는지 알면 아는만큼 편하게 사용할 수 있습니다.

예를들어 html:5 라고 입력하고 확장키인 Tab 을 누르면 아래처럼 기본 html5의 doctype 의 코드가 편하게 들어갑니다.



html:4t , html:4s , html:xt , html:xs , html:xxs 등을 입력하고 눌러보세요. 뭐가 나오는지?

대략 이것만 보고 아는 분이 있다면 코딩에 어느정도의 실력이 있는분입니다. ㅎㅎㅎ.


자주 사용하는것은 아무래도 html:5 와 html:xt 가 아닐가 싶네요.


Emmet 플러그인은 html 에만 해당되지 않습니다.

아시다시피 CSS 에도 해당이 되는데요. border 은 bd 만 눈여겨보시고, backgrpund 는 bg 만 눈여겨 보시면 되겠네요.

참고로 아래 이미지에서 bgc 를 보시면 녹색으로 된 부분이 있습니다. 이것은 기본으로 입력이 되어지고 마우스 커서가 위치해서 바로 수정이 가능한 상태를 말합니다.


bg+ 의 경우는 녹색이 여러개인데 이런경우는 맨 앞에 녹색에 커서가 위치하게 됩니다.


또 파랑색에 I 모양을 볼 수가 있는데요. 이것은 커서가 위치한다는 겁니다.




알면 알수록 상당이 편하게 코딩을 할 수 있습니다.

치트 사이트는 http://docs.emmet.io/cheat-sheet/ 입니다.


참고링크

[Design/코딩] - Sublime Text 2에서 폴더 파일 빠르게 만드는 방법(AdvancedNewFile)

[Design/코딩] - Sublime Text 2에서 Fetch 설정파일

[Design/코딩] - Subline Text 2에서 YUI 를 이용하여 js, css 압축하는 방법

[Design/코딩] - Sublime Text 2에서 less 파일 구문강조하기

[Design/코딩] - Sublime Text 2 에서 코드정렬하기(Alignment)

[Design/코딩] - Sublime Text 2 온라인에서 코드 가져오기(Fetch)

[Design/코딩] - Sublime Text 2에서 Gist(github) 코드 불러오기,업데이트하는 방법

[Design/코딩] - Sublime Text 2로 Gist(github)에 코드 발행하는 방법

[Design/코딩] - Sublime Text 2 사이드바 확장(Enhancements)

[Design/코딩] - Sublime Text 2에서 Prefixr 사용하는 방법

[Design/코딩] - Sublime Text 2에서 Emmet 사용하는 방법

[Design/코딩] - Sublime Text 2에서 Zen Coding을 사용하는 방법

[Design/코딩] - Sublime Text 2에서 Zen Coding 설치하는 방법

[Design/코딩] - Sublime Text 2에서 Package Control 설치하는 방법