[HTML] Emmet

Emmet

• 생성된 트리 내 요소의 위치와 요소의 속성을 설명하기 위해 CSS 선택기와 유사한 구문을 사용한다.
• 중첩 연산자
  • 자식 : >
    • > 연산자를 사용하여 요소를 서로 중첩한다.
    • 예시

      <!--div>ul>li-->
      <div>
        <ul>
            <li></li>
        </ul>
      </div>

  • 형제자매 : +
    • 연산자를 사용하여 + 동일한 수준에서 요소를 서로 가까이 배치한다.
    • 예시

      <!-- div+p+bq -->
      <div></div>
      <p></p>
      <blockquote></blockquote>

  • 상위 : ^
    • 연산자를 사용하면 > 생성된 트리 아래로 내려가며 모든 형제 요소의 위치가 가장 깊은 요소에 대해 배치한다.
    • 예시

      <!-- div+div>p>span+em -->
      <div></div>
      <div>
        <p>
            <span></span>
            <em></em>
        </p>
      </div>
      <!-- div+div>p>span+em^bq -->
      <div></div>
      <div>
        <p>
            <span></span>
            <em></em>
        </p>
        <blockquote></blockquote>
      </div>

  • 곱셈 : *
    • 연산자를 사용하면 * 요소가 출력되어야 하는 횟수를 정의한다.
    • 예시

      <!-- ul>li*5 -->
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>

  • 그룹화 : ()
    • 괄호는 복잡한 약어로 하위 트리를 그룹화하기 위해 Emmet 의 고급 사용자가 사용한다.
    • 예시

      <!-- 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>

• 속성 연산자
  • 아이디와 클래스
    • CSS에서 elem#id 및 표기법을 사용하여 지정된 또는 속성이 elem.class 있는 요소에 도달한다. Emmet 에서는 동일한 구문을 사용하여 이러한 특성을 지정된 요소에 추가할 수 있다.
    • 예시

      <!-- div#header+div.page -->
      <div id="header"></div>
      <div class="page"></div>

  • 맞춤 속성
    • 표기법을 사용하여 요소에 맞춤 속성을 추가할 수 있다.
    • 예시

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

  • 항목 번호매기기 : $
    • 곱셈 연산자를 사용하면 요소를 반복할 수 있지만 번호를 매길 수 없다, 다만 항목을 매기는 $ 를 사용하면 항목에 번호를 매길 수 있다.
    • $@- 로 하면 역순으로 번호를 매긴다.
    • $@3로 하면 3부터 번호를 매긴다.
    • 예시

      <!-- 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>

  • 텍스트 : {}
    • 중괄호를 사용하여 택스트를 추가할 수 있다.
    • 예시

      <!-- a{Click me} -->
      <a href="">Click me</a>