[HTML5] Emmet 으로 작업흐름을 개선해보자

Emmet이란

HTML 과 CSS를 빠르고 효율적으로 작성하기위해

코드를 단축시켜 특정 단축키를 통해 확장하여 완전한 코드로 변환시켜주는 것 입니다.

아래에서 예시들 몇개를 보겠습니다.

 

 

 

 

Child: >

• 부모와 자식 요소간의 관계를 나타냅니다.

nav>ul>li

입력 후 Tab 또는 enter를 누르게 되면

 

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

로 바뀌게 되는것을 알 수 있습니다.

 

 

 

Multiplication: *

• 요소를 반복하는데 사용합니다.

ul>li*5

입력 후 Tab 또는 enter를 누르게 되면

 

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

* 옆에 숫자수 만큼 list가 만들어지는 것을 알 수 있습니다.

 

 

 

 

Sibling: +

• 형제요소를 나타냅니다.

div+p+bq

 

입력 후 Tab 또는 enter를 누르게 되면

 

div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

가 되는것을 알수 있습니다.

 

 

 

 

TIP) 더 많은예시들은 아래에서 보고 실행해 보시면 됩니다.

      참고 사이트: https://docs.emmet.io/cheat-sheet/

Cheat Sheet

 

 

 

코드 자동 정렬

• VSCode 에서 Format Document  기능이 자동으로 코드를 정렬해 줍니다.
• 사용 하는 방법은 VSCode에서 cirtl+shift+p 를 누른 후 Format Document 를 찾아
  눌러주시면 코드를 자동으로 정렬해줍니다.

 

아래는 사용 예시 입니다.

사용전

사용후