Emmet 정리

1. div 태그 작성

• div.class = div. = .class

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

• div.id = div# = #id

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

---

2. 부모, 자식, 형제 노드

• >

<!-- div>ul>li -->

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

• +

<!-- div>ul+ol -->

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

• *

<!-- ul>li*5 -->

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

• ^

<!-- div>ul>li^ol -->

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

---

3. 그룹화 하기

• ()

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

---

4. 텍스트 입력하기

• {}

<!-- p{hello} -->

<p>hello</p>

• {$}

<!--- p.class${item $}*5 -->

<p class="class1">item 1</p>
<p class="class2">item 2</p>
<p class="class3">item 3</p>
<p class="class4">item 4</p>
<p class="class5">item 5</p>

---

5. 더미용 텍스트 생성

• p>lorem

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius laudantium nihil animi dolore quis, perferendis sequi quae? Eius, esse error officiis amet voluptatum itaque quos aperiam minus eveniet, odit optio!</p>

• p>lorem4

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

---

출처: 드림코딩 - 웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기