[HTML] 유용한 HTML Emmet 정리

🤔 Emmet이란?

Emmet은 HTML과 CSS에서 타이핑 몇자를 적으면 자동으로 나머지 코드들을 자동생성해줌으로써, 코드 작성 시간을 아주 빠르게 단축 시켜주는 에디터 확장기능입니다.

 

📝 자주 쓰는 Emmet 정리 및 예제

1. 자동완성 : tab키

예시)

<!-- div(tab키) -->
<div></div>

 

 

2. 텍스트 넣기 : {}

예시)

<!-- div{안녕} -->
<div>안녕</div>

 

 

3. 자식(하위)요소 : > 

예시)

<!-- div>div -->
<div>
    <div></div>
</div>

 

 

4. 형제 요소 : +

예시)

<!-- div>p+a-->
<div>
    <p></p>
    <a href=""></a>
</div>

 

 

5. 올라가기 : ^

예시)

<!-- div>p^div -->
<div>
    <p></p>
</div>
<div></div>

 

 

6. 반복하기 : *

예시)

<!-- ul>li*4 -->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

 

 

7. 그룹화 : () 

예시)

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

 

 

8. 클래스 : .

예시)

<!-- div.class-name -->
<div class="class-name"></div>

 

 

9. 아이디 : #

예시)

<!-- div#id -->
<div id="id"></div>

 

 

10. 속성 : [attr]

예시)

<!-- img[alt="이미지 설명"] -->
<img src="" alt="이미지 설명">

 

 

11. 넘버링 : $

예시)

<!-- div.item$*6 -->
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>