본문 바로가기
DevOps/Tools

[Emmet] Emmet #2 약어 문법, Abbreviations Syntax

by breezyday 2022. 5. 18.

Emmet #1 시작하기 

1. Abbreviation : 약어

앞서 Emmet에 대해 간단히 살펴봤습니다. 이번에는 Emmet의 핵심이라 할 수 있는 약어(Abbreviation)와 약어를 사용하는 문법입니다. Emmet의 문법을 따른 표현식은 바로바로 분석되어 구조화된 코드 블록(HTML, CSS 등)으로 변환됩니다. 

 

다음은 약어입니다. 

 

#page>div.logo+ul#navigation>li*5>a{Item $}

 

이 약어는 단축키(Tab, Ctrl + E)를 입력하면 아래와 같이 코드를 생성해 줍니다.

 

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

 

약어는 HTML과 XML 생성에 최적화되어 있지만 다른 Markup 및 CSS를 쉽고 편리하게 작성할 수 있도록 도와줍니다. 약어와 더불어 기본 문법을 사용하면 복잡한 구문도 빠르고 손쉽게 작성할 수 있습니다.

2. Abbreviations Syntax : 약어 문법

2.1 Elements : 요소

HTML 태그를 생성하기 위해 div 혹은 p와 같은 Element(요소)의 이름을 사용합니다. HTML 태그 이름은 약어로 정의되어 있지 않지만 div -> <div></dib>와 같은 태그 이름도 사용하지만 일반 단어인 foo -> <foo></foo>와 같이 사용할 수 있습니다.

 

2.2 Nesting operator : 중첩 연산자

중첩 연산자는 생성된 트리 내부에 Element를 배치하는 데 사용합니다.

 

> : Child ( 자식 )

> 연산자를 사용하여 Element내부에 새로운 Element를 추가합니다.

div>ul>li

 

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

+ : Sibling ( 형제 )

+ 연산자를 사용하여 동일한 수준에서 Element를 배치합니다.

div+p+bq

 

<div></div>
<p></p>
<blockquote></blockquote>

^ : Climb-up ( 등반, 상위 수준 )

^ 연산자를 사용하면 Element 트리의 상위로 한 단계 올라가 다음 Element를 표시합니다.

div+div>p>span+em

 

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

 

새로 추가한 blockquote Element를 상위로 옮기고 싶다면 아래와 같이 사용할 수 있습니다.

 

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>

* : Multiplication ( 곱셈 )

* 연산자는 Element를 출력하는 횟수를 조절할 수 있습니다.

 

ul>li*4

 

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

( ) : Grouping ( 그룹화 )

소괄호를 사용하여 하위 Element들을 그룹화하는 데 사용할 수 있습니다.

 

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>

 

소괄호로 그룹을 묶어서 곱셈 연산자로 확장할 수 있습니다.

 

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

 

소괄호로 그룹을 생성하여 사용할 수 있지만 오히려 복잡도가 올라가고 가독성이 떨어지니 적당한 수준에서만 사용하는 것이 좋습니다.

 

2.3 Attribute operator : 속성 연산자

속성 연산자는 Element의 속성을 수정하는 데 사용합니다.

 

#  .  : ID and Class ( ID와 Class )

CSS에서 사용하는 elem#id 와 elem.class 표기법을 사용하여 id 또는 class속성 요소를 표현합니다. 에밋에서는 동일한 구문을 사용하여 속성을 지정한 Element에 추가할 수 있습니다.

# : id
.   : class

 

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>

[ ] : Custom attributes ( 사용자 정의 속성 )

대괄호 [ ] 를 사용하여 Element에 사용자가 원하는 대로 속성을 추가할 수 있습니다.

 

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

 

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

 

  • 대괄호 안에 원하는 만큼 속성을 추가할 수 있습니다.
  • 속성 값을 반드시 지정할 필요는 없습니다. 각 빈 속성 내부에 Tab Stop을 사용하여 추가로 코딩할 수 있습니다. (편집기가 지원하는 경우...)
  • 속성에 값을 추가하는 경우 작은따옴표나 큰따옴표를 사용할 수 있습니다.
  • 공백이 포함되어 있지 않으면 따옴표를 사용하지 않아도 됩니다.
td[title='Hello world!' colspan=3]

 

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

$ : Item numbering ( 항목 번호 매기기 )

$ 연산자로 숫자를 지정할 수 있습니다. Element 이름, 속성 이름 또는 속성 값에 이 연산자를 사용하면 현재 반복되는 요소 수를 차례로 출력합니다.

 

ul>li.item$*4

 

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
</ul>

 

$ 를 여러 개 겹치면 0을 채워서 표시할 수 있습니다.

 

ul>li.item_$$$*3

 

<ul>
    <li class="item_001"></li>
    <li class="item_002"></li>
    <li class="item_003"></li>
</ul>

@ : Changing numbering base and direction ( 시작 번호 및 순서 )

@ 연산자를 사용하여 시작 번호와 순서(내림차순 or 오름차순)를 변경할 수 있습니다.

방향을 변경하려면 @ 연산자에 - 를 붙이면 됩니다.

 

ul>li.item$@-*4

 

<ul>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

 

시작 값을 변경하려면 @N 으로 변경할 수 있습니다.

 

ul>li.item$@3*4

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

 

ul>li.item$@-3*4

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

{ } : Text ( 텍스트 )

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

 

a{Click me}

 

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

 

자식 연산자( > )와 형제 연산자( + )를 함께 사용할 경우 아래와 같이 동작합니다. 

 

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

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

 

요소 바로 뒤에 자식 연산자와 함께 사용할 경우 복합적인 구문을 작성할 수 있습니다. 아래 구문에서 a 연산자 뒤에 오는 중괄호 연산자의 내용은 시작 태그인 p의 자식으로 별도의 Element 없이 연결이 됩니다.

 

<!-- 자식 연산자를 사용 -->
p>{Click }+a{here}+{ to continue}

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

 

<!-- 자식 연산자를 사용하지 않을 경우 -->
p{Click }+a{here}+{ to continue}

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

2.4 Notes on abbreviation formatting : 약어 형식 참고사항

공백을 추가하면 에밋은 약어 구문 분석을 중지합니다.

약어는 빈 줄에만 사용하는 것이 아니라 텍스트 어디에서든 사용 가능합니다.

소스에서 에밋으로 새로운 구문을 추가하고자 하면 어디에서든 바로 입력하고 단축키를 눌러주면 됩니다.

 

  • 약어(Abbreviation)는 언어가 아닙니다. "읽을 수 있어야"할 필요가 없습니다. 빠르게 입력할 수 있고 삭제도 가능해야 합니다.
  • 복잡한 약어를 작성하려 애쓰지 마세요. 복잡한 약어를 만드는 것보다는 짧은 약어를 사용해서 단계적으로 접근하는 것이 훨씬 더 빠르게 작성하며 불필요한 오류를 줄일 수 있습니다.

 

 

 

 

 

'DevOps > Tools' 카테고리의 다른 글

[nodejs] node.js 다운로드 및 설치  (0) 2022.06.15
[JUnit] JUnit 5 vs JUnit 4, JUnit Version 4, 5 차이점  (0) 2022.06.09
[WAS] Tomcat 9.0.xx 설치  (0) 2022.05.17
[WAS] Tomcat 버전 별 요구사항  (0) 2022.05.16
[Emmet] Emmet #1 시작하기  (0) 2022.05.15

관련글

댓글

티스토리툴바