알고있으면 짱 편한 Emmet

yukyung·2021년 5월 13일
0
post-thumbnail

✨ Emmet?

에밋은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩으로 부르다가 에밋으로 이름을 변경했다. 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다.

HTML을 작성할 때 매우 편리하게 도와주는 커맨드라고 생각하면 쉽다. vscode에선 특별히 플러그인을 설치 안해도 자동으로 사용할 수 있는데, 기타 에디터에서도 동일한지는 잘 모르겠다,,

명령어를 입력한 후 바로 엔터를 치거나 ctrl+space 누르면 된다. 아래와 같이 HTML에서 사용되지 않는 태그들도 emmet으로 사용할 수 있기 때문에 여기저기에 응용해서 쓸 수 있다.

Text{재밌는Text}*6

<Text>재밌는Text</Text>
<Text>재밌는Text</Text>
<Text>재밌는Text</Text>
<Text>재밌는Text</Text>
<Text>재밌는Text</Text>
<Text>재밌는Text</Text>

html

!
또는
html:5

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

처음 빈 html 파일을 생성하고 !를 친 후 Tab을 해도 html이 생성된다.

class

.class1

<div class="class1"></div>

input.input1

<input type="text" class="input1">

앞에 요소를 붙이지 않을 경우 기본적으로 <div>태그로 생성된다.

id

div#id1

<div id="id1"></div>

class와 동일하게 앞에 요소를 붙이지 않을 경우 기본적으로 <div>태그로 생성된다.

속성

input[name="input1"]

<input type="text" name="input1">
input.class1#id1[name="input1" type="password"]

<input type="password" class="class1" id="id1" name="input1">

사용할 태그 옆에 대괄호를 열고 들어갈 속성을 작성해주면 된다. 속성은 여러개로 작성할 수 있다.

여러개

div.class1*6

<div class="class1"></div>
<div class="class1"></div>
<div class="class1"></div>
<div class="class1"></div>
<div class="class1"></div>
<div class="class1"></div>

*옆에 작성할 태그의 숫자를 적는다.

숫자

div.class$*6

<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
<div class="class5"></div>
<div class="class6"></div>
input.input$[name="input$"]*6

<input type="text" class="input1" name="input1" />
<input type="text" class="input2" name="input2" />
<input type="text" class="input3" name="input3" />
<input type="text" class="input4" name="input4" />
<input type="text" class="input5" name="input5" />
<input type="text" class="input6" name="input6" />

순차적인 숫자를 사용할 위치에 $를 붙혀주면 순서대로 숫자가 생성된다.

태그 내부 이름

option[value="$"]*5{선택사항 $}

<option value="1">선택사항 1</option>
<option value="2">선택사항 2</option>
<option value="3">선택사항 3</option>
<option value="4">선택사항 4</option>
<option value="5">선택사항 5</option>

.class$*5{$번쨰 div}

<div class="class1">1번쨰 div</div>
<div class="class2">2번쨰 div</div>
<div class="class3">3번쨰 div</div>
<div class="class4">4번쨰 div</div>
<div class="class5">5번쨰 div</div>

option[value="$"]*5와 같이 생성하면 <option value="1"></option>처럼 작성되어 option태그 안의 값을 직접 넣어줘야하는데, 중괄호를 이용해 태그 안에 들어갈 내용을 작성할 수 있다.

태그 안에 태그

li*5>a[href="/"]{$}

<li><a href="/">1</a></li>
<li><a href="/">2</a></li>
<li><a href="/">3</a></li>
<li><a href="/">4</a></li>
<li><a href="/">5</a></li>

select[name="select1" id="select1"]>option[value="$"]{선택사항$}*6

<select name="select1" id="select1">
  <option value="1">선택사항1</option>
  <option value="2">선택사항2</option>
  <option value="3">선택사항3</option>
  <option value="4">선택사항4</option>
  <option value="5">선택사항5</option>
  <option value="6">선택사항6</option>
</select>

꺽쇠를 이용해 태그 안의 태그를 작성할 수 있다. ul이나 ol같은 태그를 작성할때 유용하다.

각 블록별 태그 생성

div+input+p

<div></div>
<input type="text">
<p></p>

각 블록별로 태그가 생성된다.

💻 vscode 커맨드

emmet을 사용할 때 같이 알아두면 좋은 커맨드들이다. emmet 안써도 알고있으면 좋다. 특히 선택, 동일한 글자 선택, 순서바꾸기, 복사는 알고있으면 진짜진짜 편하다. 커맨드는 윈도우 기준으로 작성되었다.

선택

ctrl+alt+방향키(위 / 아래)

동일한 글자 선택

ctrl+d

복사하기

alt+shift+코드를 복사하려는 방향키(위 / 아래)

순서 이동하기

alt + 방향키(위/아래)

여러개 선택하기 (커서)

alt를 누른 상태에서 선택할 부분을 커서로 클릭해주면 된다.

altshift를 같이 누르면 사용하면 한번에 여러 블록을 선택할 수 있다.

들여쓰기

ctrl+[ or ctrl+] 
이동하려는 방향으로 괄호를 선택해준다.

이외에도 ctrl+Home 또는 PgUp을 이용해서 문서 내 최상단으로 이동하기, ctrl+End 또는 PgDn을 이용해서 문서 내 최하단으로 이동하기가 있다. (이 기능은 vscode에 한정된게 아니라 일반적인 문서나 웹사이트에서도 쓸 수 있다.)

💅 팁

emmet을 사용해 작성하면 들여쓰기나 띄어쓰기 같은 사소하지만 중요한 컨벤션이 안지켜서 작성되기 쉽다. 태그가 많을 경우 하나씩 정렬하는건 너무너무 힘드니까 꼭! Prettir같은 기능을 쓰도록 하자.

✔ 마무리

이외에도 소개하지 않은 여러 기능들이 있는데, 가장 자주쓰는 기능들로 작성해봤다. 본문에 작성된 기능 외에도 여러 기능이 궁금하다면 구글에 vscode 커맨드, emmet 사용법 등과 같은 키워드로 검색하는걸 추천한다.

profile
◟( ˘ ³˘)◞

0개의 댓글