[HTML] Emmet 문법 몇가지

HTML 작성 시 작성 속도를 올려주는 문법이 바로 'Emmet 문법' 이다.

주로 쓰이는 Emmet 문법은 아래의 표와 같다.

 

	.	>	$	+	#	[ ]	{ }	*
예시	div.sub	ul>li	{sub $}	div+div	div#sub	a[href="#"]	div{sub}	div*4
설명	div의class는 sub	ul의자식인 li	sub 1~ sub 3	div의 형제인 div	div의 id는 sub	a의 속성은 href="#"	div의 텍스 트는 sub	div를 4개 만든다

위의 표에 있는 Emmet 문법 외에도 다양한 문법들이 존재한다.

Emmet 문법을 쓸 때는 Space ber 를 사용하지 않고 모든 문장을 다 붙여줘야 한다.

(공백 금지!)

 

    <div id="main">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="sub">
            <ul>
                <li>
                    <a href="#">menu 1</a>
                    <ul>
                        <li><a href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu 2</a>
                    <ul>
                        <li><a href="#"></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

만약 위와 같은 HTML문서를 작성하게 된다면 

 

  div#main>span*6div.sub>ul>li*2>a[href="#"]{menu $}+ul>li>a[href="#"]  

 

이렇게 Emmet 을 이용하여 쉽고 빠르게 태그를 작성 할 수 있다.

또한 클래스나 아이디를 지정 할 때 따로 태그명을 쓰지 않고 작성하면

자동으로 div가 입력된다.

   .main 입력 후 Tab 키 입력 시 <div class="main"></div> 생성   

   #sub 입력 후 Tab 키 입력 시 <div id="sub"></div> 생성