[HTML] Emmet 문법

 

https://www.youtube.com/watch?v=m7wsrVQsVjI&list=PLv2d7VI9OotQ1F92Jp9Ce7ovHEsuRQB3Y&index=11

 

유튜브 드림코딩으로 공부한 내용입니다. 

 

🐚 기본 형식

! + tab

 

🐚 div 태그 빠르게 작성

.className 후 tab

<div class="className"></div>

#idNum 후 tab

<div id="idNum"></div>

 

 

div 가 아닌 태그는 . 과 # 앞에 H1, p 등을 적어주면 된다. 

 

🐚 부모,자식, 형제 노드

div 안에 ul 안에 li

 

부모 >

div>ul>li

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

 

형제 +

div>ul+li

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

 

반복 *

ul>li*5

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

 

🐚 태그 안에 텍스트 입력 {}

p{hello}

<p>hello</p>

 

🐚 더미용 텍스트 생성

p>lorem

🐚 숫자 자동 생성 $

p.class${item $}*5

<p class="class1">item 1</p>
<p class="class2">item 2</p>
<p class="class3">item 3</p>
<p class="class4">item 4</p>
<p class="class5">item 5</p>