[Web] 내가 많이 쓰는 Emmet 기능

Emmet이 뭘까?

 

https://emmet.io

Emmet — the essential toolkit for web-developers

 

공식 홈페이지에 "the essential toolkit for web-developers"라고 소개한다.

 

쓸때는 잘 모르지만, Emmet 없이 메모장에 코드를 짜려고 하면 필요성을 엄청나게 느끼게 된다.

 

자주쓰는 Emmet 기능 몇가지만 알아보자.

 

vscode에서는 기본적으로 설치가 되는것 같다.

 

---

 

1. h1, div, p, span 등 태그를 입력하고 tab(emmet 단축키)을 입력하기

h1만 입력했는데, <h1></h1>이 자동으로 생성된다.

아주 편하다.

 

2. 부모태그, 자식태그 생성하기

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

이런 태그를 직접 만들려면 꽤 귀찮다.

근데 emmet을 사용하면 div>ul>li 로 만들 수 있다.

태그내에 태그를 생성하라는 의미로 >를 쓰면 된다. (자식태그)

 

3. 형제태그 생성하기

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

요런코드 만들기도 꽤 귀찮다.

이거는 div+p+span 으로 만들 수 있다.

태그옆에 태그를 생성하라는 의미로 +를 쓰면 된다. (형제태그)

 

4. 부모태그로 올라가기

<div>
    <ol>
        <li></li>
    </ol>
    <p></p>
</div>

이런 태그들을 만들고 싶으면 어떻게 하면 될까?

 

div>ol>li^p 이렇게 하면 된다.

^는 한단계 올라가게 해주는 연산자라고 생각하면 된다.

 

5. 중복으로 만들기

<ol>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ol>

이런걸 만들 생각을 해보자.

emmet 없이는 생각만해도 귀찮아 죽겠다.

 

emmet에서는 ol>li*5 로 표현할 수 있다.

 

6. id, class 설정하기

<div class="container">
    <div id="box"></div>
</div>

emmet을 사용하면 css 선택자와 비슷하게 해결할 수 있다.

div.container>div#box 이렇게 하면 된다.

 

7. Numbering 하기

<ol>
    <li id="listId1"></li>
    <li id="listId2"></li>
    <li id="listId3"></li>
    <li id="listId4"></li>
    <li id="listId5"></li>
</ol>


<ol>
    <li id="listId001"></li>
    <li id="listId002"></li>
    <li id="listId003"></li>
    <li id="listId004"></li>
    <li id="listId005"></li>
</ol>

이런거 하나하나 숫자 바꾸고 있을 시간이 없다.

 

ol>li#listId$*5

ol>li#listId$$$*5

이렇게 하면 된다.