업데이트:

Emmet은 HTML 태그와 CSS 속성을 자동완성시켜주는 확장기능이다. 대부분의 에디터에 기본 내장되어 있을 건데 없으면 설치하셈(vscode는 기본 내장).

주관적으로 적어본 유용한 자동완성 리스트

HTML

HTML 초기 세팅

! + Tab

1
2
3
4
5
6
7
8
9
10
11
12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

자식 태그 및 숫자만큼 생성

ul>li*3

1
2
3
4
5

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

형제 태그

div+ul

1
2

<div></div>
<ul></ul>

클래스, 아이디

button.btn
button#btn

1
2

<button class="btn"></button>
<button id="btn"></button>

태그 속성

a[href=”#”]

1

<a href="#"></a>

태그 내용

div{이것은 div}

1

<div>이것은 div</div>

클래스, 아이디 넘버링

ul>li.item$*3

1
2
3
4
5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

더미 텍스트

lorem

1

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse iste non quibusdam harum deserunt, officiis vel optio porro culpa quae minus? Labore error veritatis fugiat asperiores excepturi! Totam, temporibus iusto?</p>

CSS

속성

.test{m10}
.test{ml10}
.test{dsb}
.test{w100%}

1
2
3
4

.test { margin: 10px; }
.test { margin-left: 10px; }
.test { display: block; }
.test { width: 100%; }

나머지는 유추해보거나 후술할 Emmet 사전을 참고하면 된다. 참고로 코드 입력 후 Tab키 치셈.

마지막으로

작업시간 단축에 효과가 있는지는 모르겠음. 어떨 땐 쓰기도 하고 일일이 타이핑할 때도 있고..

자세한 정보가 궁금하면 Emmet 사전에 가서 읽어보자~