1. Emmet이란?
Emmet은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 빠른 코드 입력을 위한 단축어, 자동완성과 같은 개념이다. 여러 텍스트 에디터에 플러그인 방식으로 삽입되어 추가적인 절차 없이도 독립적으로 작동한다.
Emmet을 사용하면 HTML, CSS 등을 코딩할 때 개발 시간이 단축되어 생산성이 확실히 증가한다.
2. Syntax
VS Code와 같은 에디터에서 다음과 같은 문법을 입력하면 Emmet이 자동으로 코드를 완성해준다. Emmet syntax를 작성할 때에는 띄어쓰기 없이 모든 문법을 붙여서 사용해야 한다.
1) HTML
Child (>)
부모-자식 관계의 태그를 작성할 때에는 > 를 사용한다.
오른쪽에 작성된 태그가 왼쪽에 작성된 태그의 자식 요소로 상속된다.
사용:
nav>ul>li결과:
<nav>
<ul>
<li></li>
</ul>
</nav>Sibling (+)
형제-자매 관계의 태그를 작성할 때에는 + 를 사용한다.
+ 로 연결한 태그들이 같은 위계(위상)로 작성된다.
사용:
div+p+bq결과:
<div></div>
<p></p>
<blockquote></blockquote>사용:
div>p+bq결과:
<div>
<p></p>
<blockquote></blockquote>
</div>Climb-up (^)
먼저 자식 요소로 선언한 태그들보다 뒤에 위치하면서, 그 자식 요소들보다도 위계를 높여야 때 사용한다. 즉, 부모>자식 구조의 문법을 작성했는데 그 다음에 위치해야 할 태그가 부모 위상을 가져야 하는 경우 사용한다. 다음의 예제를 보자.
사용:
div+div>p>span+em^bqblockquote 태그가 div 태그와 동일한 위계를 가져야 한다. 이때, 상속된 요소들 뒤에 위치한 blockquote 태그에 Climb-up (^)을 사용하면 p 태그에 상속되어 있는 span, em 태그보다 한 위계 높은 p 태그와 동일한 위계(형제 관계)가 된다.
결과:
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
<blockquote></blockquote>
</div>Climb-up(^) 을 여러 번 사용하면 사용한 만큼 승급시킬 수 있다. ⬇️
사용:
div+div>p>span+em^^bq결과:
<div></div>
<div>
<p>
<span></span>
<em></em>
</p>
</div>
<blockquote></blockquote>상속(>)을 앞에서 2번했고, 이후 다시 승급(^)을 2번 하여 blockquote 태그가 div 태그와 동일한 위계가 되었다.
Multiplication (*)
동일한 요소를 여러 개 만들어야 할 때에는 * 를 사용한다.
사용:
ul>li*3결과:
<ul>
<li></li>
<li></li>
<li></li>
</ul>ul 태그에 상속된 li 태그 3개가 만들어졌다
만약 부모 태그에 * 를 사용한다면?
사용:
ul*2>li*5결과:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>li 태그 3개가 상속된 ul 태그 2개가 생성되었다.
Gouping (())
지금까지 +, >, * 를 함께 쓴 것을 확인할 수 있었다. 이처럼 Emmet 문법에서 여러 문법을 적절히 조합하여 함께 동시에 사용하는 것이 가능하다.
climb-up(^)의 예제에서는 두 번째 div 태그에 상속을 하고 있는데, 만약 첫 번째 div 태그에도 상속을 하는 상황이라면 어떻게 될까?
사용:
div>ui>li*2+div>p위 문법을 보자.
첫 번째 div 태그에 ul를 상속하고, ul 태그에 li 태그 2개를 상속한다. 그리고 div 와 같은 위계에 두 번째 div를 생성하고, 여기에는 p를 상속하려 한다. 즉, 최상위 위계에 div 태그 2개를 두고, 각각의 태그에 요소들을 상속하려 한다. 이런 의도로 위의 문법을 실행하면?
결과:
<div>
<ul>
<li></li>
<li></li>
<div>
<p></p>
</div>
</ul>
</div>의도와 달리 두 번째 div 태그가 ul 태그에 상속되었다.
문법을 다시 보면 li*2 뒤에서 +div>p를 하고 있다. 그러나 Emmet 에서 > 이후의 요소들은 모두 바로 이전의 요소들의 자식 요소가 된다.
그럼 div 태그들은 동일한 위상에 위치하게 하려면, 뒤에 오는 div 태그는 climb-up(^)을 상속한 횟수만큼 써야하는가?
그럴 필요 없이 grouping() 으로 영역을 분리하면 된다. div>ui>li*2+div>p에 그루핑을 적용하여 의도하던 대로 작성해보자.
사용:
#1
div>(ui>li*2)+div>p#2
(div>ui>li*2)+div>p1과 2가 각각 어떻게 될 것 같은가? 잠시 고민해보자.
결과:
1
<div>
<ul>
<li></li>
<li></li>
</ul>
<div>
<p></p>
</div>
</div>2
<div>
<ul>
<li></li>
<li></li>
</ul>
</div>
<div>
<p></p>
</div>1은 ()로 묶은 영역 만큼(ul) 형제 관계가 형성이 되었고,
2는 의도 대로 div와 형제 관계가 형성이 되었다.
즉, 상속-위계에서 묶음으로 지정하여 부모-형제 관계 지정을 제대로 해줄 수 있게 된다.
ID, Class 속성 (#, .)
HTML 태그에서 ID, Class 속성을 지정해줄 때에는 각각 #과 .를 사용한다. 이때, 모든 태그를 작성할 필요 없이 ID 값과 Class 값만 지정해줘도 해당 값이 지정된 div 태그가 완성된다.
사용:
#header // id
.title // class결과:
<div id="header"></div>
<div class="title"></div>HTML 기본 요소들과 연계하거나 id, class를 한 번에 쓸 수도 있다.
사용:
form#search.wide
p.class1.class2.class3결과:
<form id="search" class="wide"></form>
<p class="class1 class2 class3"></p>커스텀 속성 ([])
각 태그들을 사용할 때 필요한 속성 및 속성 값이 있다. 이때 태그의 속성 및 값으로 지정할 값들을 태그[속성(값)] 형식으로 작성하면 값이 입력된 채로 태그가 완성된다.
사용:
p[title="Hello World"]
td[rowspan=2 colspan=3 title]
a[href="/"]
[a="value1" b="value2"]만약 태그를 작성하지 않으면 div 태그로 생성된다.
결과:
<p title="Hello world"></p>
<td rowspan="2" colspan="3" title=""></td>
<a href="/"></a>
<div a="value1" b="value2"></div>태그 내 Text 지정 ({})
a, p 등 화면에 보여야 할 텍스트가 필요한 태그의 경우 {}를 사용하여 태그 자동 완성을 할 수 있다. {}를 태그 없이 단독으로 사용할 때에는 > 또는 + 와 함께 사용할 수 있다.
사용:
a{Click Me}
p>{Click }+a{here}+{ to continute}결과:
<p>
Click
<a href="">
here
</a>
to continue
</p>Naming과 Numbering ($, @)
각각 다른 속성, 텍스트를 사용해야 할 때가 있다. 이때 연속된 숫자를 지정해주는 방법을 사용한다면 $, @를 사용하면 된다.
$는 그 자체로 숫자 단위 1개가 된다. 즉, $는 1~9이며 $$는 1~99, $$$는 1~999를 나타낸다.
@는 숫자를 몇 부터 시작할 지, 숫자를 오름차순으로 할 건지 내림차순으로 할 건지 정하게 해준다. 기본 값은 1부터 시작하는 오름차순이다.
요소(속성)$*n 문법으로 사용되며, 꼭 *와 함께 사용해야 한다.
#1 (기본 식 - $*n)
ul>li.sample$*5<ul>
<li class="sample1"></li>
<li class="sample2"></li>
<li class="sample3"></li>
<li class="sample4"></li>
<li class="sample5"></li>
</ul>#2 (숫자 표현이 유효한 모든 값에 사용 가능)
h$[title=topic$]{Headline $}*3<h1 title="topic1">Headline 1</h1>
<h2 title="topic2">Headline 2</h2>
<h3 title="topic3">Headline 3</h3>#3 (3자리 숫자의 표현 - $$$)
ul>li.item$$$*5<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>#4 (내림차순 표현 - $@-)
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>#5 (특정 숫자부터 시작 - $@n)
ul>li.item$@3*5 <ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>절대적인 태그 이름
Emmet을 사용할 때 자동적, 절대적으로 지정되는 태그들이 있다.
- 속성을 지정해주지 않으면
div태그em태그의 자식 태그는span태그ol,ul태그의 자식 태그는li태그table태그의 자식 태그는tr,td태그
등등...
위와 같은 규칙에 의해 다음과 같이 자동완성 된다.
사용:
.class
em>.class
ul>.class
table>.row>.col결과:
<div class="class"></div>
<em>
<span class="class"></span>
</em>
<ul>
<li class="class"></li>
</ul>
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>3. Conclusion
꽤나 복잡해보이지만 생각보다 금방 외우고 적응된다.
별 거 아니지만 잘 활용하면 생산성이 엄청나게 증가하는 걸 느낄 수 있을 것이다.
Syntax 뿐만 아니라 HTML, CSS 약어 등 다양한 매뉴얼이 있으니 공식문서 또는 공식문서 CheatSheet를 확인하면 될 것 같다. 그러나 Syntax만 알아도 80%는 시간 절약이 되지 싶다.
다음에는 HTML Emmet 과도 연계되는 CSS Emmet 을 작성하려고 한다.
References
