[HTML] Emmet
웹 개발 생산성을 극대화하는 Emmet의 강력한 기능과 활용법을 알아보자.
Emmet이란?
Emmet은 웹 개발자가 HTML, CSS 코드를 훨씬 빠르고 효율적으로 작성할 수 있도록 도와주는 플러그인입니다.
간단한 축약어를 입력하면 Emmet이 알아서 전체 코드로 확장해줍니다. 예를 들어, ul>li*5>a라고 입력하면 다음과 같은 HTML 코드가 자동으로 생성됩니다.
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
Emmet을 사용하면 이런 불필요한 작업을 줄이고, 개발자는 오롯이 로직과 디자인에 집중할 수 있습니다.
Emmet의 강력한 단축키 ! + Tab
Emmet을 사용하는 가장 대표적인 사례 중 하나는 ! + Tab 단축키입니다. 이 단축키를 입력하면 기본 HTML 문서의 구조가 즉시 생성됩니다. 예를 들어, 빈 파일에서 !를 입력한 후 Tab 키를 누르면 다음과 같은 기본 HTML 문서가 자동으로 작성됩니다.
<!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>
이 기본 구조는 웹 페이지를 시작할 때 반드시 필요한 요소들로 구성되어 있으며, 직접 입력하는 번거로움을 크게 줄여줍니다. 이 기능만 사용해도 초보자부터 숙련된 개발자까지 작업 시간을 크게 단축할 수 있습니다.
Emmet 사용법 (굉장히 쉽고 편리함)
Emmet의 문법은 간단하면서도 강력합니다. 몇 가지 기본 규칙만 익히면 금방 능숙하게 사용할 수 있습니다.
- 자식 요소:
>기호를 사용하여 자식 요소를 생성합니다. 예를 들어,div>p는<div><p></p></div>로 확장됩니다. - 형제 요소:
+기호를 사용하여 형제 요소를 생성합니다. 예를 들어,h2+p는<h2></h2><p></p>로 확장됩니다. - 반복 요소:
*기호를 사용하여 요소를 반복 생성합니다. 예를 들어,li*3는<li></li><li></li><li></li>로 확장됩니다. - 그룹화:
()괄호를 사용하여 요소들을 그룹으로 묶을 수 있습니다. 예를 들어,div>(header>ul>li*2)+footer는 다음과 같이 확장됩니다.
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer></footer>
</div>
- 속성 추가:
[]괄호를 사용하여 요소에 속성을 추가할 수 있습니다. 예를 들어,a[href=#]는<a href="#"></a>로 확장됩니다. 여러 속성을 추가하려면a[href=# title=링크]와 같이 작성합니다. - 클래스 및 ID 추가: CSS 선택자처럼
.기호로 클래스를,#기호로 ID를 추가할 수 있습니다. 예를 들어,div.container는<div class="container"></div>로,div#header는<div id="header"></div>로 확장됩니다. 여러 개의 클래스를 추가하려면div.container.main처럼 작성합니다. - 텍스트 내용 추가:
{}중괄호 안에 텍스트 내용을 입력할 수 있습니다. 예를 들어,p{안녕하세요}는<p>안녕하세요</p>로 확장됩니다.
이 외에도 다양한 기능들이 있지만, 이 정도만 알아도 Emmet의 강력함을 충분히 경험할 수 있습니다.
Emmet, 어디에서 사용할 수 있나요?
Emmet은 대부분의 텍스트 에디터와 IDE에서 플러그인 형태로 제공됩니다. Visual Studio Code, Sublime Text, Atom, IntelliJ IDEA 등 유명한 에디터에서는 기본적으로 Emmet을 지원하거나, 간단한 설치만으로 사용할 수 있습니다.
