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