Emmet 사용법 - 도롱뇽 BLOG

내용 목차

Emmet 사용법 : 우리가 vscode 같은 코드 편집기를 사용할 때 html 코드를 아주 간편하게 빨리 작성할 수 있도록 도와주는 도구입니다. 단축형 코드를 입력하고 Tab 키를 치면 바로 정상 코드로 확장됩니다.

하위 요소 만들기 : >

Emmet에서 자식 요소를 만들려면 > 기호를 사용합니다.

 div>ul>li

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

형제 요소 만들기 : +

같은 레벨의 형제 요소를 만들려면 + 기호를 사용합니다.

div+ul+p

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

상위 요소 만들기: ^

직전에 입력된 요소보다 한 단계 위의 상위 요소를 만들려면 ^ 기호를 사용합니다. ^^ 처럼 두 번 사용하면 두 단계 상위 요소가 만들어집니다. ^^^, ^^^^^ 처럼 여러 번 반복할 수 있습니다.

div>p>span^div

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

Emmet 한번에 여러개를 만들때 : *

같은 요소를 한꺼번에 여러 개를 만들 때는 곱하기 기호인 * 를 사용합니다.

ul>li*5

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

Emmet 요소 그룹핑 : ( )

괄호 기호 () 는 괄호 안의 요소들을 그룹으로 만들어 줍니다. 즉 한 묶음으로 보는 것이지요.

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>

Id, Class 입력 : #(아이디) .(클래스)

‘#’ 기호는 id 속성을 입력할 때 사용되고 ‘ . ‘ 마침표 기호는 class 속성을 입력할 때 사용됩니다.

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>

숫자 자동입력 : $, $$, $$$… , $@

$ 표시는 숫자를 자동으로 입력할 때 사용합니다. $ 하나만 쓰면 1,2,3,4,5… 이렇게 자동 입력되고, $$$ 처럼 3개를 쓰면 001,002,003… 이런 형식으로 입력 됩니다.

$@ 는 특정 숫자부터 시작하거나, 숫자가 감소되면서 입력시키고 싶을 때 사용합니다.

ul>li.item$$*3

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

# 클래스 이름의 숫자를 5부터 시작하여 3개를 만들고 싶다면
ul>li.item$@5*3

# 숫자를 감소시키면서 5개의 li를 만드는데 최종적으로 감소되는 숫자가 2가 되게 하려면
ul>li.item$@-2*5

# 첫 번째 결과
<ul>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>

# 두 번째 결과
<ul>
  <li class="item6"></li>
  <li class="item5"></li>
  <li class="item4"></li>
  <li class="item3"></li>
  <li class="item2"></li>
</ul>

문자를 입력하고 싶다면 : { }

Emmet 사용법 중에서 문자를 입력하고 싶은 경우에는 중괄호 {}를 사용합니다.

div{Nice to Meet you}

<div>Nice to Meet you</div>

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

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

ul>li{sample$$}*4

<ul>
  <li>sample01</li>
  <li>sample02</li>
  <li>sample03</li>
  <li>sample04</li>
</ul>

Emmet에서 Lorem 사용하기 : lorem, lorem10, lorem15…

그냥 lorem 이라고 적으면 됩니다. lorem 뒤에 오는 숫자는 더미 단어의 갯수 입니다. 10 단어로 이루어진 더미 문자를 사용하고 싶다면 lorem10을 사용하면 되겠죠. 11,12.. 등 자유롭게 사용합니다.

ul>lorem9*4

<ul>
  <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Labore!</li>
  <li>Veritatis odio mollitia distinctio deserunt tempora ducimus, ut provident?</li>
  <li>Officiis, tempora eligendi? Alias eius illum perferendis incidunt quia!</li>
  <li>Illum delectus aliquam quo blanditiis voluptatum itaque corporis ipsum.</li>
</ul>

오늘은 Emmet 사용법에 대해서 알아봤습니다. 대충 이 정도 사용할 수 있다면 html 코드는 아주 쉽고 빠르게 작성할 수 있습니다.