2018-01-08 Homework WPS 1.OT

08 Jan 2018 • Homework

EMMET Abbreviations Syantx

Elements

HTML tag를 생성하기 위해 div나 p와 같은 요소 이름을 사용할 수 있다. Emmet은 사용가능한 tag의 이름을 미리 정의하지 않기 때문에 어떤 단어를 쓰더라도 tag로 변한다.

div + tap을 누르면

<div></div>

Nesting operators

Nesting operators(포함 연산자)는 요소들을 생성된 트리안에 위치하도록 한다.

Child: >

하위 레벨에서 생성하기

div>ul>li

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

Sibling: +

같은 레벨에서 생성하기

div+p+bq

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

Climb-up: ^

^ 한 개당 한 단계 위로 빠져나감

div+div>p>span+em^bq

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

Multiplication: *

요소 복제하기

ul>li*5

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

Grouping: ()

그룹으로 묶기

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>

그룹 또한 multiplication이 가능하다

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

Atrribute operators

속성 연산자들은 출력된 요소들의 속성을 바꾸는데 사용된다.

ID and CLASS

CSS에서는 elem#id와 elem.class 개념이 특정 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

유저의 요소에 [attr]개념을 사용하여 커스텀 속성을 추가할 수 있다.

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

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

Item numbering: $

multiplication(*) 연산자와 함께 사용되며 번호를 매기는 것으로 사용된다.

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>

$를 덧붙인다면 zeroes pad가 형성된다.

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>

Text: {}

중괄호 안에 있는 문자가 텍스트로 입력된다.

a{Click me}

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

참고로 a{click}과 a>{click}은 단순히 보면 같은 역할이지만 child가 있을 때 큰 차이가 있다.

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

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

Notes on abbreviation formatting

보통 띄어쓰기를 잘하면 알아보기 쉽지만 위에 언급된 syntax들이 작동하지 않을 것이다. 그러니까 하지마라!

Comments

Related Posts