Zen-Coding문법

1. class 선언

div.hello 또는 .hello

태그의 선언 없이 클래스명만 젠코딩 축약어로 사용할 경우 무조건 div element로 적용이 된다.

결과 값

<div class="hello"></div>

2. id 선언

div#hello 또는 #hello

태그의 선언 없이 아이디명만 젠코딩 축약어로 사용할 경우 무조건 div element로 적용이 된다.

결과 값

<div id="hello"></div>

3. 속성(attribute) 선언

a[title="속성입력"]

속성을 선언할 경우 대괄호[ ]를 사용해서 element에 해당하는 속성을 입력할 수 있다.

1번 2번과 마찬가지로 속성만 젠코딩 축약어로 사용 할 수 있지만 기본적으로 div element로 결과값이 나오므로

반드시 엘리먼트와 함께 선언하는 것이 좋다.

결과 값

<a title="속성입력"></a>

4. 자식관계(children) 선언

div>span

> 기호를 선언 함으로써 부모와 자식 엘리먼트를 생성한다.

바로 밑의 자식 뿐아니라 자손 엘리먼트까지 무한적으로 생성할 수 있다.

결과값

<div>
    <span></span>
</div>

5. 엘리먼트 n개 선언

ul>li*4

* 기호를 선언 함으로써 해당 엘리먼트의 n개만큼 생성한다.

결과값

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

6. 같은레벨 엘리먼트 선언 

div+span+p

+기호를 사용해서 같은 레벨에 엘리먼트를 선언할 수 있다.

결과 값

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

7. 적용하기

div.hello>p+ul>li*5

결과 값

<div class="hello">
    <p></p>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>