Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow
Emmet (에밋)을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다!! 👏🏽👏🏼👏🏻
VS Code는 emmet을 기본적으로 지원하고 Tab
키를 통해 사용한다.
>
>
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
+
+
div>p+span
<div>
<p></p>
<span></span>
</div>
^
^
div>ul>li^p+a
<div>
<ul>
<li></li>
</ul>
<p></p>
<a href=""></a>
</div>
^
를 여러번 입력하면 입력한 만큼 올라갈 수 있음
div>ul>li^^div
<div>
<ul>
<li></li>
</ul>
</div>
<div></div>
*
*
div>ul>li*3
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
()
()
div>(header>ul>li*2)+footer
<div>
<header>
<ul>
<li></li>
<li></li>
</ul>
</header>
<footer></footer>
</div>
( 🎈 그룹화를 통해 `footer`는 `header`의 형제 요소가 되었다. )
div>header>ul>li*2+footer
로 작성하게 된다면? <div>
<header>
<ul>
<li></li>
<li></li>
<footer></footer>
</ul>
</header>
</div>
↘ 🧐 footer
가 li
의 형제요소가 되어버리니 주의하자
Emmet을 이용하면 이렇게나 쉽고 간편하게 요소들을 만들 수 있다.
뿐만 아니라 class나 id 값 혹은 다른 속성 값들을 넣어 만들 수도 있다.
.class
div.container
<div class="container"></div>
너무나 쉽게 container라는 클래스를 가진 div가 생성되었다.
기본은 div이기 때문에 div를 생략하고 - .container
라고 입력해도 결과는 같다!
#id
span#hello
<span id="hello"></span>
[attr]
td[title="bye" colspan=5]
<td title="bye" colspan="5"></td>
$
$
- 숫자를 순서대로 나열
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>
ul>li.item$@5*5
- @
뒤의 숫자부터 시작 <ul>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
</ul>
{}
{}
- {중괄호}
안에 넣으려는 텍스트를 입력
.fruit{banana}
<div class="fruit">banana</div>
.container>ul.list>li.list-item*5>a{list$}
<div class="container">
<ul class="list">
<li class="list-item"><a href="">list1</a></li>
<li class="list-item"><a href="">list2</a></li>
<li class="list-item"><a href="">list3</a></li>
<li class="list-item"><a href="">list4</a></li>
<li class="list-item"><a href="">list5</a></li>
</ul>
</div>
[ 단위 ]
w100
width: 100px; (기본이 px단위)
w50p
h100p
width: 50%;
height: 100%;
m10p30e5
margin: 10% 30em 5px;