하드코딩을 선호하는 프론트앤드 개발자에게 아주 중요한 도구가 하나 있습니다. 예전에는 스니펫(snippets)이라고도 불렀었는데 그 사용법이 제공자마다 조금씩 달랐었습니다. 하지만 언제부턴가 Emmet이 나오면서 자동완성 코드의 사용법이 어느정도 통일이 된 것 같습니다.
Emmet이 도대체 뭐야?
Emmet을 한마디로 요약하면 제목에도 나와 있듯이 약속된 형태의 카워드를 작성하고 변환키를 눌러주면 자동으로 코드를 완성시켜주는 툴킷이라고 할 수 있습니다.
Emmet은 웹 개발자를 위한 필수 툴킷 이며 현재 출시되어 있는 많은 인기있는 텍스트 편집기에서 플러그인 형태로 제공되고 있습니다. Emmet을 통해서 HTML 및 CSS 작업 과정을 효율적으로 작업할 수 있습니다.
적용가능한 텍스트 편집기
Emmet은 아래와 같이 정말 다양한 편집기에서 사용할 수 있습니다.
Download는 Emmet.io에서 직접 제작한 플러그인이고
Online services는 다운로드 하여 설치하는 것이 아니라 인터넷에서 서비스 하고 있는 편집기 중 사용가능한 에디터의 목록입니다.
Third-party support는 각 에디터 개발사가 직접 제작한 플러그인이라고 보시면 됩니다.
VScode도 직접 MS에서 제작을 했다고 나와 있네요.
Emmet 사용방법
여러분은 처음 HTML문서를 작성할 떄 어떻게 작성을 하나요?
<html></html> 타이핑하고, <html>안에 <html><head></head><body></body></html> 타이핑하고 <head></head>안에 메타테그 및 title작성하고.. 하지요..
Emmet에서는 이러한 기본 HTML5작성을 간단히 !하나 작성하고 적용키를 누름으로써 만들어 낼 수 있습니다.
!
VScode에서는 위처럼 !를 입력하고 단축키 ctrl + Shift를 입력하면 자동으로 아래와 같이 HTML5의 기본코드를 작성해 줍니다.
매우 편하고 신기하죠?
<!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>이렇게 어느정도의 규칙만 알고 있으면 상당히 편리하게 사용할 수 있습니다.
기본 사용법(문법)
하위 태그의 표시는 >로 표시합니다.
nav>ul>li
위의 표시는 nav태그 하위에 ul태그를 넣고 그 하위에 li태그를 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.
<nav>
<ul>
<li></li>
</ul>
</nav>이웃 태그의 표시는 +로 표시합니다.
div+p+bq
위의 표시는 div태그 옆에 p태그를 붙히고 그 옆에 blockquote태그를 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.
<div></div>
<p></p>
<blockquote></blockquote>상위 태그의 표시는 ^로 표시합니다.
div+div>p>span+em^bq
위의 표시는 div태그 옆에 div태그를 붙히고 그 하위에 P태그, 그 옆에 em태그를 놓고 한단계 상위에 blockquote 를 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>그룹 태그의 표시는 ()로 감싸 줍니다.
div>(header>ul>li*2>a)+footer>p
위의 표시는 div태그 하위에 그룹을 지어서 header>ul>li*2>a를 표시하고 그 옆에 footer>p를 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>여러 개를 추가 할 때는 * 숫자로 표시합니다.
ul>li*5
위의 표시는 ul태그 하위에 li를 5개 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>여러 개를 추가 할 때 넘버링을 하려면 $를 표시한 곳에 자동으로 번호가 붙습니다.
ul>li.item$*5
위의 표시는 ul태그 하위에 li를 5개 넣어서 작성하라는 뜻입니다.
아래와 같은 결과물이 나옵니다.
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>ID와 CLASS를 표시하는 것은 CSS의 표시방법처럼 ID는 #을, CLASS는 .으로 표시합니다.
#header
<div id="header"></div>.title
<div class="title"></div>form#search.wide
<form id="search" class="wide"></form>위의 내용은 기본적인 설명이고 더 많은 정보를 사용하시려면 아래의 cheat-sheet를 참고하세요.
더 많은 정보는 Emmet 홈페이지를 참조하세요
