# Emmet 빠른 참조

*HTML 약어, 중첩, 속성, CSS 단축키*

> Source: Emmet Documentation (emmet.io) · MIT

## HTML 약어

### 요소 단축키

| Command | Description |
|---------|-------------|
| `div` | <div></div> 생성 |
| `p` | <p></p> 생성 |
| `h1` | <h1></h1> 생성 |
| `a` | <a href=""></a> 생성 |
| `img` | <img src="" alt=""> 생성 |
| `input` | <input type="text"> 생성 |
| `btn` | <button></button> 생성 |
| `link:css` | CSS 스타일시트 link 태그 |

### HTML 보일러플레이트

```
!    → full HTML5 boilerplate
doc  → HTML5 doctype only
```

### 암시적 태그

| Command | Description |
|---------|-------------|
| `.class` | <div class="class">로 변환 |
| `ul>.item` | 자식이 <li class="item">로 변환 |
| `table>.row` | 자식이 <tr class="row">로 변환 |
| `select>.opt` | 자식이 <option class="opt">로 변환 |

## 중첩

### 중첩 연산자

| Command | Description |
|---------|-------------|
| `>` | 자식 요소 |
| `+` | 형제 요소 |
| `^` | 한 레벨 위로 |
| `^^` | 두 레벨 위로 |

### 중첩 예시

```
div>ul>li       → nested child elements
div+p+footer    → sibling elements
div>p>span^h2   → climb up: h2 is sibling of p
div>p>span^^h2  → climb up twice: h2 sibling of div
```

## 그룹화

### 괄호 그룹화

```
div>(header>nav)+main+footer
→ groups header>nav as a unit
(div>h2+p)*3
→ repeat grouped structure 3 times
```

### 복잡한 레이아웃

```
.container>(header>h1+nav>ul>li*3)+main+footer
→ full page layout skeleton
```

## 곱셈

### 반복 연산자

| Command | Description |
|---------|-------------|
| `li*5` | <li> 요소 5개 생성 |
| `div>p*3` | 자식 단락 3개를 가진 div |
| `ul>li*4>a` | 링크를 포함한 항목 4개의 목록 |
| `tr>td*4` | 셀 4개인 테이블 행 |

### 곱셈 예시

```
ul>li.item*5           → 5 list items with class
table>tr*3>td*4        → 3x4 table grid
.row>.col*3>p{Content} → 3-column row with text
```

## 번호 매기기

### 항목 번호 매기기 ($)

| Command | Description |
|---------|-------------|
| `$` | 순차 번호 (1, 2, 3...) |
| `$$` | 두 자리 제로 패딩 (01, 02...) |
| `$$$` | 세 자리 제로 패딩 (001, 002...) |
| `$@3` | 3부터 번호 시작 |
| `$@-` | 역순 번호 (내림차순) |
| `$@-3` | 3부터 역순 번호 |

### 번호 매기기 예시

```
li.item$*3    → item1, item2, item3
li.item$$*3   → item01, item02, item03
li.item$@3*3  → item3, item4, item5
```

## 속성

### ID 및 클래스

| Command | Description |
|---------|-------------|
| `#id` | id 속성 추가: <div id="id"> |
| `.class` | 클래스 추가: <div class="class"> |
| `.c1.c2` | 다중 클래스: class="c1 c2" |
| `#main.container` | ID + 클래스 조합 |

### 커스텀 속성

```
td[colspan=2]        → <td colspan="2">
a[href=#]{Click}     → <a href="#">Click</a>
input[type=email placeholder=Email]
div[data-id=$]*3     → data-id="1", "2", "3"
```

## 텍스트

### 텍스트 내용 ({})

| Command | Description |
|---------|-------------|
| `p{Hello}` | <p>Hello</p> |
| `a{Click me}` | <a href="">Click me</a> |
| `p{Item $}*3` | Item 1, Item 2, Item 3 |

### 중첩과 텍스트

```
p>{Click }+a{here}+{ to continue}
→ <p>Click <a href="">here</a> to continue</p>
ul>li{Item $}*4
→ list with numbered items
```

## CSS 약어

### 박스 모델

| Command | Description |
|---------|-------------|
| `m10` | margin: 10px; |
| `m10-20` | margin: 10px 20px; |
| `p10` | padding: 10px; |
| `w100` | width: 100px; |
| `w100p` | width: 100%; |
| `h50` | height: 50px; |

### 디스플레이 & 포지션

| Command | Description |
|---------|-------------|
| `d:f` | display: flex; |
| `d:g` | display: grid; |
| `d:n` | display: none; |
| `d:b` | display: block; |
| `pos:r` | position: relative; |
| `pos:a` | position: absolute; |

### Flexbox

| Command | Description |
|---------|-------------|
| `jc:c` | justify-content: center; |
| `jc:sb` | justify-content: space-between; |
| `ai:c` | align-items: center; |
| `fxd:c` | flex-direction: column; |
| `fw:w` | flex-wrap: wrap; |

### 타이포그래피 & 색상

| Command | Description |
|---------|-------------|
| `fz14` | font-size: 14px; |
| `fw:b` | font-weight: bold; |
| `ta:c` | text-align: center; |
| `c:#333` | color: #333; |
| `bgc:#fff` | background-color: #fff; |