Emmet abbreviations (에밋 약어)
Html | |
! + tab키 | 기본 html 셋팅화면 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body></body> </html> |
img + tab키 | <img src="" alt=""> |
h1 + tab키 | <h1></h1> |
(클래스 부여 . ) div.flower + tab키 |
<div class="flower"></div> |
(자식노드 >) div>ul>li |
<div> <ul> <li></li> </ul> </div> |
(형제노드 + ) div>ul+ol+div |
<div> <ul></ul> <ol></ol> <div></div> </div> |
(반복하기 *, 텍스트 입력 {} + 자동 넘버링 부여 $ ) div>ul>li*4{$} |
<div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> |
(그룹화 () ) div>(header>ul>li*2>a)+footer |
<div> <header> <ul> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </header> <footer></footer> </div> |
(그룹화 하지 않는 경우) div>header>ul>li*2>a+footer |
<div> <header> <ul> <li> <a href=""></a> <footer></footer> </li> <li> <a href=""></a> <footer></footer> </li> </ul> </header> </div> |
#page>#nav>ul>li.item{hello$}*5+dl^dd | <div id="page"> <div id="nav"> <ul> <li class="item">hello1</li> <li class="item">hello2</li> <li class="item">hello3</li> <li class="item">hello4</li> <li class="item">hello5</li> <dl></dl> </ul> <dd></dd> </div> </div> |
Css | |
w:200 tab키 | width: 200px; |
bc:orange tab키 | background-color: orange; |
.item{h100+w100} tab키 (단위 교체 가능) 기본값 → px p → % e → em x → ex r → rem |
.item{ height: 100px; width: 100px; } |
(margin, padding) .item{m100p+p100e} tab키 |
.item{ margin: 100%; padding: 100em; } |
.item {c#111} | .item {color: #111;} |
.item {fsz13} | .item {font-size: 13px;} |
** 자세한 emmet은 아래 링크로 들어가 확인 가능하다.
반응형