emmet 사용하기

부모 자식 형제 노드

div.class

 

<div class="class"></div>

 

div#id

 

<div id="id"></div>

 

div>ul>li

 

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

 

div>ul+ol

 

<div>
    <ol></ol>
    <ul></ul>
</div>

 

div>ul>li^ol

 

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

 

그룹화하기()

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>

 

텍스트 입력하기

p{hello}

 

<p>hello</p>

 

자동 번호 넣기

p.class${item $}*5

 

<p class="class1">item1</p>
<p class="class2">item2</p>
<p class="class3">item3</p>
<p class="class4">item4</p>
<p class="class5">item5</p>

 

더미용 텍스트 생성

p>lorem4

 

<p>Lorem ipsum dolor sit.</p>