서브라임텍스트 CTRL+E로 자동완성
0) html
input) html:5
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
1) 단계별
input) div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
2) 형제
input) div+p+strong
<div></div>
<p></p>
<strong></strong>
3) 자식 + 형제
input) div+div>p>span+strong
<div></div>
<div>
<p><span></span><strong></strong></p>
</div>
4) 부모로 이동
input) div+div>p>span+strong+^div^p
<div></div>
<div>
<p><span></span><strong></strong></p>
<div></div>
</div>
<p></p>
5) 여러개 생성
input) ul>li*3>a
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
6) 속성 삽입
input) ul>li*2>a[href="#" target="_blank"]
<ul>
<li><a href="#" target="_blank"></a></li>
<li><a href="#" target="_blank"></a></li>
</ul>
7) 텍스트 삽입
input) ul>li*3>a[href="#"]{메인메뉴}
<ul>
<li><a href="#">메인메뉴</a></li>
<li><a href="#">메인메뉴</a></li>
<li><a href="#">메인메뉴</a></li>
</ul>
8) 숫자 삽입
input) ul>li*3>a[href="#"]{메인메뉴$}
<ul>
<li><a href="#">메인메뉴1</a></li>
<li><a href="#">메인메뉴2</a></li>
<li><a href="#">메인메뉴3</a></li>
</ul>
9) 응용
input) ul>li*3>a[href="#"]{메인메뉴$}+ul>li*2>a[href="#"]{서브메뉴$}
<ul>
<li>
<a href="#">메인메뉴1</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
<li><a href="#">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">메인메뉴2</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
<li><a href="#">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">메인메뉴3</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
<li><a href="#">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">메인메뉴4</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
<li><a href="#">서브메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">메인메뉴5</a>
<ul>
<li><a href="#">서브메뉴1</a></li>
<li><a href="#">서브메뉴2</a></li>
<li><a href="#">서브메뉴3</a></li>
<li><a href="#">서브메뉴4</a></li>
</ul>
</li>
</ul>
10) 그룹
input)
<header>
<h3><a href="">logo</a></h3>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
11) id 및 class
input) #header>(.logo>h3>a{logo})+(ul>li*5>a)
<div id="header">
<div class="logo">
<h3><a href="">logo</a></h3>
</div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
12) numbering
input) .test$*3
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
input) .test$$$*3
<div class="test001"></div>
<div class="test002"></div>
<div class="test003"></div>
input) .test$@3*3
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
input) .test$@-1*3
<div class="test3"></div>
<div class="test2"></div>
<div class="test1"></div>
input) .test$@-5*3
<div class="test7"></div>
<div class="test6"></div>
<div class="test5"></div>
var a=0;
