Emmet 단축키 정리

Emmet 의 단축키를 정리한다. Notepad++ 의 Emmet 실행 단축키는 Ctrl+Alt+Enter 이다. 그리고 모든 단축키는 아래 사이트에 있다.

https://docs.emmet.io/cheat-sheet/

단축키가 너무 많아서 도저히 다 외울수는 없다. 장담컨데 Emmet 을 만든 Sergey Chikuyonok 도 전부를 외우지는 못할게다. 자기가 주로 사용하는 영역에 대해서만 잘 알고 있으면 된다. 거의 작은 사전 수준이다.

[기본문법]

! – html 기본 구조

> 아래로 (Child)

^ 위로 (Climb-up)

+ 대등 (Sibling)

* 반복(Multiplication)

() 그룹(Grouping)

$ 넘버링(item Numbering)

[] 속성

{} 텍스트

# 아이디(ID)

. 클래스(Class)



아래는 HTML 문서에서 적용한 Emmet 내용 중 자주 사용할 만한 것들과 예제들이다.

Emmet 명령은 **** 뒤에 붙여서 구분했다. **** 뒤의 명령을 입력하면 그 아래에 있는 내용이 출력된다.



**** !	
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>


**** div
<div></div>


**** div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>


**** div>p+bq
<div>
<p></p>
<blockquote></blockquote>
</div>


**** div+div>p>span+em^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>


**** div>p>ul>li*2^^bq
<div>
<p>
<ul>
<li></li>
<li></li>
</ul>
</p>
<blockquote></blockquote>
</div>


**** div>div>p>ul>li*2^^^^^^^bq
<div>
<div>
<p>
<ul>
<li></li>
<li></li>
</ul>
</p>
</div>
</div>
<blockquote></blockquote>


**** div>(p>ul>li*3)*2
<div>
<p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</p>
<p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</p>
</div>


**** td[title colspan]
<td title="" colspan=""></td>

**** td[title="LudensCode" colspan=2]{처음코딩, LudensCode}
<td title="LudensCode" colspan="2">처음코딩, LudensCode</td>


**** a
<a href=""></a>

**** a{Click Me}
<a href="">Click Me</a>

**** a:link
<a href="http://"></a>

**** a[href="luco.cc"]{pp}
<a href="luco.cc">pp</a>


**** div#header+div.nav+div#footer.luco
<div id="header"></div>
<div class="nav"></div>
<div id="footer" class="luco"></div>


**** ul>li.item$*4
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ul>


**** ul>li.item$*12
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
<li class="item11"></li>
<li class="item12"></li>
</ul>


**** ul.myitem>li#item$$*12
<ul class="myitem">
<li id="item01"></li>
<li id="item02"></li>
<li id="item03"></li>
<li id="item04"></li>
<li id="item05"></li>
<li id="item06"></li>
<li id="item07"></li>
<li id="item08"></li>
<li id="item09"></li>
<li id="item10"></li>
<li id="item11"></li>
<li id="item12"></li>
</ul>


**** .container>ul.list>li#list-item$*5>a{list$}
<div class="container">
<ul class="list">
<li id="list-item1"><a href="">list1</a></li>
<li id="list-item2"><a href="">list2</a></li>
<li id="list-item3"><a href="">list3</a></li>
<li id="list-item4"><a href="">list4</a></li>
<li id="list-item5"><a href="">list5</a></li>
</ul>
</div>



**** .container>ul.list>li#list-item$*5>a{list$@-10}
<div class="container">
<ul class="list">
<li id="list-item1"><a href="">list14</a></li>
<li id="list-item2"><a href="">list13</a></li>
<li id="list-item3"><a href="">list12</a></li>
<li id="list-item4"><a href="">list11</a></li>
<li id="list-item5"><a href="">list10</a></li>
</ul>
</div>



**** .container>ul.list>(li#list-item$>a[href="http://luco.com/item$"]{chap $$@-1})*5
<div class="container">
<ul class="list">
<li id="list-item1"><a href="http://luco.com/item1">chap 05</a></li>
<li id="list-item2"><a href="http://luco.com/item2">chap 04</a></li>
<li id="list-item3"><a href="http://luco.com/item3">chap 03</a></li>
<li id="list-item4"><a href="http://luco.com/item4">chap 02</a></li>
<li id="list-item5"><a href="http://luco.com/item5">chap 01</a></li>
</ul>
</div>



**** ul>li.item$@-*5
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>


**** li.generic-item>lorem6.item*4
<li class="generic-item">
<div class="item">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="item">Voluptate, possimus voluptates reprehenderit veritatis molestias!</div>
<div class="item">Dolore similique officiis dolores odit. Distinctio!</div>
<div class="item">Recusandae, reiciendis tenetur ipsam in nihil.</div>
</li>


**** anyThing
<anyThing></anyThing>



**** table>tr>th*3^(tr>td*3)*2
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>






Categories IT

Leave a Comment