zen-coding 기본

zen conding 키워드

zen-coding

 

태그#아이디명 ====> 아이디 이름을 가진 태그 생성

ex)  div#container

 

태그.클래스명 ====> 클래스 이름을 가진 태그 생성

ex)  div.container

 

+태그명 ==> 형제 노드 생성

ex) div.container+div.btn

 

태그 > 태그 ====> 상하 종속 태그 생성

ex) div.container>ul>li

 

 *숫자입력 ==> 생성 태그 갯수

ex) div.container>ul>li*10

 

 클래스명 or 아이디명 or 텍스트 노드$ ===> 순차적(내림차순) 번호 붙임 

ex) div.container>ul>li.list$*10

ex) div.container>ul>li.list${menu$}*10

 

그룹핑

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

 

 

텍스트(nodeValue처리)

ex) a{click me}

 

CSS Vender prefixes( 대시키워드(-) 붙이고 약어기재 )

선택자{

  -bxs:bb

}

--> 결과(아래코드)

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

 

CSS transition prefixes

-trs

 

 

CSS font 설정

키워드 --> @f+

 

결과(아래코드)

/* @font-face {

    font-family: 'FontName';

    src: url('FileName.eot');

    src: url('FileName.eot?#iefix') format('embedded-opentype'),

         url('FileName.woff') format('woff'),

         url('FileName.ttf') format('truetype'),

         url('FileName.svg#FontName') format('svg');

    font-style: normal;

    font-weight: normal;

} */

 

CSS Keyframe 설정

키워드 --> @kf

 

결과(아래코드)

@-webkit-keyframes identifier {

    from {  }

    to {  }

}

@-o-keyframes identifier {

    from {  }

    to {  }

}

@-moz-keyframes identifier {

    from {  }

    to {  }

}

@keyframes identifier {

    from {  }

    to {  }

}

 

 

 

Emmet 

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

Abbreviations Syntax

Cheat Sheet

http://docs.emmet.io/cheat-sheet/

Cheat Sheet