HTML작업속도를 향상하는 Emmet 단축기

728x90

1.HTML5 boilerplate (표준문서): "!"사용

"!"+"tab"

<!DOCTYPE html>
<html lang="en">
<head>
         <meta charset="UTF-8">
         <title>Document</title>
</head>
<body>

</body>
</html>

 

2.하위 요소 생성: ">"사용

header>ul>li치고  

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

 

3. 동급 요소 생성: "+"사용

section>artcle>h2+p

<section>
   <artcle>
     <h2></h2>
   <p></p>
</artcle>
</section>

 

4. 반복 태그 생성: "*"사용

ul>li*4

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

 

5.CSS class 와 id 설정: "." 와 "#"사용

ul#menu>li.item*3

<ul id="menu">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

 

6.Grouping: "()"사용

.container>(header>nav>ul>li*3)+(#content>section)+footer

<div class="container">
   <hesder>
      <nav>
         <ul>
             <li></li>
             <li></li>
             <li></li>
         </ul>
      </nav>
   </hesder>
   <div id="content">
   <section></section>
   </div>
   <footer></footer>
</div>

 

7.속성 (attribute)있는 태그: "[ ]"사용

td[title="name" colspan="4"]

<td title="name" colspan="4"></td>

 

8.테스트가 있는 태그.{}중괄호 안에 {텍스트}입력

a.button{Clik Me}

<a href="" class="button">Click Me</a>

 

9.넘버링(숫자나열): "$"사용

ul.list>li.item$*5>{$}

<ul class="list">
    <li class="item1">1</li>
    <li class="item2">2</li>
    <li class="item3">3</li>
    <li class="item4">4</li>
    <li class="item5">5</li>
</ul>

 

10.주석 입력

Ctrl+/

<!-- -->

 

Emmet Docs 에서 참고 했습니다.