HTML용 Emmet

Source: Dev.to

HTML을 작성하는 것이 느리고 반복적일 수 있습니다. <div>, </div> 같은 태그를 계속 열고 닫는 작업을 반복하는 것이죠…
div만 입력하면 즉시 <div></div>가 생성된다면 어떨까요? 바로 Emmet이 하는 일입니다.

Emmet이란?

Emmet은 대부분의 코드 편집기에 내장된 단축키 도구입니다. 약어를 사용해 HTML을 매우 빠르게 작성할 수 있게 해줍니다.

간단한 예시

다음과 같이 입력합니다:

p

Tab 키를 누릅니다 →

그게 전부입니다. Emmet은 짧은 코드를 전체 HTML로 변환합니다.

왜 Emmet을 사용하나요?

Emmet 없이

  

    - 

    - 

    - 

  

이 모든 것을 수동으로 입력합니다 – 타이핑이 많고, 시간이 많이 걸립니다.

Emmet 사용 시

div.container>ul>li*3

Tab 키를 누르면 즉시 같은 HTML을 얻을 수 있습니다!

장점

• HTML을 10배 빠르게 작성
• 오타 감소 (닫는 태그 누락 없음)
• 반복 작업 감소
• 구문이 아니라 구조에 집중

---

Emmet 작동 방식

Emmet는 대부분의 최신 코드 편집기에 내장되어 있습니다:

• VS Code (내장)
• Sublime Text (내장)
• Atom (내장)
• WebStorm (내장)

사용 방법

1. Emmet 약어를 입력합니다.
2. Tab 또는 Enter 키를 누릅니다.
3. HTML로 확장됩니다.

시작하기 위해 필요한 모든 것이 다 준비되었습니다!

---

기본 Emmet 구문

기본을 하나씩 배워봅시다.

1. 간단한 요소 만들기

태그 이름을 입력하고 Tab 키를 누르세요.

예시 1

div → Tab

결과

예시 2

p → Tab

결과

예시 3

h1 → Tab

결과

### 2. 클래스 추가

점(`.`)을 사용하여 클래스를 추가합니다.

**예시**

```text
div.container → Tab

결과

여러 클래스

div.card.shadow → Tab

결과

3. ID 추가

해시(#)를 사용하여 ID를 추가합니다.

예시

div#header → Tab

결과

클래스와 ID를 함께 사용

div#header.navbar → Tab

결과

4. 속성 추가

대괄호 []를 사용하여 사용자 정의 속성을 추가합니다.

예시

a[href="https://google.com"] → Tab

결과

[](https://google.com)

여러 속성

img[src="photo.jpg" alt="Photo"] → Tab

결과

[Image: Photo]

5. 텍스트 내용 추가

중괄호 {}를 사용하여 요소 안에 텍스트를 추가합니다.

예시

p{Hello World} → Tab

결과

Hello World

클래스와 함께 사용

h1.title{Welcome} → Tab

결과

환영합니다

> **Source:** ...

## 중첩 요소 만들기

`>`를 사용하여 자식 요소(중첩)를 생성합니다.

**예시 1**

```text
div>p → Tab

결과

예시 2

ul>li → Tab

결과

  - 

더 깊은 중첩

div>ul>li → Tab

결과

  

    - 

클래스와 함께

div.container>h1.title → Tab

결과

곱셈을 이용한 반복 요소

*를 사용하여 여러 복사본을 만들 수 있습니다.

예시 1

li*3 → Tab

결과

- 

- 

- 

예시 2

div.box*4 → Tab

결과

중첩 사용

ul>li*5 → Tab

결과

  - 

  - 

  - 

  - 

  - 

Emmet 치트 시트 및 예제

Emmet을 사용해 HTML을 더 빠르게 작성하기 위한 간편 참고 자료.

---

모든 것을 결합하기

이제 배운 내용을 결합해 보겠습니다.

예시 1 – 네비게이션 메뉴

축약형

nav>ul>li*4>a → Tab

결과

  

    - []()

    - []()

    - []()

    - []()

  

예시 2 – 카드 레이아웃

축약형

div.container>div.card*3>h2+p → Tab

결과

> **Note:** `+` creates sibling elements (elements at the same level).

---

## `+` 로 형제 요소 만들기

`+` 를 사용하여 요소를 서로 옆에 배치합니다 (형제 요소).

### 간단한 형제 쌍

**약어**

```emmet
h1+p → Tab

결과

## 

다중 형제 요소

약어

h1+p+p → Tab

결과

## 

복합 예시

축약어

header>h1+nav>ul>li*3 → Tab

결과

  - 

  - 

  - 

---

## Emmet을 이용한 HTML 보일러플레이트

전체 HTML 문서를 만들 때 가장 유용한 단축키입니다.

### 단축키

```emmet
! → Tab

결과

  
  
  Document

대안: html:5 → Tab은 동일한 결과를 생성합니다.

실용 예제

예제 1 – 블로그 포스트 구조

축약어

article>h1.title+p.meta+div.content>p*3 → Tab

결과

### 예제 2 – 간단한 폼

**축약형**

```emmet
form>input[type="text"]+input[type="email"]+button{Submit} → Tab

결과

  
  
  Submit

예제 3 – 표

축약형

table>tr*3>td*4 → Tab

결과

---

Emmet 치트 시트

| | **Siblings** |div+p|

| | **Multiplication** |li*3|-

| | **Boilerplate** |!orhtml:5` | 전체 HTML 템플릿 (위 참조) |

초보자를 위한 팁

1. 간단하게 시작하기 – div, p, h1 로 연습하세요.
2. 매일 사용하기 – 타이핑을 많이 할수록 더 빨라집니다.
3. 모두 외우려 하지 않기 – 가장 필요하고 자주 쓰는 단축키만 익히세요.
4. 각 예제 직접 해보기 – VS Code를 열고 약어를 직접 입력해 보세요.
5. 기억하기: Emmet는 선택 사항이며, 언제든지 HTML을 수동으로 작성할 수 있습니다.

일반적인 실수

• Tab 키를 누르는 것을 잊음 – 약어를 입력한 뒤 Tab 키를 눌러 확장합니다.

• 약어에 오타

  dvi.container   → Won’t work
  div.container   → Works!

• 결과를 확인하지 않음 – 항상 생성된 마크업을 검토하고 필요하면 조정하세요.

---

요약

• Emmet = HTML을 빠르게 작성하기 위한 단축키.
• 작동 방식:
  1. 약어를 입력합니다.
  2. Tab 키를 누릅니다.
  3. Emmet가 전체 HTML로 확장합니다.

주요 기호

• . – 클래스
• # – ID
• > – 자식 (중첩)
• + – 형제
• * – 반복
• [] – 속성
• {} – 텍스트 내용
• ! – HTML 기본 템플릿

가장 유용한 단축키

• ! → 전체 HTML 템플릿
• div.container>ul>li*5 → 빠른 리스트 구조
• form>input[type]*3 → 간단한 폼

오늘 바로 Emmet을 사용해 보세요. 이제는 Emmet 없이 코딩했던 시절이 믿기 어려울 것입니다!