프론트엔드/HTML
Emmet
by alswlfl
2022. 11. 18.
Emmet
HTML과 CSS의 자동완성 기능을 제공하여 작성시간을 단축시켜주는 확장 기능
<body>
<!-- 자식 노드 > -->
<!-- div>ul>li -->
<div>
<ul>
<li></li>
</ul>
</div>
<!-- 형제 노드 + -->
<!-- div>ul+ol+div -->
<div>
<ul></ul>
<ol></ol>
<div></div>
</div>
<!-- 반복하기 * -->
<!-- div>ul>li*3 -->
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- 아이디 # -->
<!-- span#item -->
<span id="item"></span>
<div id="item"></div>
<!-- 클래스 . -->
<!-- span.title -->
<span class="title"></span>
<div class="title"></div>
<!-- 콘텐츠 {} -->
<!-- p.container{Hello World~!} -->
<p class="container">Hello World~!</p>
<!-- 자동 넘버링 $ -->
<!-- p.container{items$}*5 -->
<p class="container">items1</p>
<p class="container">items2</p>
<p class="container">items3</p>
<p class="container">items4</p>
<p class="container">items5</p>
</body>