VS Code Emmet(에밋)과 관련 팁 알아보기

안녕하세요

 

이번 포스팅에서는 HTML 작성을 돕는 도구인

Emmet에 대해 알아보겠습니다.

 

 

Emmet 설치는 vscode에서

 

검색한 후 설치해주시면 됩니다.

 

먼저 에밋을 사용하는 이유는 HTML 마크업을 일일이 작성 할 필요없이 HTML 작성을 도와주는 도구입니다.

 

하나의 예시로

EX) nav > ul > li*2 한 후 Tab 하면

 

<nav>

          <ul>

                   <li></li>

                   <li></li>

            <ul>

</nav>

 

이렇게 자동으로 만들어 줍니다.

 

정리하면

‘>’ 요소는 자식요소를 만들어주고 *을 통해 갯수를 정할 수 있다.

‘+’는 형제요소

 

또한 ‘$’ 는 넘버링이 가능하다.

필요한 속성에 넣으면 자동으로 numbering가능

ex) li*3 > a[href=$]하면 넘버링이 됨

그리고 새로운 요소에 텍스트를 넣을 떄는 { } 사용

 

예시로

ex)

앵커태그마다 텍스트를 넣는다.

nav > ul > li *5 > a[href=www.$.com]{Click me}

 

 

이런식으로 사용 가능 합니다

 

꼭 필요한 기능은 아니지만 유용한 기능이니 알아두면 좋을 거 같네요