Emmet은 Html을 조금 더 편하게 작성할 수 있도록 도와주는 패키지이다.
Atom, Braket에디터 등에서 패키지로 검색하여 다운받을 수 있다.


Emmet?

Atom에디터의 커스텀 패키지중 하나로 html코드작성을 쉽게 할 수 있도록 다양한 기능을 지원해주는 패키지로, html코드작성 능률을 비약적으로 높여줄 수 있다.

기본 사용법

Emmet은 emmet만의 명령어를 입력 후 'tab'키를 누르게 되면 알아서 해당 명령어에 해당되는 html코드를 작성해준다.

▶ !

html기본 형식의 코드를 만들어준다
ex ) !

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
    <body>
    </body>
    </html>


▶ 태그명

태그명을 <>없이 입력해도 자동적으로 열고닫는 태그를 만들어준다
ex ) body

    <body></body>


▶ 하위태그 만들기 ( > )

’>’기호를 이용하면 태그내부에 태그를 넣는다는 의미로 사용된다.
ex ) nav>ul>li>a

<nav>
	<ul>
		<li>
			<a></a>
		<li>
	<ul>
<nav>


▶ 형제태그 만들기 ( + )

’+’기호를 이용하면 같은 레벨에 있는 태그를 만들 수 있다.
ex ) div+p+a

<div></div> 
<p></p> 
<a></a>


▶ 하위태그를 만들다가 밖으로 빼기 ( ^ )

’^’기호를 이용하여 하위태그 작성 중 위치를 다시 수정할 수 있다. ( 두번 쓰면(^^) 두번 밖으로 이동 )
많이 쓰이지는 않는기능..
ex ) nav>ul>li^a

<nav>
    <ul>
        <li></li>
    </ul>
    <a></a>	
</nav>


▶ 반복 태그 ( * )

‘*‘기호를 이용하여 반복되는 태그를 한번에 쓸 수 있다.
ex ) a * 5

<a></a>
<a></a>
<a></a>
<a></a>
<a></a>


▶ 그룹핑 ( () )

‘*‘등의 반복기호를 사용할 때 마지막 하나의 태그에 대해서만 반복하게 되는데, 이를 그루핑하여 묶고 싶을 때 사용한다.
ex ) (li>a) * 5

<li>
    <a></a>
</li>
<li>
    <a></a>
</li>
<li>
    <a></a>
</li>
<li>
    <a></a>
</li>
<li>
    <a></a>
</li>


▶ id값 주기 ( # )

’#’ 기호를 이용하여 해당 태그의 아이디를 줄 수 있다
ex ) nav#navigationul>li

<nav id="navigation">
	<ul>
		<li></li>
	</ul
</nav>


▶ class값 주기 ( . )

’.’기호를 이용하여 태그에 클래스값을 줄 수 있다.
ex ) nav>ul>(li.list>a)*5

<nav>
	<ul>
		<li class="list"><a></a></li>
		<li class="list"><a></a></li>
			...
	</ul>
</nav>


▶ 속성값주기 ( [] )

태그의 속성값을 지정해 주기 위해서는 [ ]를 붙여주고 그 안에 속성값을 지정해준다.
속성의 구분은 공백(스페이스바)으로 한다.
ex ) a[target="blank" title="asdf"]

<a href="" target="blank" title="asdf"></a>


▶ 태그가 아닌 텍스트 입력하기 ( {} )

emmet에서 그냥 텍스트를 입력할 경우 태그로 인식하기 때문에 그냥 텍스트를 넣고 싶은경우 {} 안에 입력해야한다.
ex ) li>a>{table}

   <li>	<a href=""> table </a> </li>


▶ 반복되는 숫자 입력시키기 ( $ )

’$’기호를 이용하여 증가하는 숫자를 만들어낼 수도 있다.
ex ) ul>li.item$*5

<ul> 
   <li class="item1"></li>
   <li class="item2"></li> 
   ...
</ul>