본문으로 건너뛰기

약어

약어(abbreviation)은 에밋의 핵심으로 CSS 선택기와 구문이 비슷합니다.

구문​

요소​

요소의 이름을 그대로 사용해 HTML 태그를 생성할 수 있습니다.

약어:

div
div

결과:

html
<div></div>
html
<div></div>

중첩 연산자​

중첩 연산자는 생성된 트리 내부에 약어 요소를 배치하는 데 사용됩니다.

자식: >​

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

형제: +​

div+p+bq
div+p+bq
html
<div></div>
<p></p>
<blockquote></blockquote>
html
<div></div>
<p></p>
<blockquote></blockquote>

등반: ^​

^ 연산자는 > 연산자와 반대 기능을 합니다. 한 번 사용할 때마다 트리를 한 단계씩 올라갑니다.

div+div>p>span+em^^^bq
div+div>p>span+em^^^bq
html
<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>
html
<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

곱하기: *​

ul>li*5
ul>li*5
html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
html
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

그룹화: ()​

괄호는 복잡한 약어에서 하위 트리를 그룹화할 때 사용합니다.

div>(header>ul>li*2>a)+footer>p
div>(header>ul>li*2>a)+footer>p
html
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>
html
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

* 연산자와 같이 사용할 수 있습니다.

(div>dl>(dt+dd)*3)+footer>p
(div>dl>(dt+dd)*3)+footer>p
html
<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>
<footer>
  <p></p>
</footer>
html
<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>
<footer>
  <p></p>
</footer>

속성 연산자​

아이디와 클래스​

div#header+div.page+div#footer.class1.class2.class3
div#header+div.page+div#footer.class1.class2.class3
html
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
html
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

사용자 정의 속성​

CSS에서 사용하는 표기법인 [attr]을 사용해 사용자 정의 속성을 요소에 추가할 수 있습니다.

td[title="Hello world!" colspan=3]
td[title="Hello world!" colspan=3]
html
<td title="Hello world!" colspan="3"></td>
html
<td title="Hello world!" colspan="3"></td>
  • 대괄호 안에 원하는 만큼 속성을 넣을 수 있습니다.
  • 속성값을 나중에 지정할 수 있습니다. td[colspan title]의 결과는 <td colspan="" title="">이다. 탭 스탑(tab stop)을 이용해 빈 속성을 이동할 수 있습니다.
  • 속성값에 띄어쓰기가 없다면 따옴표로 감싸지 않아도 됩니다.

항목 번호 매기기: $​

요소의 이름, 속성의 이름, 속성값에 $ 연산자를 사용해서 번호를 매길 수 있습니다.

ul>li.item$*5
ul>li.item$*5
html
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>
html
<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>

복수의 $을 사용하면 앞에 0을 붙일 수 있습니다.

ul>li.item$$$*5
ul>li.item$$$*5
html
<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>
html
<ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
</ul>

@ 수정자를 사용하면 오름차순/내림차순과 시작 값을 지정할 수 있습니다.

내림차순으로 바꾸려면 $ 뒤에 @-을 추가합니다.

ul>li.item$@-*5
ul>li.item$@-*5
html
<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>
html
<ul>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>

시작 값을 바꾸려면 $에 @N을 추가합니다.

ul>li.item$@-3*5
ul>li.item$@-3*5
html
<ul>
  <li class="item7"></li>
  <li class="item6"></li>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
</ul>
html
<ul>
  <li class="item7"></li>
  <li class="item6"></li>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
</ul>

텍스트: {}​

중괄호를 사용해 요소에 텍스트를 추가할 수 있습니다.

a{Click me}
a{Click me}
html
<a href="">Click me</a>
html
<a href="">Click me</a>

a{click}와 a>{click}의 결과는 비슷해 보이지만 다른 연산자와 같이 쓰일 때 차이점이 명백해집니다.

html
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
html
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

다음은 차이점을 보여주는 또 다른 예시입니다.

html
<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>
<!-- p{Click }+a{here}+{ to continue} -->
<p>Click</p>
<a href="">here</a> to continue
html
<!-- p>{Click }+a{here}+{ to continue} -->
<p>Click <a href="">here</a> to continue</p>
<!-- p{Click }+a{here}+{ to continue} -->
<p>Click</p>
<a href="">here</a> to continue

약어의 형식에 대한 참고 사항​

에밋에서 빈 칸은 약어의 파싱을 멈추는 곳입니다. 따라서 가독성을 위해 다음과 같이 빈 칸을 사용하면 의도대로 작동하지 않습니다.

(header > ul.nav > li*5) + footer
(header > ul.nav > li*5) + footer

약어는 템플릿 언어가 아닙니다. 따라서 가독성보다는 확장과 제거가 쉬운 것이 더 중요합니다.

텍스트의 아무 곳에서나 약어를 사용할 수 있습니다. 약어를 새 줄에서 사용해야 한다는 제약은 없습니다.

하나의 복잡한 약어를 만드는 대신 짧은 약어를 여러 개 만드는 것이 더 좋습니다. 훨씬 빠르고 오류가 덜 발생합니다.