emmet 문법

emmet을 사용하게 되면 쉽고 빠르게 코딩 할 수 있도록 도와준다.

 

1. 클래스 이름과 태그 이름을 한꺼번에 쉽게 작성하는 방법

---> ex) ul.list입력후 탭키를 누르면 자동으로 다음과 같이 코딩이 된다.

<ul class="list"></ul>

 

 

2. 복잡한 코드도 가능하며, 자식요소도 한꺼번에 한줄로 설정할 수 있다.

--> ex) container라는 클래스이며, 자식요소로 ul태그인데, ul태그는 list클래스이름을 가지고, 그 자식요소로 li태그로 list-item이라는 이름을 가지고, 그 li태그는 총 10개이며 li태그의 자식요소로는 a태그가 들어있고, a태그의 텍스트로는 list숫자를 붙히도록 하겠다

     .container>ul.list>li.list-item*10>a{list$} 입력후 탭키를 누르면 자동으로 다음과 같이 코딩이 된다.

<div class="container">
        <ul class="list">
            <li class="list-item"><a href="">list1</a></li>
            <li class="list-item"><a href="">list2</a></li>
            <li class="list-item"><a href="">list3</a></li>
            <li class="list-item"><a href="">list4</a></li>
            <li class="list-item"><a href="">list5</a></li>
            <li class="list-item"><a href="">list6</a></li>
            <li class="list-item"><a href="">list7</a></li>
            <li class="list-item"><a href="">list8</a></li>
            <li class="list-item"><a href="">list9</a></li>
            <li class="list-item"><a href="">list10</a></li>
        </ul>
    </div>

 

 

3. CSS도 emmet문법을 사용할 수 있다.

-->ex) w:100 입력후 탭키를 누르면 다음과 같이 코딩이 된다. (h:100 도 마찬가지이다.)

.box{
    width: 100px;
    height: 100px;
}