Last Updated:

Emmet, 코딩시간을 단축하는 서브라임 텍스트 플러그인

카테고리: 서브라임텍스트, 웹 에디터
emmet 플러그인

Emmet의 창시자는 Sergey Chikuyonok 입니다. 그는 2009년에 “Project Zen”이라는 프로젝트로 개발을 시작했습니다. 이후 전세계 사용자들에게 환영을 받으며 프로젝트의 규모는 점점 커졌습니다.  2012년이 프로젝트는 Emmet으로 명칭이 변경되었습니다. 영어사전에서 Emmet을 찾아보면 그 의미가 개미나 남자 이름, 지명으로 나오네요.  어떤 의미인지 와닿진 않지만,  2017년도 현재에도 프로젝트가 발전하고 있다고 합니다.

왜 Emmet 플러그인을 사용해야 하나요?

웹 퍼블리싱 작업을 위해 필수적으로 설치해야 하는 플러그인은 아닙니다. 하지만 HTML과 CSS를 작성하는 워크플로우를 향상시키게 되죠. Emmet에서 제공하는 규칙(syntax)에 맞춰 코드를 작성하고 탭tab 키를 누르면 HTML 코드로 실시간 변환됩니다. ‘뭐야. HTML과 CSS 코드를 작성하는 규칙을 익히는 데도 시간을 많이 들였는데 또 새롭게 알아야 하나?’라고 생각되겠지요. 그러나 작업 속도가 곧 실력이기에 배워보는 것이 이득입니다.

Emmet 단축 구문 맛보기

Emmet의 핵심은 단축 구문Abbreviations입니다. 단축 구문은 아래의 Emmet 사이트 예제처럼 CSS 구문처럼 보이죠.

#page>div.logo+ul#navigation>li*5>a{Item $}

이렇게 작성하고 탭Tab 키를 탁! 치면 실시간으로 아래의 HTML 코드로 전환됩니다.

<div id=”page”>
….<div class=”logo”></div>
….<ul id=”navigation”>
……..<li><a href=””>Item 1</a></li>
……..<li><a href=””>Item 2</a></li>
……..<li><a href=””>Item 3</a></li>
……..<li><a href=””>Item 4</a></li>
……..<li><a href=””>Item 5</a></li>
….</ul>
</div>

단축 구문과 그 결과가 머릿속에서 자연스럽게 연결이 되나요? 연결이 어렵지는 않습니다. 왜냐하면 CSS 구문과 비슷하거든요. Emmet에서 활용할 수 있는 문법을 몇 가지 더 살펴보겠습니다.

Emmet 문법

Emmet에서는 div나 p 같은 HTML 요소를 그대로 사용합니다.

중첩 연산자Nesting operators

중첩 연산자는 요소의 위치를 정해주는데 사용됩니다. 즉, 요소 안에 넣을지 다음에 넣을지 말이지요.

1. >
각 요소 옆에 > 연산자를 붙이면 중첩되어 자식child 요소로 지정됩니다.

div>ul>li

다음과 같은 결과가 나옵니다.

<div>
….<ul>
……..<li></li>
….</ul>
</div>

2. +
형제sibling 요소로 지정하려면 + 연산자를 사용하세요.

div+p+bq

다음과 같은 결과가 나옵니다.

<div></div>
<p></p>
<blockquote></blockquote>

3. ^
^를 사용하면 해당 요소가 계층 구조상 한 단계 올라가 그 구조의 흐름이 바뀌게 됩니다. 또한 ^의 개수를 늘이면 그만큼 계층 단계가 올라가지요.

div+div>p>span+em^bq

다음과 같은 결과가 나옵니다.

<div></div>
<div>
….<p><span></span><em></em></p>
</div>
<blockquote></blockquote>

4. *
*와 숫자를 사용하면 해당 요소가 숫자만큼 출력됩니다.

ul>li*5

다음과 같은 결과가 나옵니다.

<ul>
<div>
….<li></li>
….<li></li>
….<li></li>
….<li></li>
….<li></li>
</ul>

5. ( )
( )는 Emmet의 파워 유저들이 복잡한 단축 구문에서 하위 계층subtree을 하나로 묶는 데 사용합니다.

div>(header>ul>li*2>a)+footer>p

다음과 같은 결과가 나옵니다.

<div>
….<header>
……..<ul>
…………<li><a href=””></a></li>
…………<li><a href=””></a></li>
……..</ul>
….</header>
….<footer>
……..<p></p>
….</footer>
</div>

그 외의 내용을 자세히 알고 싶으신 분은 Emmet 웹사이트를 방문해 보세요. 참고로 위의 예제는 해당 웹 사이트에서 발췌했습니다.

서브라임 텍스트에 Emmet 플러그인 설치하기

※ 설치 방법

  1. 상단 메뉴에서 Preferences > Package Control 을 클릭해 명령어 팔레트를 엽니다. 혹은 Ctrl+Shift+P를 누릅니다.
  2. 명령어 팔레트에서 Install Package를 입력하고 Enter를 누릅니다. 혹은 pci를 입력하고 입력 결과 중에서 Package Control: Install Package를 선택하고 Enter 키를 누릅니다.
  3. 입력창에 Emmet을 입력하고 해당하는 결과 값을 선택해서 Enter 키를 누릅니다. 혹은 ctu를 입력하고 입력 결과 중에서 Emmet를 선택하고 Enter 키를 누릅니다.

설치하고 나서 서브라임 텍스트를 종료하고 다시 열어주세요. 그렇게 하면 설치가 완료됩니다.

이해가 어려운 분을 위해 유튜브 동영상을 보여드립니다. 아래 튜토리얼 동영상을 따라 설치해 보세요!

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다