Emmet 문법

요소

html태그 입력하고 tab을 누르면 태그 완성

예 : div -> <div></div>

중첩 연산자

중첩 연산자는 불필요한 중복 작업을 간소화할 때 사용

child: >

>를 입력하면 종속되는 태그가 자동완성된다. ` 예 : div>ul>li `

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

sibling +

+를 입력하면 같은 레벨의 태그 완성 ` 예 : div+p+bq `

<div></div>
<p></p>
<blockquote></blockquote>

mutiplication: *

*를 입력하면 여러 개를 동시에 입력할 수 있다 예 : ul>li*3

<ul>
	<li></li>
    <li></li>
    <li></li>
</ul>

grouping: ()

복잡한 입력을 할 때는 ()를 사용 예 : div>(header>ul>li*2>a)+footer>p

<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

속성 연산자

속성 연산자는 id나 class 등 html 속성을 다룰 때 사용한다

ID와 Class

#은 id를, .은 class를 지정할 때 사용한다. 예: div#header+div.page+div#footer.class1.class2.class3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

커스텀 속성

[]를 사용하면 커스텀 속성을 입력할 수 있다. 예: td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

item numbering: $

*$를 입력하면 연속되는 리스트에 숫자를 순서대로 입력할 수 있다. 예: ul>li.item$*5

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>