하루종일 코딩하고 있는 코더가 한 줄에 10자를 줄일 수 있다면, 100줄 입력했을 때 1,000 문자를 줄일 수 있게 됩니다. 현장에서 속도있는 개발을 위해서 emmet 과 숏헨드가 중요시 되는 이유가 바로 코딩의 효율을 폭발적으로 높여 주기 때문입니다.
그 외에도
- 오타가 적다
- 타이핑이 적기 때문에 피곤하지 않다
등의 장점이 있습니다.
코더라면 반드시 알아야 할 것이 Emmet 입니다. 이번에는 기본적인 사용법과 자주 사용하는 쇼트 핸드의 패턴을 정리하고 있으므로, 참고하시길 바랍니다.
【사전 준비】 에디터
「Visual Studio Code」 라면, 표준으로 Emmet를 사용할 수 있게 되어 있습니다. 개인적으로 추천하는 에디터입니다.
다른 메이저의 에디터 「Sublime Text」 「Atom」도 Emmet의 확장 기능을 도입하는 것으로 사용할 수 있게 됩니다. 이 에디터를 사용하시는 분은 Google에서 검색하여 Emmet를 사용할 수 있도록 해야 합니다.
이번에는 「Visual Studio Code」 사용을 전제로 설명하도록 하겠습니다.
Emmet 사용법
Emmet은 HTML과 CSS의 설명을 줄이는 데 사용할 수있는 기법입니다. HTML, CSS 각각을 작성하는 방법을 살펴 보겠습니다.
Emmet로 HTML 작성
index.html 과 같은 html 파일을 만들고 Emmet을 사용할 수있는 편집기에서 엽니다.
요소 + Tab이 기본
기본적으로 h1 등의 요소를 입력하여Tab키를 누르면 HTML 태그로 저장되는 구조로 되어 있습니다.
h2라고 써Tab키를 누르면 다음과 같은 HTML이 생성됩니다.
<h2></h2>요소> 요소로 계층 지정
ul>li라고 기재하면, ul 태그 안에 li 태그가 들어가는 HTML이 만들어집니다.
<ul>
<li></li>
</ul>요소*숫자로 복제
ul>li*3라고 기재하면, ul 태그 안에 li 태그가 3개 내포된 HTML이 만들어집니다.
<ul>
<li></li>
<li></li>
<li></li>
</ul>요소 + 요소 에 인접
dl>dt+dd라고 기재하면, dl 태그 안에 dt 태그와 dd 태그가 병렬로 늘어선 HTML이 만들어집니다.
<dl>
<dt></dt>
<dd></dd>
</dl>덧붙여서, dt+dd를 정리해 복수 설치하고 싶은 경우는, 괄호로 정리해 주세요. dl>(dt+dd)*3라고 기재해 주면, 3개 복제되게 됩니다.
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>">" "+" "*" 조합
HTML emmet은 요소와 ">", "+", "*" 기호의 조합입니다. 우선 이 세 기호의 의미를 기억해 두면 어떻게 됩니다.
Emmet에서 CSS 작성
style.css 와 같은 css 파일을 만들고 Emmet에서 사용할 수 있는 편집기에서 엽니다.
속성의 이니셜 + Tab 기본
- bg#000을 Tab으로 확장하면,background: #000000;
- c#fff을 Tab으로 확장하면,color: #ffffff;
- fz16을 Tab으로 확장하면,font-size: 16px;
- dib을 Tab으로 확장하면,display: inline-block;
- mb32을 Tab으로 확장하면,margin-bottom: 32px;
- p8-12-8-12을 Tab으로 확장하면,padding: 8px 12px 8px 12px;
Visual Studio Code를 사용하는 경우,Ctrl+스페이스에서 속성 후보가 나오므로 시도해 보시기 바랍니다.
Emmet 복잡한 테이블 만들어 보기
아래의 table 태그를 만들려면 Emmet에서 어떤 설명으로 하면 좋을까요?
<table class="classtable">
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
<td></td>
</tr>
</table>대답
table.classtable>(tr>th*4)+(tr*4>th+td*3)
또는,
table.classtable>(tr>th*4)+(tr>th+td*3)*4
또는,
table.classtable>(tr>th*4)+tr*4>th+td*3
다양한 표현을 할 수 있습니다.
Emmet를 사용하면 코딩 속도가 쑥쑥
Emmet의 사용은 단어 사전 등록과 유사합니다. 즉, 타이핑하는 횟수를 대폭 줄임으로써 전체 코딩 시간을 대폭 줄일 수 있다는 것입니다.
display: block;그리고 평소대로 타이핑하면 15 자의 문자를 칠 필요가 있습니다. 한편, Emmet를 사용하여 코드를 표현하면 db두 문자로 끝납니다. 13문자를 단축 할 수 있습니다.
한 번에 환산하면 큰 일이 없을지도 모릅니다만, 수백번 같은 코드를 계속 입력하는 코더에 있어서, 하루 한주 한달로 환산하면 얼마나 큰 차이가 나올까요?
티끌모아 태산. 작은 짜투리 시간도 쌓이면 큰 시간의 여유를 낳게 되기 때문에, HTML, CSS 코딩 빈도가 많은 분은, 꼭 Emmet를 활용해 보시길 권합니다.
자주 사용하는 쇼트 핸드
마지막으로 내가 자주 사용하는 Emmet의 짧은 손을 정리했습니다.
HTML에서 자주 사용하는 숏핸드
| 숏 헨드 | 결과 |
| ! 순식간에 HMLT5 페이지를 만들 수 있습니다. |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html> |
| #idname ID가 있는 요소를 만들 수 있습니다. |
<div id="idname"></div> |
| .classname 수업이있는 요소를 만들 수 있습니다. |
<div class="classname"></div> |
| ul>li*3>a 링크된 목록 |
<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> |
| table>tr*3>th+td | <table> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> <tr> <th></th> <td></td> </tr> </table> |
| dl>(dt+dd)*2 정의 목록 |
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> |
CSS에서 자주 사용하는 숏핸드
| 숏헨드 | 결과 |
| dib | display: inline-block; |
| bg#000 | background: #000000; |
| c#000 | color: #000000; |
| fz16 | font-size: 16px; |
| w150 | width: 150px; |
| p10 | padding: 10px; |
| mb1e | margin-bottom: 1em; |
| p8-12-8-12 | padding: 8px 12px 8px 12px; |
| bd+ | border: 1px solid #000; |
| bsh0-0-3-0#000 | box-shadow: 0 0 3px 0 #000000; |
| bdrs4 | border-radius: 4px; |
| psr | position: relative; |
| psa | position: absolute; |
| tac | text-align: center; |
| tf | transform: |
| trs | transition: |
그 밖에도 많이 있습니다. 아래 치트시트를 참고해 보세요.