Emmet

Emmet은 HTML,CSS의 자동완성 기능을 통해 작업 생산성을 향상시키는 기능입니다. 바로가기

Emmet의 문법

문법 예제 설명
> div>ul>lu 여러개의 요소를 한번에 만들때 사용합니다.(child)
+ div+p 형제 요소를 한번에 만들때 사용합니다.(sibling)
^ div>p^span 부모 요소를 추가하여 만들때 사용합니다.(Climb-up)
() (ul>li>a)+div 그룹화하여 순서를 정할 때 사용합니다.(Grouping)
* div>ul>li*5 원하는 개수를 설정할 때 사용합니다.(Multiplickation)
$ div>lu>lu.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>Document</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>
								        <li></li>
								        <li></li>
								        <li></li>
								    </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

								<div id="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>
								</div>

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>.link$*10>a[#]+{link$}

								 <div id="list">
								     <ul>
								         <li class="link1"><a href="#"></a>link1</li>
								         <li class="link2"><a href="#"></a>link2</li>
								         <li class="link3"><a href="#"></a>link3</li>
								         <li class="link4"><a href="#"></a>link4</li>
								         <li class="link5"><a href="#"></a>link5</li>
								         <li class="link6"><a href="#"></a>link6</li>
								         <li class="link7"><a href="#"></a>link7</li>
								         <li class="link8"><a href="#"></a>link8</li>
								         <li class="link9"><a href="#"></a>link9</li>
								         <li class="link10"><a href="#"></a>link10</li>
								     </ul>
								 </div>