에디트플러스 Zen Coding 사용방법

EditPlus 3.41 버전부터 추가되었던 Zen Coding 기능을 소개합니다. 기존 사용자들은 저처럼 기능이 추가 됐음에도 기존 자주 사용하던 기능 위주로만 툴을 사용해 에디터가 버전업이 되더라도 버그 픽스에 대한 부분만 체감할 수 있었는데요. (언제부터인가 새 기능에 둔감해진 자신의 모습을 보게 됩니다.)

옆 그림에서 보이듯이 Zen Coding 사용을 체크하면 html 코딩이 귀찮은 분들에게는 혁명이 일어납니다. 간단하게 설명하자면 일종의 매크로 기능입니다. 하지만 사용을 위해서는 명령 패턴을 익혀야 되겠죠. 하지만 명령들의 구조가 새로 공부를 해야 한다거나 복잡한 형태는 아니기에 기존 코딩을 하시던 분들은 약간의 이해만 하면 바로 사용하실 수 있습니다.

표를 보시면 이해가 빠르실 겁니다. Zen Coding 명령 한 줄로 아래 HTML 코드가 생성 됩니다. 기본 구조는 앨리먼트#(아이디).(클래스)[attr=”속성”] 입니다. 앨리먼트 요소를 지정하지 않고 아이디나 클래스만 지정해주면 자동으로 <div>블록이 생성되면서 해당 아이디나 클래스 이름이 들어가게 됩니다. 표 내용 중 #wrapper 가 대표적인 예가 되겠습니다. 그리고 꺽쇠(>)는 하위 Depth, 더하기(+)는 동일 Depth를 의미합니다.

* Zen Coding 명령 입력 후, 명령줄에서 Ctrl + E를 하시면 HTML로 변환이 이루어 집니다.

이 기능이 주는 장점이라면 매번 HTML 코딩 시 열기 닫기를 반복하지 않아도 될 뿐만 아니라 단순 오타로 인한 코드 에러로부터 좀 더 자유로울 수 있다는 점입니다. 한마디로 귀차니스트를 위한 기능이라고 할 수 있습니다.