HTML Emmet

자주 쓰는 단축키를 소개합니다. 자동완성은 tab을 누릅니다.

아래 소개할 단축키는 전부 tab으로 완성됩니다.

참고

1. 텍스트: div{안녕}
<div>안녕</div>

2. 자식 요소: div>div
<div>
  <div></div>
</div>

3. 형제 요소: div>p+a
<div>
  <p></p>
  <a href=""></a>
</div>

4. 올라가기: div>p^div
<div>
  <p></p>
</div>
<div></div>

5. 반복하기: ul>li*4
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

6. 그룹화: ul>(li>a)*4
<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

7. 클래스: div.class-name
<div class="class-name"></div>

8. 아이디: div#id
<div id="id"></div>

9. 속성: img[alt="이미지 설명"]
<img src="" alt="이미지 설명">

10. 넘버링: div.item$*4
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>