zen-coding이란 HTML소스 입력을 간편하게 해주는 text editor extention입니다.
div#container>ul.userlist>li*2
이렇게 작성하고 단축키를 누르면
<div id="container"> <ul class="userlist"> <li></li> <li></li> </ul> </div>
자동으로 이렇게 만들어주죠.
개발자들이 애용하는 대부분의 Editor들을 지원합니다.
잡설이 길어지니 zen-coding이 궁금한 분은 하단의 링크를 참조하세요.
Eclipse 에서 zen-coding를 사용하려면 전에는 Aptana에 설치하거나 eclipseMonkey를 설치해야 했습니다. 설치방법도 script란 폴더를 만들어서 어쩌고 저쩌고.. 복잡했죠.
하지만 eclipseMonkey 를 사용하지 않는 정식 플러그인 형태가 나왔습니다.
설치 방법입니다.
1. Eclipse에서 Help > Install New Software… 를 엽니다.
2. update site에 http://zen-coding.ru/eclipse/updates/ 를 추가합니다.
3. Zen Coding for Eclipse 를 선택하고 설치합니다.
4. Eclipse를 재기동 합니다.
5. 상단메뉴에 ZenCoding 이란 메뉴가 생긴걸 확인합니다.
기본버전과의 차이는 Eclipse 정식 플러그인 형태가 되면서 바뀐점은
개발자들이 애용하는 대부분의 Editor들을 지원합니다.
잡설이 길어지니 zen-coding이 궁금한 분은 하단의 링크를 참조하세요.
Eclipse 에서 zen-coding를 사용하려면 전에는 Aptana에 설치하거나 eclipseMonkey를 설치해야 했습니다. 설치방법도 script란 폴더를 만들어서 어쩌고 저쩌고.. 복잡했죠.
하지만 eclipseMonkey 를 사용하지 않는 정식 플러그인 형태가 나왔습니다.
설치 방법입니다.
1. Eclipse에서 Help > Install New Software… 를 엽니다.
2. update site에 http://zen-coding.ru/eclipse/updates/ 를 추가합니다.
3. Zen Coding for Eclipse 를 선택하고 설치합니다.
4. Eclipse를 재기동 합니다.
5. 상단메뉴에 ZenCoding 이란 메뉴가 생긴걸 확인합니다.
기본버전과의 차이는 Eclipse 정식 플러그인 형태가 되면서 바뀐점은
1. install, update가 용의해졌고,
2. Preferences에 관리메뉴가 생겼으며, Preference > zen coding
3. 단축키를 Preferences에서 바꿀 수 있으며 Preference > General > key
4. Eclipse의 모든 editor에서 사용가능하며, (기존건 WebTool's의 XML Editor에서 에러가 났다는군요.)
4. 가장맘에 드는건.. Expand abbreviations을 tab 키로 가능해졌습니다! (옵션)
zen coding은 html말고 xml도 지원할 뿐 아니라, 블럭단위 선택. img 의 사이즈 가져오기, line merge등 다른 편집관련 단축기능이 많습니다. 처음 보시는 분은 사용해보시길 권합니다.
zen-coding 지원 에디터들
Aptana, Eclipse, TextMate, coda, Espresso, Komodo, Notepadd++, PSPad, editArea, CodeMirror, Dreamweaver, Submlime Text, UltraEdit, TopStyle, GEdit, BBEdit, Visual Studio, EmEditor, Sakura Editor, NetBeans, IntelliJ, Emacs, Vim
zen-coding관련 링크 모음.
* zen-coding Demo : http://vimeo.com/7405114
* zen-coding Project home : http://code.google.com/p/zen-coding/
* Eclipse plugin GitHub : https://github.com/sergeche/eclipse-zencoding
* zen-coding HTML Selector : http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
2. Preferences에 관리메뉴가 생겼으며, Preference > zen coding
3. 단축키를 Preferences에서 바꿀 수 있으며 Preference > General > key
4. Eclipse의 모든 editor에서 사용가능하며, (기존건 WebTool's의 XML Editor에서 에러가 났다는군요.)
4. 가장맘에 드는건.. Expand abbreviations을 tab 키로 가능해졌습니다! (옵션)
zen coding은 html말고 xml도 지원할 뿐 아니라, 블럭단위 선택. img 의 사이즈 가져오기, line merge등 다른 편집관련 단축기능이 많습니다. 처음 보시는 분은 사용해보시길 권합니다.
zen-coding 지원 에디터들
Aptana, Eclipse, TextMate, coda, Espresso, Komodo, Notepadd++, PSPad, editArea, CodeMirror, Dreamweaver, Submlime Text, UltraEdit, TopStyle, GEdit, BBEdit, Visual Studio, EmEditor, Sakura Editor, NetBeans, IntelliJ, Emacs, Vim
zen-coding관련 링크 모음.
* zen-coding Demo : http://vimeo.com/7405114
* zen-coding Project home : http://code.google.com/p/zen-coding/
* Eclipse plugin GitHub : https://github.com/sergeche/eclipse-zencoding
* zen-coding HTML Selector : http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn
Comments List
좋은 정보 감사합니다.
전 이클립스만이 아니라 모든 에디터에 등록해서 사용중입니다. ㅎㅎ