Emmet
Emmet은 HTML,CSS의 자동완성 기능을 통해 작업 생산성을 향상시키는 기능입니다.바로가기
Emmet의 문법
| 문법 | 예제 | 설명 |
|---|---|---|
> |
div>ul>li | 여러개의 요소를 한번에 만들 때(child) |
+ |
div+p | 형제 요소를 한번에 만들 때(sibling) |
^ |
div^span | 부모 요소를에 추가하여 만들 때(climb-up) |
() |
(ul>li>a)+div | 그룹화하여 순서를 정할 때(Grouping) |
* |
div>ul>li*5 | 원하는 개수를 설정할 때(multiplickation) |
$ |
div>ul>li.img$*5 | 넘버를 순차적으로 적용할 때(Numbering) |
# |
#wrap.div | 아이디와 클래스 속성 설정 할 떄 |
[] |
td[rowspan="2"] | 요소의 속성 값을 설정 할 때 |
{} |
ul>li{header} | 텍스트 요소를 추가 할 때 설정 |
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
! or html:5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
link
<link rel="stylesheet" href="">
div+p+div
<div></div>
<p></p>
<div></div>
div>ul>li+4^^+p+div
<div>
<ul>
<li></li>
<4></4>
</ul>
</div>
<p></p>
<div></div>
(div>ul>li*4)+p+span
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<p></p>
<span></span>
#wrap>#header+#content+#footer
<div id="wrap">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
link<a[#]*10
link<<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
ul[id="ul" class="ul"]>li*8
<ul id="ul" class="ul">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
div>ul>li>a[#]{글씨}
<div>
<ul>
<li><a href="#">글씨</a></li>
</ul>
</div>
#list>ul>.list$*10>a[#]{link$}
<div id="list">
<ul>
<li class="list1"><a href="#">link1</a></li>
<li class="list2"><a href="#">link2</a></li>
<li class="list3"><a href="#">link3</a></li>
<li class="list4"><a href="#">link4</a></li>
<li class="list5"><a href="#">link5</a></li>
<li class="list6"><a href="#">link6</a></li>
<li class="list7"><a href="#">link7</a></li>
<li class="list8"><a href="#">link8</a></li>
<li class="list9"><a href="#">link9</a></li>
<li class="list10"><a href="#">link10</a></li>
</ul>
</div>
