[VScode] emmet 이용해서 빠르게 html 태그 작성하기

약어 구문

Emmet은 생성된 트리 내 요소의 위치와 요소의 속성을 설명하기 위해 CSS 선택기와 유사한 구문을 사용합니다.

집단

div또는 같은 요소 이름을 사용 하여 HTML 태그 p를 생성 할 수 있습니다. divEmmet에는 미리 정의된 사용 가능한 태그 이름 세트가 없으므로 → <div></div>, foo→ 등 의 단어를 작성하여 태그로 변환할 수 있습니다 <foo></foo>.

중첩 연산자

중첩 연산자는 생성된 트리 내부에 약어 요소를 배치하는 데 사용됩니다(컨텍스트 요소 내부 또는 근처에 배치해야 하는지 여부).

어린이:>

>연산자를 사용하여 요소를 서로 중첩 할 수 있습니다 .

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>

연산자를 원하는 만큼 사용할 수 있으며 ^각 연산자는 한 수준 위로 이동합니다.

div+div>p>span+em^^^bq

...로 출력됩니다

<div></div>
<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

곱셈:*

연산자를 사용하면 *요소가 출력되어야 하는 횟수를 정의할 수 있습니다.

ul>li*5

...출력

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

그룹화:()

괄호는 복잡한 약어로 하위 트리를 그룹화하기 위해 Emmets의 고급 사용자가 사용합니다.

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>

브라우저의 DOM으로 작업하는 경우 그룹을 문서 조각으로 생각할 수 있습니다. 각 그룹에는 약어 하위 트리가 포함되며 다음 요소는 모두 그룹의 첫 번째 요소와 같은 수준에 삽입됩니다.

그룹을 서로 중첩하고 곱셈 *연산자로 결합할 수 있습니다.

(div>dl>(dt+dd)*3)+footer>p

...생산하다

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

그룹을 사용하면 문자 그대로 단일 약어를 사용하여 전체 페이지 마크업을 작성할 수 있지만 그렇게 하지 마십시오.

속성 연산자

속성 연산자는 출력된 요소의 속성을 수정하는 데 사용됩니다. 예를 들어 HTML 및 XML에서는 class생성된 요소에 특성을 빠르게 추가할 수 있습니다.

아이디와 클래스

CSS에서는 elem#id및 elem.class표기법을 사용하여 지정된 id또는 class속성이 있는 요소에 도달합니다. Emmet에서는 동일한 구문을 사용하여 이러한 특성을 지정된 요소 에 추가 할 수 있습니다.

div#header+div.page+div#footer.class1.class2.class3

... 출력합니다

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

맞춤 속성

표기법(CSS에서와 같이)을 사용 [attr]하여 요소에 맞춤 속성을 추가할 수 있습니다.

td[title="Hello world!" colspan=3]

...출력

<td title="Hello world!" colspan="3"></td>

• 대괄호 안에 원하는 만큼 속성을 배치할 수 있습니다.
• 속성 값을 지정할 필요가 없습니다. 각 빈 속성 내부에 탭 정지 td[colspan title]를 생성 합니다(편집기가 지원하는 경우).<td colspan="" title="">
• 속성 값을 인용하기 위해 작은따옴표 또는 큰따옴표를 사용할 수 있습니다.
• 공백이 없으면 값을 인용할 필요가 없습니다 td[title=hello colspan=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>

행에서 여러 개를 사용 $하여 숫자를 0으로 채울 수 있습니다.

ul>li.item$$$*5

...출력

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></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>

카운터 기본 값을 변경하려면 다음에 @N수정자를 추가합니다 $.

ul>li.item$@3*5

...로 변환

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

다음 수정자를 함께 사용할 수 있습니다.

ul>li.item$@-3*5

...로 변환

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

텍스트:{}

중괄호를 사용하여 요소에 텍스트를 추가할 수 있습니다.

a{Click me}

...생산할 예정

<a href="">Click me</a>

는 별도의 요소(예: , 등) {text}로 사용되고 구문 분석 되지만 요소 바로 뒤에 작성될 때 특별한 의미가 있습니다. 예를 들어 and 는 동일한 출력을 생성하지만 and 는 그렇지 않습니다.divpa{click}a>{click}a{click}+b{here}a>{click}+b{here}

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

두 번째 예에서 요소는 요소 안에<b> 배치 됩니다 . 이것이 차이점 입니다. 요소 바로 뒤에 를 쓰면 부모 컨텍스트가 변경되지 않습니다. 이것이 중요한 이유를 보여주는 더 복잡한 예는 다음과 같습니다. <a>{text}

p>{Click }+a{here}+{ to continue}

...생산하다

<p>Click <a href="">here</a> to continue</p>

이 예제에서 Click here to continue내부 <p>요소를 작성하기 위해 명시적으로 >after 연산자를 사용하여 트리 아래로 이동 p했지만 요소의 경우 부모 컨텍스트를 변경하지 않고 단어만 있는 요소 a가 필요하기 때문에 그럴 필요가 없습니다 .<a>here

>비교를 위해 자식 연산자 없이 작성된 동일한 약어는 다음과 같습니다.

p{Click }+a{here}+{ to continue}

...생산하다

<p>Click </p>
<a href="">here</a> to continue

약어 서식에 대한 참고 사항

Emmet의 약어 구문에 익숙해지면 몇 가지 서식을 사용하여 약어를 더 읽기 쉽게 만들 수 있습니다. 예를 들어 다음과 같이 요소와 연산자 사이에 공백을 사용합니다.

(header > ul.nav > li*5) + footer

그러나 공백은 Emmet이 약어 구문 분석을 중지 하는 중지 기호 이기 때문에 작동하지 않습니다 .

많은 사용자가 각 약어를 새 줄에 작성해야 한다고 잘못 생각하지만 이는 잘못된 생각입니다 . 텍스트의 아무 곳에 나 약어를 입력하고 확장할 수 있습니다 .

 

이것이 Emmet이 필요하지 않은 것을 확장하지 않기 위해 구문 분석을 중지해야 하는 일부 표시기(공백과 같은)가 필요한 이유입니다. 가독성을 높이기 위해 복잡한 약어에 이러한 형식이 필요하다고 여전히 생각하는 경우:

• 약어는 템플릿 언어가 아니며 "읽을 수" 있을 필요도 없고 "빠르게 확장 및 제거 가능"해야 합니다.
• 복잡한 약어를 작성할 필요는 없습니다. "타이핑"이 웹 개발에서 가장 느린 프로세스라고 생각하지 마십시오. 하나의 복잡한 약어를 구성하는 것이 몇 개의 짧은 약어를 구성하고 입력하는 것보다 훨씬 느리고 오류가 발생하기 쉽다는 것을 금방 알게 될 것입니다.

사이트 :

https://docs.emmet.io/abbreviations/syntax/

Abbreviations Syntax