emmet 사용하기mmet 사용하기

html와 css 등 다양한 파일 종류에 유용한 코드 단축키를 제공

vscode에서는 emmet이 내장되어 있기 때문에 바로 별도의 설치 없이 사용할 수 있다.

child

하위 요소를 생성하는 방법은 `>` 을 사용하는 것이다.

<!-- child(자식): div>ul>li -->
   <div>
    <ul>
      <li></li>
    </ul>
   </div>

sibling

동급 요소를 생성하고 싶다면 `+`를 사용한다.

<!-- sibling(형제): div+p+bq -->
    <div></div>
    <p></p>
    <blockquote></blockquote>

child + sibling

당연히 하위 요소와 동급 요소를 섞어 응용할 수 있다.

<!-- chile + sibling: div+div>p>p>span+em -->
    <div></div>
    <div>
      <p>
        <p><span></span><em></em></p>
      </p>
    </div>

올라가기

하위 요소를 작성하다 위로 올라가서 동급 요소를 생성하고 싶다면 `^`를 사용하면 된다.

 

아래의 코드에서는 마지막으로 하위 요소를 만든 태그가 <p>이기 때문에 그 위의 <div>태그로 올라가 <div>의 하위 태그로 <blockquote>를 생성한 것이다.

<!-- 올라가기: div>div>p>span+em^bq -->
    <div>
      <div>
        <p><span></span><em></em></p>
        <blockquote></blockquote>
      </div>
    </div>

곱셈

반복으로 태그를 처리할 때 `*`을 사용한다.

<!-- 곱셈: ul>li*5 -->
     <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
     </ul>

그루핑

태그의 하위 요소들을 묶어서 정의할 수 있다. `()`를 사용한다.

소괄호 안의 태그들을 하나의 요소로 보기 때문에 아래의 경우 header 태그 부터 내부의 모든 태그를 하나로 묶기 떄문에 그 후 나온 footer태그는 header의 동급 요소로 생성되게 된다.

<!-- 그룹핑: 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>

id, class

아이디와 클래스는 각각 css와 동일한 방식으로 `.`과 `#`을 사용한다.

<!-- id, class: div#header+div.page+div#footer.class.class2.class3 -->
     <div id="header"></div>
     <div class="page"></div>
     <div id="footer" class="class class2 class3"></div>

속성

태그의 속성을 추가할 때에는 `[]`를 사용한다.

<!-- 속성: td[title="hello world!" colspan=3] -->
     <td title="hello world!" colspan="3"></td>

텍스트

태그 내부에 텍스트를 추가할 때에는 `{}`를 사용한다.

<!-- text div{text value} -->
     <div>text value</div>

넘버링

넘버링을 사용할 때는 `&`를 사용한다.

.item&*5 => 태그를 5개 생성하는데 클래스를 item1부터 item5까지 순차적으로 부여한다.

$를 사용해서 자리수를 정해줄 수 있다. 따라서 $$로 하면 두 자리의 넘버링을 사용할 수 있다.

<!-- item numbering: ul>li.item$*5 -->
     <ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
      <li class="item5"></li>
     </ul>

<!-- 자리수 설정 가능 ul>li.item$$*5 -->
     <ul>
      <li class="item01"></li>
      <li class="item02"></li>
      <li class="item03"></li>
      <li class="item04"></li>
      <li class="item05"></li>
     </ul>

특정 수부터 시작

특정 수부터 넘버링을 하고 싶다면 `@`을 사용하면 된다.

<!-- ul>li.item$@5*5 -->
     <ul>
      <li class="item5"></li>
      <li class="item6"></li>
      <li class="item7"></li>
      <li class="item8"></li>
      <li class="item9"></li>
     </ul>

역순

넘버링을 역순으로 하고 싶다면 `@-`를 사용하면 된다.

<!-- ul>li.item$@-*5 -->
     <ul>
      <li class="item5"></li>
      <li class="item4"></li>
      <li class="item3"></li>
      <li class="item2"></li>
      <li class="item1"></li>
     </ul>

응용

<!-- div.container>ul.list>li.list-item$*5>a{list$} -->
     <div class="container">
      <ul class="list">
        <li class="list-item1"><a href="">list1</a></li>
        <li class="list-item2"><a href="">list2</a></li>
        <li class="list-item3"><a href="">list3</a></li>
        <li class="list-item4"><a href="">list4</a></li>
        <li class="list-item5"><a href="">list5</a></li>
      </ul>
     </div>