웹 개발, 특히 HTML과 CSS를 작성할 때마다 반복되는 태그와 속성을 입력하는 것은 지루하고 시간이 많이 소요되는 작업입니다. 이러한 불편함을 획기적으로 해결해 주는 기능이 바로 'Emmet(에밋)'입니다. Emmet은 코딩 속도를 비약적으로 향상시키는 필수 도구로, 대부분의 최신 코드 에디터에 기본 내장되어 있습니다.
Emmet이란 무엇인가? (개념)
Emmet은 짧은 약어를 사용하여 복잡한 HTML 및 CSS 코드를 빠르고 쉽게 생성할 수 있도록 도와주는 코드 스니펫(Snippet) 플러그인입니다. CSS 선택자(Selector)와 유사한 문법을 사용하여 원하는 코드 구조를 입력한 뒤 'Tab' 키나 'Enter' 키를 누르면, Emmet이 이를 완전한 HTML/CSS 코드로 즉시 변환해 줍니다.
Emmet 핵심 사용법 및 활용법
Emmet의 진가는 문법을 조합하여 복잡한 구조를 한 번에 만들어낼 때 드러납니다. 약어를 입력한 후 'Tab' 키를 누르면 코드가 완성됩니다.
1. HTML 활용법
다음은 자주 사용되는 핵심 연산자입니다.
- 요소 생성: `div`, `p`, `span`처럼 태그 이름을 그대로 입력합니다.
- 자식 요소 (Nesting): `>` 연산자를 사용합니다. (예: `div>ul>li`)
- 형제 요소 (Sibling): `+` 연산자를 사용합니다. (예: `h1+p`)
- 반복 생성 (Multiplication): `*` 연산자를 사용합니다. (예: `ul>li*5` -> 5개의 `li` 항목 생성)
- ID 및 Class: `#` (ID)와 `.` (Class)를 사용합니다. (예: `div#header.logo`)
- 속성 (Attributes): `[]` 대괄호를 사용합니다. (예: `a[href="index.html"]`)
- 텍스트 (Text): `{}` 중괄호를 사용합니다. (예: `p{안녕하세요}`)
- 자동 넘버링: `$` 기호를 사용하면 1부터 순서대로 번호가 매겨집니다. (예: `li.item$*3` -> item1, item2, item3)
[실전 예시]
다음과 같은 Emmet 약어를 입력하고 Tab 키를 눌러보세요.
div#wrap>header.header+main#container>ul.nav>li.item$*4>a[href="#"]{메뉴$}
[변환 결과]
<div id="wrap">
<header class="header"></header>
<main id="container">
<ul class="nav">
<li class="item1"><a href="#">메뉴1</a></li>
<li class="item2"><a href="#">메뉴2</a></li>
<li class="item3"><a href="#">메뉴3</a></li>
<li class="item4"><a href="#">메뉴4</a></li>
</ul>
</main>
</div>2. CSS 활용법
CSS에서도 Emmet은 강력합니다. 속성의 약어와 값을 조합하여 사용합니다.
- `m10` -> `margin: 10px;`
- `p10-20` -> `padding: 10px 20px;`
- `df` -> `display: flex;`
- `jc` -> `justify-content: ;`
- `bgc` -> `background-color: #;` (값 입력을 기다리는 상태)
- `w100p` -> `width: 100%;`
3. 더미 텍스트 (Lorem Ipsum) 활용
디자인 시안을 잡을 때 필요한 더미 텍스트도 쉽게 생성할 수 있습니다.
- `lorem` (또는 `lorem30`) -> 30단어의 Lorem Ipsum 텍스트 생성
- `lorem10` -> 10단어의 텍스트 생성
- `p*3>lorem10` -> 10단어짜리 텍스트가 담긴 p 태그 3개 생성
Emmet 확장 팁
VS Code에서는 기본적으로 HTML, CSS 파일에서만 Emmet이 활성화되지만, React(.jsx, .tsx)나 Vue(.vue) 파일에서도 Emmet을 사용하고 싶을 수 있습니다.
[VS Code 확장 팁: React에서 Emmet 사용하기]
1. VS Code의 '설정(Settings)'을 엽니다. (단축키: `Ctrl + ,`)
2. 검색창에 `emmet.includeLanguages`를 입력합니다.
3. 'settings.json에서 편집' 링크를 클릭합니다.
4. `emmet.includeLanguages` 객체 안에 다음과 같이 원하는 언어를 추가합니다.
"javascript": "javascriptreact",
"typescript": "typescriptreact"5. 이제 `.js` 또는 `.tsx` 파일 내에서도 HTML 태그를 작성할 때 Emmet 약어를 사용할 수 있습니다.
Emmet은 현대 웹 개발자의 생산성을 극대화하는 필수 스킬입니다. 처음에는 문법이 조금 낯설 수 있지만, 몇 가지 핵심 연산자만 익혀두면 신속하고 오류 없는 코드를 작성하는 데 엄청난 도움을 받을 수 있습니다. 지금 바로 에디터를 열고 `div>h1+p>lorem10`을 입력해 보세요.
