에밋 문법(Emmet)
html, xml, xsl 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인
HTML 태그
자식(하위) 요소 : >
div>ul>li (+ Enter 클릭 시)
<div>
<ul>
<li></li>
</ul>
</div>
형제 요소: +
div>p+span (+ Enter 클릭 시)
<div>
<p></p>
<span></span>
</div>
올라가기: ^
div>ul>li^p+a (+ Enter 클릭 시)
<div>
<ul>
<li></li>
</ul>
<p></p>
<a href=""></a>
</div>
div>ul>li^^div (+ Enter 클릭 시)
<div>
<ul>
<li></li>
</ul>
</div>
<div></div>
반복하기: *
div>ul>li*3 (+ Enter 클릭 시)
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
그룹화: ()
div>(header>ul>li*2)+footer (+ Enter 클릭 시)
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer></footer>
</div>
<!-- 그룹화를 통해 `footer`는 `header`의 형제 요소가 되었다. -->
HTML 속성
클래스: .class명
div가 기본이므로 생략해도 결과 같음
div.container (+ Enter 클릭 시)
<div class="container"></div>
아이디: #id명
span#hello (+ Enter 클릭 시)
<span id="hello"></span>
속성: [attr명]
td[title="bye" colspan=5] (+ Enter 클릭 시)
<td title="bye" colspan="5"></td>
넘버링: $
ul>li.item$*5 (+ Enter 클릭 시)
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
$@는 뒤의 숫자부터 시작
ul>li.item$@5*5 (+ Enter 클릭 시)
<ul>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
</ul>
텍스트: {넣고자하는텍스트}
.fruit{banana} (+ Enter 클릭 시)
<div class="fruit">banana</div>
.container>ul.list>li.list-item*5>a{list$} (+ Enter 클릭 시)
<div class="container">
<ul class="list">
<li class="list-item"><a href="">list1</a></li>
<li class="list-item"><a href="">list2</a></li>
<li class="list-item"><a href="">list3</a></li>
<li class="list-item"><a href="">list4</a></li>
<li class="list-item"><a href="">list5</a></li>
</ul>
</div>
.container>.item*8>{$} (+ Enter 클릭 시)
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>