젠코딩(Zen Coding)

젠코딩(Zen Coding)

젠코딩(Zen Coding)

젠코딩(zen Coding) Elements
zen-coding 하려면 태그 끝에서 CTRL + E 또는 탭(Tab) 키를 누르세요!
      
젠코딩(zen Coding) 사용법
참고 사이트
zen-coding(Set of plugins for HTML and CSS hi-speed coding) : https://code.google.com/p/zen-coding
ZenCoding HTML 요소 :http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn
ZenCoding CSS 속성 : http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn
ZenCodingCheatSheet Download : ZenCodingCheatSheet.pdf
클래스 생성 .
div.classname
<div class="classname"></div>
ID 생성 #
div#idname
<div id="idname"></div>
사용자 속성 생성 [ ]
div[title]
<div title=""></div>
반복 생성 *
li*5
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
요소를 자동 생성 시, 숫자 증가 값 표시 $
li#item$*5
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
요소를 자동 생성 시, 숫자 증가 값 표시 $
li#item$$$*5
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
<li class="item006"></li>
<li class="item007"></li>
<li class="item008"></li>
<li class="item009"></li>
<li class="item010"></li>
<li class="item011"></li>
<li class="item012"></li>
<li class="item013"></li>
<li class="item014"></li>
<li class="item015"></li>
멀티 생성 +
div#haeder+div#contents+div#footer
<div id="haeder"></div>
<div id="contents"></div>
<div id="footer"></div>
자식을 포함 하는 태그 있을 경우 자동 생성 +
table+
<table>
        <tr>
                <td></td>
        </tr>
</table>
자식을 포함 하는 태그 있을 경우 자동 생성 +
ul+
<ul>
        <li></li>
</ul>
자식을 포함 하는 태그 있을 경우 자동 생성 +
dl+
<dl>
        <dt></dt>
        <dd></dd>
</dl>
자식 생성 >
div#header>ul>li
<div id="header">
<ul>
        <li></li>
</ul>
</div>
그룹(무한 중첩) ( )
div#header>ul>li
<div id="page">
        <div id="header">
                <ul id="nav">
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                </ul>
        </div>
</div>
기타 Element를 지정 하지 않는 경우는 div를 생성한다.
#header.wrap
<div id="header" class="wrap"></div>

  • 회사 :
  • 대표 :
  • 주소 :
  • 메일 : admin@mysample.com
  • 사업자 등록번호 :
Copyright © cginjs.com All rights reserved.
notice