[HTML] Emmet

HTML Emmet

Emmet은 HTML, CSS의 빠르고 효율적인 작성을 도와주는 플러그인이다.

 

Emmet은 사전에 정의된 사용 가능한 태그가 따로 없다. 즉 태그에 어떤 이름을 써도 사용이 가능하다.

 

Emmet에는 공백을 사용할 수 없다. 정확하게는 공백은 Emmet을 멈추는 기능을 한다.

---

Nesting Oprators

Child: >

상위 태그부터 하위 태그를 > 로 연결하면 순서대로 구조화.

div>ul>li

Result:

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

---

Sibling: +

+로 연결된 태그들을 같은 레벨에서 생성

div+p+p+div

Result:

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

---

Climb-Up: ^

^을 사용하면 한 단계 높은 레벨에 위치시킬 수 있다.

 

^ 미사용

div+div>p>span+p

Result:

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

 

^ 사용

div+div>p>span+p^bq

Result:

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

---

Multiplication: *

(tagname)* (숫자) 숫자 만큼의 tagname을 같은 레벨에서 생성

ul>li*5

Result:

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

---

Grouping: ()

연산(?) 되는 순서를 원하는 대로 제어하고 싶을 때 ()로 묶어서 사용

 

() 미사용

div>div>ul>li*3>a+div>p

Result:

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

() 사용

div>(div>ul>li*3>a)+div>p

Result:

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

---

Attribute Operators

위에서 빠른 구조 생성에 대해 다뤘다면, 이번에는 빠른 속성 생성까지 포함한 동작이다.

ID and Class ( in CSS )

CSS에서 id 속성과 class 속성을 포함해 생성하는 경우 사용한다.

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

Result:

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

---

Custom Attributes

태그의 속성을 원하는 만큼 포함하여 생성하는 경우 사용한다..

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

Result:

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

---

Item Numbering: $

$ 를 사용하여 연속된 숫자로 자동 넘버링 할 수 있다.

ul>li.item$$*5

Result:

<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
    <li class="item04"></li>
    <li class="item05"></li>
</ul>

 

@-를 $ 뒤에 넣어 넘버링 순서를 뒤집을 수 있다.

@N N에 숫자를 넣어 시작 넘버를 지정할 수 있다.

ul>li.item$$@-*5

ul>li.item$$@3*5

Result:

<ul>
    <li class="item05"></li>
    <li class="item04"></li>
    <li class="item03"></li>
    <li class="item02"></li>
    <li class="item01"></li>
</ul>

<ul>
    <li class="item03"></li>
    <li class="item04"></li>
    <li class="item05"></li>
    <li class="item06"></li>
    <li class="item07"></li>
</ul>

---

Text: {}

시작 태그와 끝 태그 사이에 넣을 text를 지정할 수 있다.

a{click}

Result:

<a href="">click</a>

여러 요소를 섞어서 사용이 가능하다.

p>{Click }+a{here}+{ to continue}

Result:

<p>Click <a href="">here</a> to continue</p>

 

참고:

https://docs.emmet.io/abbreviations/syntax/