티스토리 뷰

이모저모/IT 이모저모

[도구] Zen Coding

앙망 2012. 7. 19. 09:50
zen-coding

소개

Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.

젠 코딩은 HTML, XML, XSL 의 코딩과 편집속도를 높이는 에디터 플러그인이다. 플러그인의 핵심은 강력한 축약어 엔진 (abbreviation engine) 으로 CSS 셀럭터처럼 표현값을 HTML코드로 확장시킨다. 예를 들어 


div#page>div.logo+ul#navigation>li*5>a
는 다음과 같이 확장된다.

젠 코딩 동영상

엘리먼트 조작(operator)

  • E : 엘리먼트

    Element name (div, p);

  • E#id : 아이디를 가진 엘리먼트

    div#content

    span#error

  • E.class

    클래스를 가진 엘리먼트 : div.header, p.error.critial). You can combine classes and IDs, too: div#content.column.width;

  • E>N : 자식 엘리먼트

    div>p

    div#footer>p>span

  • E+N : 형제 엘리먼트

    h1+p

    div#header+div#content+div#footer

  • E*N : 엘리먼트 N 개 만큼 증가

    ul#nav>li*5>a

  • E$*N : 넘버링

    Item numbering (ul#nav>li.item-$*5);

sublime text2 에 젠코딩 추가

  1. install package 추가

    import urllib2,os;pf=’Package Control.sublime-package’;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(’ ‘,’%20’)).read())

  2. With Sublime Text 2 open again, press Command+Shift+P to access the command palette. Type “install package” and press enter.
  3. Sublime will gather a list of packages available in the repos, then a popup box will allow you to scroll through the packages available. Just start typing “zen coding” and it will select it. With the Zen Coding package selected, press enter.

참고

저작자표시 비영리 변경금지
공유하기 링크
댓글