코딩팁

에디터 팁 : 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
    vscode는 자동완성기능이 잘되있어서 그것만으로도 css는 편하게 썼던것 같습니다. 예를들면 font-family 는 ff 를 타이핑하면 추천목록으로 뜨고, font-size 는 fs 를 타이핑하면 뜬다던지 하는 기능들이요. 첫문자나 포함된 문자를 타이핑하면 자동으로 목록이 떠요. 아니면 extension tab에 확장기능들이 많이 있어서 찾아보시면 더 좋은 기능들이 있을거에요.
    대화보기
    • 누노
      질문 좀 드려도 될까요? 혹시 vscode 에서 cs 파일의 기본 코드도 html 처럼 자동으로 나타나게 할 수 있을까요?
    • 생활코딩 하루한번애청자
      영상보다가 코딩 가독성 높이고 좋을것 같아 다운받으려고하니까 위치가 어디인지 적용법을 잘모르겠어서요... 혹시 관련 영상 있나요..
    버전 관리
    nomadlife
    현재 버전
    선택 버전
    graphittie 자세히 보기