HTML, CSS 빠른 코딩을 위한 플러그인 모음 "zen-coding"

zen-coding은 HTML, CSS의 효율적인 코딩 및 편집을 도와줍니다.

사용법등의 숙지가 필요하지만, 구문자체가 CSS 선택자들과 비슷하기 때문에, 선택자들도 공부하실 겸,
익숙해진다면, 기존보다 작업 퍼포먼스 향상이 있을 것 같습니다.

특정 IDE에서만 작동하는 줄 만 알았었는데, 아래와 같이 다양한 환경에서 지원합니다.

• Aptana/Eclipse (crossplatform)

• TextMate (Mac)

• Coda (Mac)

• Espresso (Mac)

• Komodo Edit/IDE (crossplatform)

• Notepad++ (Windows)

• PSPad (Windows)

• <textarea> (browser-based)

• editArea (browser-based)

• Dreamweaver (Windows, Mac)

• Sublime Text (Windows)

• UltraEdit (Windows)

• TopStyle (Windows)

• GEdit (crossplatform)

• BBEdit/TextWrangler (Mac)

• Visual Studio (Windows)

• EmEditor (Windows)

• IntelliJ IDEA/WebStorm/PHPStorm (crossplatform)

• Emacs (crossplatform)

• Vim (crossplatform)

• ReSharper plugin for Visual Studio

zen-coding을 처음 접하시는 분이라면, <textarea> (browser-based) 를 통해서, 웹상에서 테스트를 할 수 있습니다.

※ 단축키(Available shortcuts/ Meta : Ctrl or etc)

• Meta+E — Expand Abbreviation (약어 펼치기/ 실행)

• Meta+D — Balance Tag Outward (태그바깥쪽 균형잡기/ 태그바깥쪽으로 선택하기)

• Shift+Meta+D — Balance Tag Inward (태그안쪽 균형잡기/ 태그안쪽으로 선택하기)

• Shift+Meta+A — Wrap With Abbreviation (약어로 감싸기/ 특정 태그로 감싸기)

• Ctrl+Alt+→ — Next Edit Point (다음 편집 포인트로 이동)

• Ctrl+Alt+← — Previous Edit Point (이전 편집 포인트로 이동)

• Meta+L — Select Line (줄 선택)

• Meta+Shift+M — Merge Lines (줄 병합)

• Meta+/ — Toggle Comment (코멘트 토글/ 코멘트 보이기 및 숨기기)

• Meta+J — Split Join Tag (태그)

• Meta+K — Remove Tag (태그 삭제)

More info on http://code.google.com/p/zen-coding/

ps) Editplus를 지원하지 않아, 개인적으로 아쉽네요.

홈페이지 : http://code.google.com/p/zen-coding/

Last edited by 아톰 (2010-07-11 16:19:52)