VS Code, codepen 등에서 사용할 수 있는 emmet 단축어 정리.
단축어 입력 후, 엔터가 아닌 Tab키로 입력 가능.
“>” 를 사용하여 하위 요소 생성
section>div>span
<section>
<div>
<span>요소</span>
</div>
</section>
“+“를 사용하여 형제 요소 생성
h3+ul>li
<h3>타이틀</h3>
<ul>
<li>리스트</li>
</ul>
“^“를 사용하여 상위 요소 생성 (입력 갯수만큼 상위 레벨로 이동 가능)
div>h3+ul>li^+p+a
<div>
<h3>타이틀</h3>
<ul>
<li>리스트</li>
</ul>
<p>문장</p>
<a href="#">링크</a>
</div>
“*“를 사용하여 동일 요소 생성 (생성 숫자를 입력)
div>ul*2>li*2
<div>
<ul>
<li>리스트</li>
<li>리스트</li>
</ul>
<ul>
<li>리스트</li>
<li>리스트</li>
</ul>
</div>
“()”를 사용하여 요소 그룹화 가능
div>(section>article>div*2)+p
<div>
<section>
<article>
<div></div>
<div></div>
</article>
</section>
<p></p>
</div>
<!-- 괄호가 빠진 경우, p는 section과 형제 요소가 아닌 article과 형제 요소가 된다. -->
“{}“를 사용하여 텍스트 입력 가능
p{텍스트 입력}
<p>텍스트입력</p>
“$“를 사용하여 요소에 차례로 연속숫자를 입력 가능
ul>li*5{아이템$}
<ul>
<li>아이템1</li>
<li>아이템2</li>
<li>아이템3</li>
<li>아이템4</li>
<li>아이템5</li>
</ul>
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>
“.”는 요소 클래스, “#”는 요소 아이디 그리고 요소 속성은 “[attr]”로 추가.
div.wrapper or div#wrapper or label[for="id_name"]/input[type="text" name="input_name"]
<div class="wrapper"></div>
<div id="wrapper"></div>
<label for="id_name"></label>
<input type="text" name="input_name">
클래스
Leave a Reply