[플러그인]Sublime Text 2 Emmet cheat-sheet

서브라임 텍스트(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 모양을 볼 수가 있는데요. 이것은 커서가 위치한다는 겁니다.

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

demun(대문블로그)