Emmet으로 빠르게 코딩하기

Emmet을 활용하여 쉽고 빠르게 html을 코딩해봅시다.


들어가며

제가 처음 html을 배울 때 가장 중요하다 교육받았던 것은 태그를 “잘” 여닫는 것이었습니다. 신입은 코드를 열기만 하고 닫지 않아, 여는 태그와 닫는 태그가 달라지는 불상사가 곧잘 발생하기 때문이었죠. 그래서 저는 꽤 오랫동안 자동완성 기능을 막은 채 한땀 한땀 코딩했습니다. 이렇게 연습한 덕분에 태그가 깨지는 경우는 없었지만, 이 덕분에 코딩 속도가 때때로 아주 느려지기도 했습니다. (like 끝없는 li의 복사..)

Emmet을 알게 된 후, 저의 코딩 속도는 꽤 빨라졌습니다. 하지만 세 살 버릇 여든 간다고 하죠? 요즘도 가끔은 한땀 한땀 코딩하는 저를 보며, 잊지 않고 효율적인 코딩을 할 수 있는 제가 되길 바라며 Emmet 문법을 정리해보기로 했습니다.

What Emmet?

위키백과에서는 Emmet을 다음과 같이 설명하고 있습니다.

에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩(Zen Coding)으로 부르다가 에밋(Emmet)으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다.

즉, 과거의 저와 같이 태그를 한땀 한땀 여닫지 않아도 emmet 규칙에 맞게 작성하면 알아서 태그를 열고, 닫고, 계층도 만들어준다~고 보시면 됩니다.

How to use Emmet?

vscode를 설치하면 emmet은 기본적으로 함께 설치되므로 별도의 플러그인 설치는 필요 없습니다.

이제부터 기초적인 Emmet 문법을 함께 보시죠!

Nesting operators

1. 자식 요소 만들기 >

>를 사용하면 자식 요소를 만들 수 있습니다.

이렇게 작성하고 enter or tab을 누르면,

ul>li

이렇게 나옵니다.

<ul>
  <li></li>
</ul>

2. 형제 요소 만들기 +

+를 사용하연 형제 요소를 만들 수 있습니다.

이렇게 작성하고 enter or tab을 누르면,

div+p+span

이렇게 나옵니다.

<div></div>
<p></p>
<span></span>

3. 위로 올리기 ^

>와 함께 ^를 사용하면 자식 요소를 위로 올릴 수 있습니다.

이렇게 작성하고 enter or tab을 누르면,

ul>li^div

이렇게 나옵니다.

<ul>
  <li></li>
</ul>
<div></div>

ul>li>div로 작성했다면 li의 자식으로 div가 됐을 텐데, ^를 사용했기 때문에 li의 부모인 ul의 형제가 되었습니다.

또한, ^는 사용한 개수만큼 레벨이 올라갑니다.

이렇게 작성하고 enter or tab을 누르면,

section>ul>li>span^^^article

이렇게 나옵니다.

<section>
  <ul>
    <li><span></span></li>
  </ul>
</section>
<article></article>

articlespan에서부터 3단계 올라가서 section의 형제가 되었습니다.

4. 반복 (증식) 시키기 *

*를 사용하면 반복을 시킬 수 있습니다.

이렇게 작성하고 enter or tab을 누르면,

ul>li*5

이렇게 나옵니다. (수없이 많은 li 생성에 무척 유용합니다!)

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Attribute operators

1. idclass 추가하기 # / .

#을 사용하면 id를, .를 사용하면 class를 추가할 수 있습니다.

이렇게 작성하고 enter or tab을 누르면,

div#container>p.contents

이렇게 나옵니다.

<div id="container">
  <p class="contents"></p>
</div>

2. 속성 추가하기 [attr]

CSS에서와 같이 [attr] 표기법을 사용하면 속성을 추가할 수 있습니다.

이렇게 작성하고 enter or tab을 누르면,

a[href="#" target="_blank"]

이렇게 나옵니다.

<a href="#" target="_blank"></a>

3. 숫자 넣기 $

$를 사용하면 숫자를 넣을 수 있습니다.

이렇게 작성하고 enter or tab을 누르면,

ul>li.list$*5

이렇게 나옵니다.

<ul>
  <li class="list1"></li>
  <li class="list2"></li>
  <li class="list3"></li>
  <li class="list4"></li>
  <li class="list5"></li>
</ul>

$를 여러개 사용하면 01, 02, 03… 이런 식으로 0이 붙은 숫자가 부여됩니다.

ul>li.list$$$*5

이렇게 나옵니다.

<ul>
  <li class="list001"></li>
  <li class="list002"></li>
  <li class="list003"></li>
  <li class="list004"></li>
  <li class="list005"></li>
</ul>

$뒤에 @-를 붙여주면 숫자가 역순으로 부여됩니다.

ul>li.item$@-*5

이렇게 나옵니다.

<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

4. 텍스트 넣기 {}

{}를 사용하면 콘텐츠로 텍스트를 넣을 수 있습니다.

h1{이것은 제목 요소입니다.}

이렇게 나옵니다.

<h1>이것은 제목 요소입니다.</h1>

마치며

이번에는 아주 간단한 구조를 예시로 Emmet 문법을 소개해드렸습니다. 이를 활용하여 보다 복잡한 마크업도 할 수 있습니다만, 위에 작성한 것처럼 간단한 문법을 활용하는 것만으로도 효율적인 코딩을 할 수 있다고 생각합니다. 더 많은 문법이 궁금하다면 Emmet Docs를 참고해주세요!

부디 저의 글이 하루에 대부분을 키보드와 씨름하는 우리 개발자들의 손목과 시간을 아끼는 데 조금이나마 도움이 되었으면 좋겠습니다.

참고문서


추천 글