html,css 등을 작성할때, 시간을 단축시켜주는 확장기능입니다.
https://emmet.io/
해당에디터 : vscode, atom, notepad++ 외
그외에도 emmet 플러그인만 설치돼있으면 다 가능합니다. 아마 대부분의 에디터가 지원할듯 합니다.
단축키는 vscode는 tab키가 기본이고, 아톰은 ctrl+shift+e , 노트패드는 플러그인 설치한후에 설정하기 나름입니다. 기본은 ctrl+alt+e 였던것 같습니다.
기본문법
div>ul>li
이렇게 입력하고 탭이나 단축키를 누르면
<div>
<ul>
<li></li>
</ul>
</div>
요런 코드가 생성이 됩니다. > 표시는 하위에 포함된 tag를 생성하라는 의미입니다.
병렬로 나열된 tag를 생성하려면 +기호로 연결하면 됩니다.
div+p+bq
<div></div> <p></p> <blockquote></blockquote>
여러개 반복
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
*5(곱하기 숫자)를 해주면 숫자만큼 반복되서 생성됩니다.
클래스 이름 넣기
이게 가장 많이 쓰는 기능일것 같습니다. 생성할때 css클래스 이름과 함께 생성하라는 의미입니다. 심볼은 .이고 ID의 경우는 # 입니다. css심볼과 같습니다.
ul>li.item*5
item 이라는 클래스의 리스트 태그5개를 생성합니다.
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
https://docs.emmet.io/abbreviations/syntax/
그외에도 다양한 기능이 많으니, 공식사이트에 예제들 한번 쭉 보시면, 사용법이 간단해서 유용하게 사용할수 있습니다.
