Zen Coding 사용법

엠에디터가 젠코딩을 지원하는지에 대한 질문을 많이 받습니다. 젠코딩의 라이브러리는 HTML과 다른 구조의 코드 형식을 아주 빠르게 암호화 할 수 있습니다.

<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 구조를 알고 있다면, 젠코딩을 이용해서 코드를 더욱 빠르게 작성할 수 있습니다.

엠에디터는 젠코딩의 완전한 지원을 제공합니다.

젠코딩은 Sergey Chikuyonok과 다른 사람들이 개발하였고, GNU 라이센스로 배포됩니다. 이 라이브러리의 핵심은 JavaScript와 Python 2.5+에서 함께 개발되었습니다. 젠코딩의 한가지 이점은 핵심과 인터페이스(컨트롤러)가 여러가지 텍스트 편집기에 사용되고자 따로 개발되었다는 점입니다. 반면에, 라이브러리에서는 코어가 문서 편집기에서 바꾸지 않고 다시 사용될수 있도록 디자인 되었습니다. 그리고 인터페이스 부분만은 다른 텍스트 편집기를 위해서 반드시 다시 작성되어야 합니다. 이 모듈형 설계는 텍스트 편집기 사이의 변화와 결함을 최소화 시킵니다.

엠에디터가 JavaScript를 지원하고 있으므로, 쉽게 젠코딩을 지원할 수 있도록 설계되었습니다. 엠에디터에서 젠코딩을 사용하려면, 핵심 부분은 변화가 거의 필요없으므로 젠코딩의 인터페이스 부분을 편집할 필요가 없습니다. 일단 인터페이스가 완성이 되면, 새로운 버전의 젠코딩이 출시될 때마다 간단한 과정의 핵심 부분만 바꾸면 됩니다. 그러므로, 버그나 작업 실패와 같은 다른 문제 없이 젠코딩의 최신 기능을 사용할 수 있습니다.

엠에디터 다운로드를 위한 젠코딩

코드조각 항목의 라이브러리 에서 엠에디터에서 젠코딩을 이용 할 수 있습니다. ReadMe 파일 안에 설명된 코드조각 플러그 인 방법으로 엠에디터에 젠코딩을 꼭 설치 해 주십시오. 설치 한 후에, 코드 조각 사용자 지정 모음에 “10개의 등록된 작업과 함께 젠코딩”이라고 이름이 붙어 있는 폴더를 찾습니다. 각각의 작업은 항목 뒤의 괄호 안에 있는 바로가기 키를 눌러서 실행할 수 있습니다.

젠코딩 폴더는 코드 조각 사용자 지정 바 안에 만들어 집니다.

젠코딩 폴더는 코드 조각 사용자 지정 바 안에 만들어 집니다.

젠코딩 이용 방법: 생략어 확장

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>

더욱이, 젠코딩은 필터 기능을 포함하고 있습니다. 필터를 세분화 하기 위해서는 | 을 사용해 주세요. 다음

p.title|e

을 입력하면 다음으로 확장됩니다.

&lt;p class="title"&gt;&lt;/p&gt;

e 필터는 다음의 세 문자를 인코딩합니다: >, <, 그리고 &, 이것은 SML문자들로써 사용되어질 수 없습니다. 더 많은 필터들을 사용할 수 있습니다.

만일 반복되는 요소들을 설명하고자 한다면, *와 숫자를 사용해서 반복을 지정할 수 있습니다. 예를 들어,

 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>

더 자세한 사항을 위해서, 여기를 참조해 주세요.

더욱이, 많은 코드 조각들이 젠코딩에서 사용 가능 합니다. 예를 들어, 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 코딩을 더욱 효과적으로 만드실 수 있습니다. 엠에디터를 위한 젠코딩을 이용해서 HTML과 XML를 만나보세요!

이전: 코드 조각 플러그-인
다음: 웹 미리보기 플러그-인