Zen-Coding의 신세계

젠코딩(Zen Coding)은 CSS Selector 방식으로 빠른 코딩과 HTML, XML, XSL 그리고 다른 구조의 코드 유형을 편집하기 쉽게 해 주기 위한 플러그인의 집합이다

이 프로젝트는 2009년에 Sergey Chikuyonok에 의해 만들어졌으며 Chikuyonok과 젠코딩 유저들에 의해 지속적으로 활발하게 개발되고 있다. 

도구는 고 프로파일 텍스트 에디터의 숫자로 통합되어왔으며 몇몇의 플러그 인은 젠코딩 팀과 개별적으로 실행시키는 다른 사람들에 의해 개발된다. 

젠코딩은 기본적으로 소프트웨어의 부분을 사용한다기 보다 엔진을 바로 사용한다는 점에서 다른 텍스트 에디터와는 구분된다.

젠코딩은 현재 MIT에 의해 오픈 소스로 공개되고 있다.

zen-coding(Set of plugins for HTML and CSS hi-speed coding) : https://code.google.com/p/zen-coding

젠코딩 HTML 요소 : http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn 

젠코딩 CSS 속성 : http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn

ZenCodingCheatSheet.pdf

text-editor.zip

Zen.Coding-CodeMirror2.v0.7.zip

div#page>div.logo+ul#navigation>li*5>a

div#name

<div id="name"></div>

div#name.one.two

<div id="name" class="one two"></div>

table>tr>td

<table> <tr> <td></td> </tr> </table>

p+p

<p></p> <p></p>

td[colspan=2]

<td colspan="2"></td>

p.title|e

&lt;p class="title"&gt;&lt;/p&gt;

ul#name>li.item*3

<ul id="name"> 

    <li class="item"></li> 

    <li class="item"></li> 

    <li class="item"></li> 

</ul>

p.name-$*3

<p class="name-1"></p> 

<p class="name-2"></p> 

<p class="name-3"></p>

select>option#item-$*3

<select> 

    <option id="item-1"></option> 

    <option id="item-2"></option> 

    <option id="item-3"></option> 

</select>

ul+

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

table+

<table> <tr>     <td></td> </tr> </table>

dl+

<dl>     <dt></dt>     <dd></dd> </dl>

img[src="a$.jpg"]*3

<img src="a1.jpg" alt="" />

 <img src="a2.jpg" alt="" />

 <img src="a3.jpg" alt="" />

div[style="color#000;"]>#wrapper>p.textBlock+ul#listBlock>li.list*5

#header>ul.menu>li*5>input[type="button"][name="aa$"][id="aa$"][title="id$"][value="id$"]*5

기호	설명	사용법	결과
.	클래스 생성	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>
+		dl+	<dl>         <dt></dt>         <dd></dd> </dl>
>	자식 생성	div#header>ul>li	<div id="header"> <ul>         <li></li> </ul> </div>
( )	그룹(무한 중첩)	div#page>(div#header>ul#nav>li*4>a)	<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>