Emmet 사용하기

KYJTHEYJ

Nov 27, 2025

Contents

Emmet 간략한 사용법

Emmet

HTML, XML 등 의 빠른 코딩을 위해 나온 플러그인
- VS Code 엔 기본적으로 내장되어 있음

간략한 사용법

기호	의미	예시
`!`	HTML 구조	`!`
`.`	클래스	`.box`
`#`	아이디	`#app`
`>`	자식	`div>p`
`+`	형제	`h1+p`
`*`	반복	`li*5`
`$`	넘버링	`item$`
`{}`	텍스트	`{안녕}`
`[]`	속성	`[href="#"]`
`()`	그룹	`(div>p)+span`
`:`	타입	`input:type`

! → HTML 기본 구조

<!-- 입력 -->
!

<!-- 결과 (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>

. → 클래스 입력

<!-- 입력 -->
.box

<!-- 결과 -->
<div class="box"></div>

# → 아이디 입력

<!-- 입력 -->
#app

<!-- 결과 -->
<div id="app"></div>

+ → 같은 동위 요소 추가 (형제 요소)

<!-- 입력 -->
div+p+span

<!-- 결과 -->
<div></div>
<p></p>
<span></span>

* → 반복하기

<!-- 입력 -->
div.topContainer*5

<!-- 출력 -->
<div class="topContainer"></div>
<div class="topContainer"></div>
<div class="topContainer"></div>
<div class="topContainer"></div>
<div class="topContainer"></div>

$ → 1부터 명시한 숫자까지하는 넘버링 (주로반복과 같이 사용)

<!-- 입력 -->
ul>li.item$*3

<!-- 결과 -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

<!-- 복수개 선언시 자릿수를 맞춰줌 -->
<!-- 입력 -->
ul>li.item$$*3

<!-- 결과 -->
<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>

<!-- @와 함께 사용시 사용할 시작 번호를 지정 -->
<!-- 입력 -->
ul>li.item$$@5*3

<!-- 결과 -->
<ul>
    <li class="item05"></li>
    <li class="item06"></li>
    <li class="item07"></li>
</ul>

<!-- -와 함께 사용시 역순 -->
<!-- 입력 -->
ul>li.item$$@-5*3

<!-- 결과 -->
<ul>
    <li class="item07"></li>
    <li class="item06"></li>
    <li class="item05"></li>
</ul>

<!-- 후속 요소에서 사용시엔 앞 넘버링을 그대로 따라감 -->
<!-- 입력 -->
div.item$*3>h2{제목 $}+p{내용 $}

<!-- 결과 -->
<div class="item1">
    <h2>제목 1</h2>
    <p>내용 1</p>
</div>
<div class="item2">
    <h2>제목 2</h2>
    <p>내용 2</p>
</div>
<div class="item3">
    <h2>제목 3</h2>
    <p>내용 3</p>
</div>

{} → 텍스트

<!-- 입력 -->
a{클릭}

<!-- 결과 -->
<a href="">클릭</a>

<!-- 입력 -->
ul>li*3{항목 $}

<!-- 결과 -->
<ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ul>

[] → 속성 설정

<!-- 입력 -->
script[src='scripts.js']

<!-- 출력 -->
<script src='scripts.js'>

() → 그룹핑

<!-- 입력 -->
div>(header>nav)+(main>section)

<!-- 결과 -->
<div>
    <header>
        <nav></nav>
    </header>
    <main>
        <section></section>
    </main>
</div>

<!-- 입력 -->
ul>(li>a)*3

<!-- 결과 -->
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

Contents

Emmet 간략한 사용법

간략한 사용법

기호	의미	예시
`!`	HTML 구조	`!`
`.`	클래스	`.box`
`#`	아이디	`#app`
`>`	자식	`div>p`
`+`	형제	`h1+p`
`*`	반복	`li*5`
`$`	넘버링	`item$`
`{}`	텍스트	`{안녕}`
`[]`	속성	`[href="#"]`
`()`	그룹	`(div>p)+span`
`:`	타입	`input:type`

! → HTML 기본 구조

<!-- 입력 -->
!

<!-- 결과 (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>

. → 클래스 입력

<!-- 입력 -->
.box

<!-- 결과 -->
<div class="box"></div>

# → 아이디 입력

<!-- 입력 -->
#app

<!-- 결과 -->
<div id="app"></div>

+ → 같은 동위 요소 추가 (형제 요소)

<!-- 입력 -->
div+p+span

<!-- 결과 -->
<div></div>
<p></p>
<span></span>

* → 반복하기

<!-- 입력 -->
div.topContainer*5

<!-- 출력 -->
<div class="topContainer"></div>
<div class="topContainer"></div>
<div class="topContainer"></div>
<div class="topContainer"></div>
<div class="topContainer"></div>

$ → 1부터 명시한 숫자까지하는 넘버링 (주로반복과 같이 사용)

<!-- 입력 -->
ul>li.item$*3

<!-- 결과 -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

<!-- 복수개 선언시 자릿수를 맞춰줌 -->
<!-- 입력 -->
ul>li.item$$*3

<!-- 결과 -->
<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>

<!-- @와 함께 사용시 사용할 시작 번호를 지정 -->
<!-- 입력 -->
ul>li.item$$@5*3

<!-- 결과 -->
<ul>
    <li class="item05"></li>
    <li class="item06"></li>
    <li class="item07"></li>
</ul>

<!-- -와 함께 사용시 역순 -->
<!-- 입력 -->
ul>li.item$$@-5*3

<!-- 결과 -->
<ul>
    <li class="item07"></li>
    <li class="item06"></li>
    <li class="item05"></li>
</ul>

<!-- 후속 요소에서 사용시엔 앞 넘버링을 그대로 따라감 -->
<!-- 입력 -->
div.item$*3>h2{제목 $}+p{내용 $}

<!-- 결과 -->
<div class="item1">
    <h2>제목 1</h2>
    <p>내용 1</p>
</div>
<div class="item2">
    <h2>제목 2</h2>
    <p>내용 2</p>
</div>
<div class="item3">
    <h2>제목 3</h2>
    <p>내용 3</p>
</div>

{} → 텍스트

<!-- 입력 -->
a{클릭}

<!-- 결과 -->
<a href="">클릭</a>

<!-- 입력 -->
ul>li*3{항목 $}

<!-- 결과 -->
<ul>
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ul>

[] → 속성 설정

<!-- 입력 -->
script[src='scripts.js']

<!-- 출력 -->
<script src='scripts.js'>

() → 그룹핑

<!-- 입력 -->
div>(header>nav)+(main>section)

<!-- 결과 -->
<div>
    <header>
        <nav></nav>
    </header>
    <main>
        <section></section>
    </main>
</div>

<!-- 입력 -->
ul>(li>a)*3

<!-- 결과 -->
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>