에디터 팁 : emmet 으로 html태그 작성하기

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>

그외에도 다양한 기능이 많으니, 공식사이트에 예제들 한번 쭉 보시면, 사용법이 간단해서 유용하게 사용할수 있습니다.