Zen Coding

젠 코딩

• Zen Coding 프로젝트 웹사이트
• Emmet 프로젝트 웹사이트
• Emmet (Zen Coding)
• Zen Coding 0.6 Cheat sheet
• Zen Coding Cheat Sheets
• Vim ZenCoding

Current features of abbreviation engine

• ID and CLASS attributes: div#page.section.main.

  ID와 ClLASS 속성 : div#page.select.main ⇒ <div id="page" class="select main">

• Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].

  사용자 정의 속성: div[title] ⇒ <div title="">

• Element multiplication: li*5 will output <li> tag five times.

  요소의 개수정의 : li*5 ⇒ <li> 태그를 5개 만든다.

• Item numbering with $ character: li.item$*3 will output <li> tag three times, replacing $ character with item number.

  아이템 숫자를 정의하는 $ 문자 : li.item$*3 ⇒ <li class="item1"></li> 형태로 item3번까지 3개의 li태크를 만든다.

• Multiple '$' characters in a row are used as zero padding, i.e.: li.item$$$ → li.item001

  여러개의 $ 문자로 0으로 채워진 숫자지정 : li.item$$$ ⇒ <li class="item001"<

• Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.

  무제한 중첩, 그룹 약어를 사용할 수 있다.

• Filters support

  필터 지원

• div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.

  ID, CLASS로 시작할 경우 DIV태그를 생략할 수 있다. #content>.select = div#content>div.select

• (v0.7) Text support: p>{Click }+a{here}+{ to continue}.

  텍스트 콘텐츠 지원 : p>{Click }+a{here}+{ to continue} ⇒ <p>Click <a href="">here</a> to continue</p>