SublimeText (서브라임텍스트) – emmet 사용법 정리

sublime text 3

이번에는 사람들이 제일 많이 사용하는 플러그인, emmet에 대하여 다루어보도록 하겠습니다.

선행학습

  1. 서브라임텍스트 및 Package Instal 설치
  2. 서브라임텍스트 IMESupport로 한글 입력 문제 해결
  3. 서브라임텍스트의 기본 기능 및 단축키

 

emmet 플러그인 설치

플러그인 설치

Package Control 에서 emmet을 설치해주면 됩니다.

단축키 목록

  1. 자동완성(젠코딩) : ctrl + E
  2. 태그 삭제 : ctrl + shift + ;
  3. 태그명 변경 : ctrl + shift + '
  4. 주석 1 : ctrl + /
  5. 주석 2 : ctrl + shift + /
  6. 태그 내용 선택 : ctrl + shift + ,
  7. 계산식 결과물 : ctrl + shift + y
  8. reflect css : ctrl + shift + r
  9. 다음 요소 : ctrl + shift + .
  10. 이전 요소 : ctrl + shift + ,
  11. 이미지 크기 조정 : ctrl + U
  12. 태그 wrap : ctrl + shift + G
  13. 태그 쌍 선택 : ctrl + alt + j
  14. 한줄태그로 : ctrl + shift + `
  15. 1단위 숫자 증감 : ctrl + up, down
  16. 0.1단위 숫자 증감 : alt + up, down
  17. 10단위 숫자 증감 : alt + shift + up, down
  18. img를 data로 : Ctrl + '

 

젠코딩 - 태그 자동 완성 ( Ctrl + E )

젠코딩 - 태그 자동 완성 ( CTRL + E )

다음과 같이 css selector 형태로 텍스트를 작성 후 Ctrl + E를 눌러주면 태그가 자동 완성 됩니다.

다음은 emmet에서 제공하는 젠코딩 문법을 정리한 것입니다.

0) html
input) html:5
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

1) 단계별
input) div>ul>li
<div>
    <ul>
        <li></li>
    </ul>
</div>

2) 형제
input) div+p+strong
<div></div>
<p></p>
<strong></strong>

3) 자식 + 형제
input) div+div>p>span+strong
<div></div>
<div>
    <p><span></span><strong></strong></p>
</div>

4) 부모로 이동
input) div+div>p>span+strong+^div^p
<div></div>
<div>
    <p><span></span><strong></strong></p>
    <div></div>
</div>
<p></p>

5) 여러개 생성
input) ul>li*3>a
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

6) 속성 삽입
input) ul>li*2>a[href="#" target="_blank"]
<ul>
    <li><a href="#" target="_blank"></a></li>
    <li><a href="#" target="_blank"></a></li>
</ul>

7) 텍스트 삽입
input) ul>li*3>a[href="#"]{메인메뉴}
<ul>
    <li><a href="#">메인메뉴</a></li>
    <li><a href="#">메인메뉴</a></li>
    <li><a href="#">메인메뉴</a></li>
</ul>

8) 숫자 삽입
input) ul>li*3>a[href="#"]{메인메뉴$}
<ul>
    <li><a href="#">메인메뉴1</a></li>
    <li><a href="#">메인메뉴2</a></li>
    <li><a href="#">메인메뉴3</a></li>
</ul>

9) 응용
input) ul>li*3>a[href="#"]{메인메뉴$}+ul>li*2>a[href="#"]{서브메뉴$}
<ul>
    <li>
        <a href="#">메인메뉴1</a>
        <ul>
            <li><a href="#">서브메뉴1</a></li>
            <li><a href="#">서브메뉴2</a></li>
            <li><a href="#">서브메뉴3</a></li>
            <li><a href="#">서브메뉴4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">메인메뉴2</a>
        <ul>
            <li><a href="#">서브메뉴1</a></li>
            <li><a href="#">서브메뉴2</a></li>
            <li><a href="#">서브메뉴3</a></li>
            <li><a href="#">서브메뉴4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">메인메뉴3</a>
        <ul>
            <li><a href="#">서브메뉴1</a></li>
            <li><a href="#">서브메뉴2</a></li>
            <li><a href="#">서브메뉴3</a></li>
            <li><a href="#">서브메뉴4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">메인메뉴4</a>
        <ul>
            <li><a href="#">서브메뉴1</a></li>
            <li><a href="#">서브메뉴2</a></li>
            <li><a href="#">서브메뉴3</a></li>
            <li><a href="#">서브메뉴4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">메인메뉴5</a>
        <ul>
            <li><a href="#">서브메뉴1</a></li>
            <li><a href="#">서브메뉴2</a></li>
            <li><a href="#">서브메뉴3</a></li>
            <li><a href="#">서브메뉴4</a></li>
        </ul>
    </li>
</ul>

10) 그룹
input)
<header>
    <h3><a href="">logo</a></h3>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</header>

11) id 및 class
input) #header>(.logo>h3>a{logo})+(ul>li*5>a)
<div id="header">
    <div class="logo">
        <h3><a href="">logo</a></h3>
    </div>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

12) numbering
input) .test$*3
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>

input) .test$$$*3
<div class="test001"></div>
<div class="test002"></div>
<div class="test003"></div>

input) .test$@3*3
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>

input) .test$@-1*3
<div class="test3"></div>
<div class="test2"></div>
<div class="test1"></div>

input) .test$@-5*3
<div class="test7"></div>
<div class="test6"></div>
<div class="test5"></div>

 

CSS 젠코딩

css 젠코딩

css에서 다음과 같이 젠코딩을 사용할 수 있습니다.

  1. 키워드 앞글자 + 수치 + tab => 자동완성
    1. m0 => margin:0;
    2. w0 => width:0;
    3. h0 => height:0;
      ...
  2. 자동완성 + 자동완성 식으로 이어서 사용할 수 있습니다.
    1. input) m0+w0+h0+l0+t0+b0+r0
    2. output) margin:0; width:0; height:0; left:0; top:0; bottom:0; right:0;

 

PHP 젠코딩

php 젠코딩

php의 경우 기본 구문 ( if, for, foreach, ... ) 등을 입력후 tab을 눌러주면 자동완성이 됩니다.

그리고 php내의 함수같은 것도 몇 개의 키워드만 입력후 tab을 눌러주면 자동완성 되어 출렵됩니다.

 

현재 선택중인 태그 삭제 ( ctrl + shift + ; )

현재 선택중인 태그 삭제 ( CTRL + SHIFT + ; )

태그에서 Ctrl + Shift + ; 을 눌러주면 현재 활성중인 태그가 삭제됩니다.

 

현재 태그명 변경 ( ctrl + shift + ' )

현재 태그명 변경 ( CTRL + SHIFT + ' )

Ctrl + Shift + ' 을 통하여 태그 명을 rename 할 수 있습니다.

 

주석 ( Ctrl + /, Ctrl + Shift + / )

주석 ( CTRL + /, CTRL + SHIFT + / )

Syntax에 따라 주석이 다르게 사용됩니다.
한 번 누르면 주석이 생기고, 한 번 더 누르면 주석이 사라집니다. 즉, Toggle 기능입니다.

 

현재 태그의 내용 선택 ( ctrl + shift + , )

현재 태그의 내용 선택 ( CTRL + SHIFT + , )

Ctrl + Shift + , 를 누르면 현재 포커스를 기준으로 태그의 내용 ( inner HTML ) 을 선택합니다.

 

계산식 결과 적용

계산식 결과 적용

이건.. 사실 emmet이 가진 기능이 아니라 sublime text 고유의 기능입니다. (옥에티!)
10+110+1+2+12+312+4+3211523
이런식으로 수식을 입력 후 드래그한 다음  Ctrl + Shift + Y 를 눌러주면 수식의 결과로 변환합니다.

 

reflect css ( ctrl + shift + r )

REFLECT CSS ( CTRL + SHIFT + R )

크로스 브라우징 덕분에 CSS를 많이 손봐야할 때 매우 유용합니다.

 

이전요소( ctrl + shift + , )
다음요소( ctrl + shift + . )

이전요소, 다음요소

태그든 css든 그냥 프로그래밍 문법이든 상관없이 사용할 수 있습니다.

 

이미지 크기 고정 ( ctrl + U )

이미지 크기 고정 ( CTRL + U )

현재 img 태그의 img size를 element에 넣어줍니다.

 

태그 wrap ( ctrl + shift + G )

태그 WRAP ( CTRL + SHIFT + G )

텍스트를 선택 후 Ctrl + Shift + G 를 누르면 젠코딩 형태로 tag를 감싸줄 수 있습니다.
Alt + Shift + W 를 눌러도 됩니다.

 

태그 쌍 선택 ( ctrl + alt + j )

태그 쌍 선택 ( CTRL + ALT + J )

현재 태그의 처음과 끝을 toggle로 선택합니다.

 

한줄태그로 ( ctrl + shift + ` )

한줄태그로 ( CTRL + SHIFT + ` )

해당 기능은 드래그해서 사용하는 것이 아니라 그냥 누르면 됩니다.
<div></div> => <div /> 형태로 변환합니다.

 

숫자 증감

숫자 증감

  1. Ctrl + Up, Down : 1단위 증감
  2. Alt + Up, Down : 0.1 단위 증감
  3. Alt + Shift + Up, Down : 10 단위 증감

사용하기에 따라 굉장히 유용한 기능입니다.

 

Resource To Data (Ctrl + ')

RESOURCE TO DATA (CTRL + ')

Resource 경로에 해당하는 이미지를 base64 형태로 변환합니다.

 

참고링크 : https://docs.emmet.io/

 

다음에는 실제 현업에서 어떻게 활용할 수 있는 지,
서브라임 텍스트가 어째서 제일 강력한 텍스트 에디터인지 소개해보도록 하겠습니다.