Emmet

Emmet이란..?

html을 빠르게 작성할 수 있도록 도와주는 plug-in.
text editor에 기본적으로 들어가있어 빠르게 코드를 짤 수 있다.

Emmet 문법

1. ! + tap : html 자동완성

2. 태그 이름 + tap : 태그 자동완성

• 태그 + .class or 태그 + #id : 선택자 포함된 태그 완성
• 태그 이름 없이 .class나 #id만 입력할 경우 자동으로 div태그 안에 들어가게 된다.

3. 부모, 자식, 형제 노드

div>ul>li
<!--'>'를 통해 부모자식태그를 만들 수 있다-->
<div>
	<ul>
    	<li></li>
    </ul>
</div>
div>ul+ol
<!--'+'를 통해 형제태그를 만들 수 있다-->

4. 반복해서 만들기

ul>li*5
<!--'*'를 통해 여러개를 만들 수 있다-->
<ul>
	<li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
div>ul>li^ol
<!--'^'를 통해 부모의 형제 태그로 만들 수 있다-->
<div>
	<ul>
    	<li></li>
    </ul>
    <ol></ol>
</div>

5. 그룹화 해서 만들기

div>(header>ul>li*2>a)+footer>p
<!--'()'를 활용해 그룹화 할 수 있다-->
<div>
	<header>
    	<ul>
        	<li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
    	<p></p>
    </footer>
</div>

6. 텍스트 입력하기

p{hello}
<!--'{}'안에 텍스트를 입력하면 된다-->
<p>hello</p>

7. 자동으로 숫자 할당

p.${item $}*5
<!--'$'는 자동으로 숫자를 할당해준다-->
<p class="1">item 1</p>
<p class="2">item 2</p>
<p class="3">item 3</p>
<p class="4">item 4</p>
<p class="5">item 5</p>

8. 더미용 텍스트 생성

p>lorem
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est accusamus veritatis nemo modi quo omnis itaque quaerat consequatur in officia quod, aspernatur ex mollitia. Earum similique ad possimus, veniam corrupti!</p>
p>lorem4
<!--lorem옆에 숫자를 붙이면 단어의 수를 정할 수 있다-->
<p>Lorem ipsum dolor sit.</p>