Zen Coding은 HTML과 CSS 코드를 효율적으로 작성할 수 있게하는 소스 편집기용 플러그인입니다. Aptana, TextMate, Coda 그리고 Espresso 등에 설치할 수 있으며 DOM Selector 문법으로 HTML을 손쉽게 작성할 수 있습니다. 위 동영상은 Zen Coding을 이용한 코딩 방법을 소개하고 있습니다.
Aptana에 적용하는 방법은 매우 간단합니다. 우선 Aptana용 Zen Coding을 다운로드합니다. 그리고 Aptana에서 새 프로젝트를 추가하고 "scripts"라는 폴더를 생성한 다음 다운로드한 압축파일을 풀어놓으면 설치가 완료됩니다. Aptana의 "Scripts" 메뉴에 "Zen Coding"항목이 보이면 정상적으로 설치된 것입니다. 기본으로 단축키가 Alt + E키로 바인딩되어 있는데 윈도 버전에서는 작동하지 않습니다. "scripts" 폴더의 "Expand Abbreviation.js"파일을 열고 주석 안의 "M1+E"를 "M1+M3+E"로 수정합니다. M1은 Alt, M3는 Ctrl키를 의미합니다. 이제 새로운 HTML파일을 생성하고 "html:4t"라고 작성한 후 Ctrl + Alt + E키를 눌러보세요. "scripts"폴더는 기존 프로젝트의 하위 폴더로 이동해도 무방합니다.
HTML Selectors 문서에서 명령어들을 숙지할 수 있으며 PDF로 만들어진 치트시트도 제공하고 있습니다. Zen Coding이 출시된 것은 벌써 알고 있었지만 지금에서야 사용해 보았네요. 생각보다 유용하게 사용할 수 있을 것 같더군요. 익숙해지면 코딩 퍼포먼스를 완전히 차별화 할 수 있겠습니다.
Comments
Got something to add? You can just leave a comment.
RT Selector 에 대한 이해도 돕고 코딩 속도도 향상되겠네요. :) @firejune: Aptana에서 zen-coding 사용하기 http://bit.ly/dc3l84
from Topsy
RT @firejune Aptana에서 Zen Coding 사용하기 http://firejune.com/1555 이거 좀 짱인듯.. 에디트플러스에선 안되려나요? 안될거야 아마 ㅜㅜ
from Topsy
@jugug 사용 가능합니다. http://www.mungchung.com/xe/protip/5707
from firejune.com
멋지네요... RT: @firejune: Aptana에서 zen-coding 사용하기 http://firejune.com/1555
from Topsy
RT @firejune http://firejune.com/1555 에디트플러스에서 적용해보니 입력후 택스트를 선택해서 단축키를 눌러야하는 불편함이 있네요.자동완성처럼 스페이스누를때 적용되면 좋겠지만.. 그래도 어느정도 유용할거 같습니다.
from Topsy
@jugug 단축키를 눌러야 변환되는 것은 마찬가지인 듯 합니다. 저는 엔터키를 누를때 변환되었으면 했거든요...
from firejune.com
맥용 코딩 플러그인인 Zen Coding 소개입니다. Firejune님 블로그 펌이구요. 소개된 무비를 보면 정말 훌륭하군요. http://bit.ly/bl3pAQ
from Topsy
Aptana에서 Zen Coding 사용하기 by @firejune http://bit.ly/dzNa3P - 와~ 이거 대단한데요. 맥북에서 코딩을 다시 해봐야겠어요. ㅎㅎ
from Topsy
RT @yuno815 Aptana에서 Zen Coding 사용하기 by @firejune http://bit.ly/dzNa3P - 와~ 이거 대단한데요. 맥북에서 코딩을 다시 해봐야겠어요. ㅎㅎ
from Topsy
RT @firejune: Aptana에서 zen-coding 사용하기 http://firejune.com/1555
from twitter
RT @firejune Aptana에서 Zen Coding 사용하기 http://firejune.com/1555
from Topsy
으 왜 전 안될까요 ㅠㅠ 새 프로젝트로 만들고 껃다 켜봐도 Scripts에 없네요
reply edit
Your Reaction Time!