[201228] emmet 사용법 1. 약어(Abbreviations)

0. Emmet

emmet은 HTML & CSS 코드를 더 효율적으로 작성하게 해주는 도구다. 반복적인 구문 작성을 간단한 동작으로 수행할 수 있게 해준다. 

 

docs.emmet.io/  에서 emmet document를 확인할 수 있다. 이 게시글에서는 document를 기반으로, html & css syntex를 정리해볼 것이다. 

 

1. Abbreviations

html, xml 코드를 약어(Abbreviations) 를 사용한 후 tab 키를 한번 눌러서 작성할 수 있다. document에서 제공하는 예시는 아래와 같다. 

 

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

<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>

위처럼 약어를 작성하고, tab 키를 눌러서 간편하게 태그를 생성할 수 있다. div, ul, li 구조를 일일이 손으로 작성할 필요가 없다는 뜻이다. 하지만, 약어를 사용하는 규칙에 대해서는 숙지하고 있어야 한다. 

 

여기서, 태그 집합은 트리로 취급하고, 트리 각각의 요소가 깊이와 레벨을 가진다고 가정하여 글을 작성할 것이다. 

 

1.1. 약어 구문(Abbreviations Syntax)

• 요소(Elements)

div, p와 같은 태그 요소를 의미한다. 요소 이름에는 제약이 없다. 어떠한 단어를 써도 tag로 변환할 수 있다. 

ex. div → <div></div> , foo → <foo></foo>

 

• 중첩 연산자(Nesting operators)

태그의 트리 구조를 생성하는 데 쓰인다. 

• child : >

'>'의 뒤에 있는 요소를 앞에 있는 요소의 안쪽 레벨에 위치시킨다. 

ex)

div>ul>li

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

 

 

• sibling : +

'+' 의 앞뒤에 위치한 요소를 같은 레벨에 위치시킨다. 

ex1)

div+p+bq

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

 

ex2)

div>p+img

<div><p></p><img src="" alt="" /></div>

 

 

 

• climb-up : ^

'^' 연산자 뒤에 있는 요소의 레벨을 ^의 개수만큼 감소시킨다. 

 

ex1)

div>p^img

<div><p></p></div><img src="" alt="" />

 

ex2)

div+div>p>span+em^bq

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

 

ex3)

div+div>p>span+em^^^bq

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

^의 개수가 현재 요소의 깊이값보다 많다면 레벨을 1로 한다. 

 

• multiplication : *

많은 수의 요소를 한 번에 정의할 수 있다. '*' 연산자 앞에 놓인 요소를 뒤에 놓인 숫자만큼 반복해서 생성한다. 

ex1)

ul>li*5

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

 

 

• grouping : ( )

괄호는 subtree의 요소를 그룹화 할 때 사용한다. 

ex1)

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>

 

위 예제에서 ()가 없을 경우의 결과

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

<div>
  <header>
    <ul>
      <li><a href=""></a>
        <footer>
          <p></p>
        </footer>
      </li>
      <li><a href=""></a><footer><p></p></footer></li>
    </ul>
  </header>
</div>

 

ex2)

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

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

list, table을 생성할 때 유용하게 쓰이는 연산자이다. 

 

지금까지 본 중첩 연산자를 정리해서, 개발 중인 웹 페이지에 있는 임의의 코드를 간략화해서 emmet으로 작성해보았다. 

대상 코드)

emmet 작성)

section>div>div>(div>(h4+p)^div(a*3))

결과)

<section>
    <div>
        <div>
            <div>
                <h4></h4>
                <p></p>
            </div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </div>
    </div>
</section>

 

 

• 속성 연산자(Attribute operators)

속성 연산자는 요소의 속성을 수정하는 데 사용된다. 

• ID와 CLASS

css와 동일한 id, class 구문을 사용한다. id 요소의 앞에는 '#', class 요소의 앞에는 '.'을 붙이며 추가를 원하는 요소의 뒤에 공백이나 다른 연산자 없이 작성한다. 

 

ex)

div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

 

 

• Custom attribute

css에서와 같이 [ ] 표기법을 사용해서 요소에 custom attribute를 추가할 수 있다. 

 

ex)

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

 

• Item numbering : $

'*' 연산자를 사용해서 요소를 반복 생성할 때, '$' 연산자를 사용해서 넘버링을 할 수 있다. 요소의 이름이나 속성의 이름, 값에 '$' 연산자를 사용해서 할 수 있다. 

 

ex1)

ul>li.item$*5

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

 

ex2)

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>

'$'를 여러 번 사용해서 0으로 패딩할 자릿 수를 지정할 수 있다. 

 

• changing numbering base and direction

'@' 연산자를 사용해서 넘버링의 방향(오름차순, 내림차순)이나 시작 번호를 바꿀 수 있다. 

 

ex1)

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>

방향 변경에는 '@-'를 사용한다. 

 

ex2)

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>

시작 번호를 바꿀 때는 '@N'을 사용한다. 

 

ex3) 

ul>li.item$@-3*5

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

방향 변경과 시작 번호 변경을 함께 사용한 예제 

 

 

• Text: {}

'{}'를 사용해서 요소에 텍스트를 추가할 수 있다. 

ex)

a{Click me}

<a href="">Click me</a>

 

! 주의

'{}'의 뒤에 다른 요소가 있을 시 주의해야 한다. 예를 들어, a{click}과 a>{click}은 같은 출력 결과가 나오지만, a{click}+b{here} and a>{click}+b{here} 는 그렇지 않다.

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

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

2번째 예제의 경우 <b> 태그가 {click} 텍스트와 같은 레벨에 위치하게 된다. 연산자를 사용할 때 의도치 않은 동작이 나오지 않게 주의해야 한다. 

 

 

추가적으로, emmet의 구문 사이에 공백을 넣어서 보기 쉽게 작성하는 건 좋은 생각이지만, emmet이 의도치 않은 동작을 수행할 수 있으므로 자제하는 편이 좋다고 한다. 

 

 

1.2. Element types

emmet 요소의 정의는 snippets.json 안에 저장되어 있다. 형식은 아래와 같다. 

{
    "html": {
        "abbreviations": {
            "a": "<a href=\"\">",
            "link": "<link rel=\"stylesheet\" href=\"\" />"
            ...
        },
        "snippets": {
            "cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->"
            ...
        }
    },

    "css": {
        ...
    }
}

1 레벨에는 요소가 정의되는 syntex의 이름이, syntax section 안에는 snippets과 abbreviations가 있다. 

이 파트는 읽어도 어떻게 글로 담아야 할지 잘 모르겠어서... 참고가 필요하다면 직접 document(docs.emmet.io/abbreviations/types/)를 확인하는 게 더 좋겠다는 생각이 든다. 

 

사용자가 직접 snippets.json을 정의할 수도 있다고 한다.  

 

 

1.3. Implicit tag names

emmet은 상위 태그를 통해서 하위에 올 태그가 뭔지 짐작할 수 있는 상황에서, 태그 명을 빼고 클래스 명이나 id 명 만으로도 태그를 생성할 수 있다. 특수한 상황은 아래와 같다. 

• li for ul and ol
• tr for table, tbody, thead and tfoot
• td for tr
• option for select and optgroup

또한, div나 span 아래에서 태그 명 없이 클래스 명, id 명만 가지고 tab을 누르면 태그가 div, span으로 자동 설정 되는 것 같다. 

 

ex1)

- div 태그 안에서 클래스 명만 작성해서 tab을 눌렀을 때의 결과

 

ex2)

 

ul 태그 안에서 클래스 명만 작성해서 tab을 눌렀을 때의 결과 

 

 

1.4. "Lorem Ipsum" generator

"Lorem Ipsum"은 많은 웹 개발자들이 사용하는, 실제 데이터처럼 보이는 더미 텍스트 데이터이다. 'lorem' 이나 'lipsum'을 작성하고 tab을 누르면 빠르게 "Lorem Ipsum"을 생성할 수 있다. 여기서 lorem은 단순한 snippet이 아닌 하나의 생성기이다. 

 

ex1) 

lorem 작성 후 tab을 누르면 더미 텍스트가 생성된다. 

 

ex2)

숫자를 뒤에 함께 적으면 숫자만큼의 단어를 출력해준다. 

 

lorem을 태그 요소 안에 작성하는 방법도 있다. 

 

ex3)

p*4>lorem3

<p>Lorem ipsum dolor.</p>
<p>Aperiam, optio, facilis!</p>
<p>Deserunt pariatur, explicabo.</p>
<p>Temporibus, itaque, eos.</p>

 

ex4)

ul.generic-list>lorem10.item*4

<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
    <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
    <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

lorem이 반복될 때, implite tag name resolver를 사용해서 약어를 더 간단하게 작성할 수 있다. 위 예제에서 li 태그를 적지 않고도 ul의 하위에 li 태그로서 lorem 택스트가 생성된 것을 확인할 수 있다. 

 

 

End.

HTML에서 사용할 수 있는 Abbreviations에 대해 정리해보았다. 다음 게시글에서는 CSS Abbreviations에 대해 정리할 것이다. 

 

모든 설명과 대부분의 예제는 docs.emmet.io/ 에서 참고하였다. 내가 공부하면서 작성한 걸 그대로 옮긴 글이라 참고에 쓰기에는 그다지 적절하지 않을 수 있겠다. document에서 정말 친절한 설명과 예제를 제공하고 있으므로, emmet을 상세하게 알아야 한다면 document를 정독하는 게 더 좋을 것 같다. 

 

참고.

docs.emmet.io/

Emmet Documentation