Emmet은 HTML, CSS, JSX 등에서 빠르게 코드 작성을 도와주는 코딩 단축키(Snippet) 및 자동 완성 기능이다.
주로 VS Code, Sublime Text, WebStorm 같은 코드 편집기에서 지원되며, 복잡한 HTML 구조를 짧은 코드로 작성할 수 있도록 도와준다.
핵심 기능
기본 태그 확장
Emmet은 태그 이름을 입력한 후 Tab 또는 Enter를 누르면 자동으로 HTML 요소를 확장한다.
예시
divTab 또는 Enter
<div></div>또한, Emmet은 기본적으로 <div>를 생략 가능하다.
예시
.containerTab 또는 Enter
<div class="container"></div>ID 및 클래스 자동 생성
CSS와 동일한 문법으로 #과 .을 사용하면 id와 class를 자동으로 추가할 수 있다.
예시1
div#mainTab
<div id="main"></div>예시2
div.containerTab
<div class="container"></div>예시3
div.container.boxTab
<div class="container box"></div>자식 요소 생성 (> 연산자)
> 기호를 사용하면 부모-자식 관계의 HTML 구조를 만들 수 있다.
예시
div>ul>li>Tab
<div>
<ul>
<li></li>
</ul>
</div>형제 요소 생성 (+ 연산자)
+ 기호를 사용하면 같은 수준의 형제 요소를 만들 수 있다.
예시
header+main+footerTab
<header></header>
<main></main>
<footer></footer>그룹화 (())
괄호 ()를 사용하여 더 복잡한 구조를 만들 수 있다.
예시
div>(header>h1)+main+footerTab
<div>
<header>
<h1></h1>
</header>
<main></main>
<footer></footer>
</div>반복 생성 (* 연산자)
*을 사용하면 태그를 반복해서 생성할 수 있다.
예시
ul>li*3Tab
<ul>
<li></li>
<li></li>
<li></li>
</ul>숫자 자동 증가 ($ 기호)
$를 사용하면 숫자가 자동으로 증가한다.
예시
ul>li.item$*3Tab
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>기본 템플릿 생성 (!)
HTML5 문서를 빠르게 만들려면 !을 입력한 후 Tab을 누르면 된다.
예시
!Tab
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>활용 예제
내비게이션 바 생성
nav>ul>li*4>aTab
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>카드 레이아웃 생성
.section>div.card*3>h2{Card $}+p{Description $}Tab
<section>
<div class="card">
<h2>Card 1</h2>
<p>Description 1</p>
</div>
<div class="card">
<h2>Card 2</h2>
<p>Description 2</p>
</div>
<div class="card">
<h2>Card 3</h2>
<p>Description 3</p>
</div>
</section>장점
- HTML/CSS 코드 작성 속도 향상
- 반복적인 코드 작성을 줄여 생산성 증가
- 코드 자동 완성으로 오타 방지
- 구조적인 코드 작성 가능
Emmet을 활용하면 더 빠르고 효율적으로 HTML을 작성할 수 있으므로, 웹 개발엥서 적극적으로 사용하면 좋다!
Turning Vision into Reality.