코딩팁

에디터 팁 : 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>

 

https://docs.emmet.io/abbreviations/syntax/

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

댓글

댓글 본문
작성자
비밀번호
  1. 생활코딩 하루한번애청자
    영상보다가 코딩 가독성 높이고 좋을것 같아 다운받으려고하니까 위치가 어디인지 적용법을 잘모르겠어서요... 혹시 관련 영상 있나요..
버전 관리
nomadlife
현재 버전
선택 버전
graphittie 자세히 보기