[Emmet] 마크업 언어를 좀 더 빠르게 쓰자
Emmet 이란?
- HTML과 CSS의 작성의 시간을 단축 시켜주는 확장 기능
- 사용법:
keyword입력 후tab키 입력 - VScode Setting:
"emmet.triggerExpansionOnTab": true
Emmet 사용하기
1) HTML 문서
!+tab
2) 자식노드
-
>를 사용하여, 자식 요소를 생성할 수 있다. -
div>ul>li+tab<div> <ul> <li></li> </ul> </div>
3) 형제노드
-
+를 사용하여, 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다. -
div>ul+ol+div+tab<div> <ul></ul> <ol></ol> <div></div> </div>
4) 반복하기
-
*를 곱셈 연산자로 여러개의 요소를 생성할 수 있다. -
div>li*3입력 후 Tab키<div> <li></li> <li></li> <li></li> </div>
5) 그룹화
-
()를 사용하여 괄호안에 있는 코드를 묶어 그룹화를 시켜, 요소간 레벨을 맞춘다. -
div>(header>ul>li*2>a)+footer+tab<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer></footer> </div>
# 클래스
-
default 값은
div이기 때문에div.item말고.item으로 생략할 수 있다. -
.item+tab→<div class="item"></div> -
p.item+tab→<p class="item"></p> -
(p.children_$)*5+tab<p class="chilren_1"></p> <p class="chilren_2"></p> <p class="chilren_3"></p> <p class="chilren_4"></p> <p class="chilren_5"></p>
7) 아이디 부여
-
#item+tab<div id="item"></div>
8) 텍스트 입력
-
p{hi hello}+tab -
p 태그안에 hi hello라는 텍스트가 입력된다.
<p>hi hello</p>
9) 자동 넘버링 부여
-
$값에 숫자가 입력된다.
-
p{$}*5+tab<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p>
10) 응용
#page>#nav>ul>li.item{hello$}*5+dl^dd + tab
<div id="page">
<div id="nav">
<ul>
<li class="item">hello1</li>
<li class="item">hello2</li>
<li class="item">hello3</li>
<li class="item">hello4</li>
<li class="item">hello5</li>
<dl></dl>
</ul>
<dd></dd>
</div>
</div>VScode Emmet 활성법
"emmet.triggerExpansionOnTab": true,Reference