Vim - 7 Awesome Emmet HTML Time-Saving Tips

Vim - 7 Awesome Emmet HTML Time-Saving Tips cheat sheet
Emmet HTML을 사용하는 효과적인 일곱가지 방법

1. Skip the div
Div 건너뛰기

Our first tip is that you rarely need to type out “div” in your macro. It’s tempting because that’s what you do with every other HTML element, but divs are special and actually require even less effort. All you have to do is type out an ID (using a hashtag) or a class (using a period) and Emmet will assume that you’re looking to create a div.
첫 번째 팁은 매크로에서 "div"를 거의 입력 할 필요가 없다는 것입니다. 이것이 다른 모든 HTML 요소로하는 일이기 때문에 유혹에 빠지 긴하지만 div는 특별하며 실제로는 더 적은 노력이 필요합니다. 해시 태그>를 사용하여 ID를 입력하거나 마침표를 사용하여 클래스를 입력하기 만하면 Emmet은 div를 만들려고한다고 >가정합니다.

• type this:

  div.container

• or this:

  .container

• get this:

  <div class="container"><div>

As you can see, both abbreviations yield the same result. Since Emmet is all about saving you time by reducing the amount of typing required, always shoot for the shortest route to what you want.
보시다시피 두 약어는 같은 결과를 산출합니다. Emmet은 필요한 타이핑 양을 줄임으로써 시간을 절약하기 때문에 항상 원하는 최단 경로로 작성하십시오.

Implicit Tag Names
암시적 태그 이름들

This quirk is actually part of a greater feature called “implicit tag names”, which attempts to interpret the tag that you want based on context. Notice that I don’t type out either “div” or “li” in my abbreviation, but they are assumed and inserted into the final expanded snippet.
이 특징은 사실 "암시 적 태그 이름"이라고하는 더 큰 기능의 일부로, 사용자가 컨텍스트를 기반으로 원하는 태그를 해석하려고 시도합니다. 약자로 "div"또는 "li"을 입력하지는 않지만 최종 확장 코드 단편에 삽입 된 것으로 간주됩니다.

• type this:

  div.container

• get this:

  <div class="wrap">

                <ul class="list">

                    <li class="sites"></li>

                </ul>

    </div>

2. Chain Abbreviations With DOM Navigation
DOM 탐색을 사용한 체인 약어

If you’re using Emmet to expand simple class names into divs, good for you, you’re off to a decent start. The real time saving power though is only reached once you learn to effectively build larger macros that can expand into a significant portion of your markup.
Emmet을 사용하여 간단한 클래스 이름을 div로 확장하면 좋은 결과를 얻을 수 있습니다. 실시간 저장 능력은 마크 업의 상당 부분으로 확장 될 수있는 더 큰 매크로를 효과적으로 구축하는 방법을 배워야 도달 할 수 있습니다.

The key to this is to memorize and understand the syntax that will help you branch off into different levels of your document tree. There are three important symbols to keep in mind:
이 작업의 핵심은 문서 트리의 여러 수준으로 나누는 데 도움이되는 구문을 암기하고 이해하는 것입니다 . 명심할 중요한 세 가지 기호가 있습니다.

> child

+ sibling

^ climb-up

As you can see, “>” allows you to go deeper into the tree and create a child, “+” allows you to create a new element on the same level as the previous one (a sibling), and “^” allows you to climb back up a level to create an element. For the sake of simplicity, let’s start with the first two.
보시다시피, ">"를 사용하면 트리 깊숙이 들어가서 자식을 만들 수 있습니다. "+"를 사용하면 이전 요소 (형제)와 동일한 수준에서 새 요소를 만들 수 있으며 "^"를 사용하면 레벨을 올라가서 요소를 만드는 것. >간단히하기 위해 처음 두 개부터 시작합시다.

• type this :

  .outer>.inner>h1+p

• get this

  <div class="outer">

      <div class="inner">

          <h1></h1>

          <p></p>

      </div>

  </div>