들어가며
제가 처음 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>article이 span에서부터 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. id와 class 추가하기 # / .
#을 사용하면 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를 참고해주세요!
부디 저의 글이 하루에 대부분을 키보드와 씨름하는 우리 개발자들의 손목과 시간을 아끼는 데 조금이나마 도움이 되었으면 좋겠습니다.