Zen Coding 사용 방법

---

EmEditor가 Zen Coding을 지원하는지에 대한 문의를 자주 받습니다. Zen Coding은 HTML 및 기타 구조화된 코드 형식을 훨씬 빠르게 코딩할 수 있게 해 주는 라이브러리입니다. 예를 들어 다음과 같은 한 줄은

div#page>div.logo+ul#navigation>li*5>a

다음과 같이 확장할 수 있습니다

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

입력하려는 HTML 구조를 알고 있다면 Zen Coding을 사용하여 코드를 완전히 작성하는 것보다 훨씬 빠르게 코드를 작성할 수 있습니다.

EmEditor는 Zen Coding을 완벽하게 지원합니다

Sergey Chikuyonok 등이 개발한 Zen Coding은 GNU 라이선스로 배포됩니다. 라이브러리의 핵심은 JavaScript와 Python 2.5+로 모두 개발되었습니다. Zen Coding의 장점 중 하나는 다양한 텍스트 편집기에서 사용할 수 있도록 핵심과 인터페이스(컨트롤러)가 별도로 개발된다는 것입니다. 즉, 이 라이브러리는 텍스트 편집기 간에 변경 없이 핵심을 재사용할 수 있고, 다른 텍스트 편집기용으로는 인터페이스 부분만 다시 작성하면 되도록 설계되었습니다. 이러한 모듈식 설계는 텍스트 편집기 간의 기능 구현 편차와 결함을 최소화합니다.

EmEditor는 JavaScript를 지원하므로 텍스트 편집기에서 Zen Coding을 쉽게 지원할 수 있습니다. EmEditor에서 Zen Coding을 사용하려면 핵심 부분은 거의 또는 전혀 수정할 필요가 없으므로 Zen Coding의 인터페이스 부분만 편집하면 됩니다. EmEditor 개발자는 단 이틀 만에 Zen Coding을 EmEditor로 포팅하는 작업을 마쳤습니다. 인터페이스가 완성되면 Zen Coding의 최신 버전이 나올 때 핵심만 교체하면 되므로 훨씬 간단합니다. 따라서 버그나 구현 누락을 걱정하지 않고 Zen Coding의 최신 기능을 사용할 수 있습니다.

EmEditor용 Zen Coding 다운로드

EmEditor용 Zen Coding은 라이브러리의 Snippets 범주에서 다운로드할 수 있습니다. ReadMe 파일에 설명된 Snippets 플러그인 방법에 따라 EmEditor용 Zen Coding을 설치하십시오. 설치 후 Snippets 사용자 지정 표시줄에 10개의 동작이 등록된 Zen Coding 폴더가 표시됩니다. 각 동작은 각 항목 뒤 괄호에 적힌 바로 가기 키를 눌러 실행할 수 있습니다.

Zen Coding 사용 방법: 약어 확장

10개 동작 중 가장 자주 사용되는 것은 “약어 확장” 동작입니다. 이 동작은 입력한 약어를 CSS 선택기 형식이 작동하는 방식과 유사하게 전체 HTML 코드로 확장합니다. 바로 가기는 F12 키에 할당되어 있습니다. 약어를 확장하려면 약어를 입력한 다음 F12를 누릅니다. 예를 들어

div#name

을 입력하고 F12를 누르면 약어가 다음과 같이 확장됩니다

<div id="name"></div>

#은 HTML의 ID 요소를 지정하는 데 사용됩니다. 클래스를 지정하려면 # 대신 .을 사용합니다. 예를 들어 다음과 같이 입력하고

div.name

F12를 누르면 다음과 같이 됩니다

<div class="name"></div>

>를 . 대신 사용하면 자식 요소를 지정합니다. 예를 들어,

table>tr>td

는 다음과 같이 확장됩니다

<table>
	<tr>
		<td></td>
	</tr>
</table>

+를 사용하면 둘 이상의 요소가 확장됩니다. 예를 들어,

 p.one+p.two

는 다음과 같이 됩니다

<p class="one"></p>
<p class="two"></p>

[ ]를 사용하여 특성을 지정합니다. 예를 들어,

p[title]

는 다음과 같이 확장됩니다

<p title=""></p>

또한 Zen Coding에는 필터 기능이 포함되어 있습니다. 필터를 지정하려면 |를 사용합니다. 다음을 입력하면

p.title|e

다음과 같이 확장됩니다

<p class="title"></p>

e 필터는 XML 리터럴로 사용할 수 없는 세 문자 >, <, &를 인코딩합니다. 사용 가능한 필터가 더 있습니다.

반복되는 요소를 설명하려면 *와 숫자를 사용하여 반복 횟수를 지정할 수 있습니다. 예를 들어,

 p*3

는 다음과 같이 확장됩니다

<p></p>
<p></p>
<p></p>

또한 $를 사용하면 클래스 이름의 ID 이름 안에 순차 번호를 포함할 수 있습니다. 예를 들어 다음과 같이 입력하면

p.name-$*3

다음과 같이 됩니다

<p class="name-1"></p>
<p class="name-2"></p>
<p class="name-3"></p>

ul+, table+, dl+과 같은 특수 약어는 입력 시간을 크게 줄여 줍니다. 예를 들어,

ul+

는 다음과 같이 확장됩니다

<ul>
	<li></li>
</ul>

자세한 내용은 다음을 참조하십시오

• Zen Coding 색인
• 필터

또한 Zen Coding에는 사용할 수 있는 스니펫이 많습니다. 예를 들어 EmEditor에서 HTML 구성을 선택한 경우

html:4t

는 다음과 같이 확장됩니다

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>

</body>
</html>

그리고 CSS 구성을 선택한 경우 F12를 누르면

@i

가 다음과 같이 확장됩니다

@import url();

사용 가능한 스니펫 목록은 다음에 설명되어 있습니다

• HTML 요소
• CSS 속성

편리한 요약표는 다음에서 확인할 수 있습니다

• 요약표

기타 기능

약어 확장은 Zen Coding의 여러 기능 중 하나일 뿐입니다. 모든 동작에 대한 자세한 내용은 다음을 참조하십시오:

• 동작

Zen Coding을 사용하면 HTML 코딩을 훨씬 효율적으로 수행할 수 있습니다. EmEditor용 Zen Coding을 사용하여 HTML과 XML 코딩을 즐겨 보십시오!