HTML/CSS 코드를 빠르게 작성하는 Zen Coding 구현

이 기사에서는 CSS 선택기를 모방한 구문을 사용하여 HTML 및 CSS를 빠르게 개발하는 새로운 방법을 보여줍니다. Sergey Chikuyonok이 개발했습니다.

HTML 코드(모든 태그, 속성, 인용부호, 중괄호 등 포함)를 작성하는 데 얼마나 많은 시간을 소비하시나요? 편집기에 코드 힌트가 있으면 작성하기가 더 쉽지만, 그래도 여전히 많은 코드를 수동으로 입력해야 합니다.

JavaScript의 경우 페이지의 특정 요소를 가져오려고 할 때 동일한 문제에 직면하게 되며 많은 코드를 작성해야 하므로 유지 관리 및 재사용이 어려워집니다. JavaScript 프레임워크가 등장했으며 CSS 선택기 엔진도 도입되었습니다. 이제 간단한 CSS 표현식을 사용하여 DOM 요소를 얻을 수 있습니다. 이는 매우 멋진 기능입니다.

하지만 CSS 선택기를 사용하여 요소를 레이아웃하고 위치를 지정할 수 있을 뿐만 아니라 코드를 생성할 수 있다면 어떨까요? 예를 들어 다음과 같이 쓴다면:

코드를 복사하세요 코드는 다음과 같습니다:

div#content>h1 +p

...그러면 다음과 같은 출력을 볼 수 있습니다:

코드 복사 코드는 다음과 같습니다.

/p>
上面的效果可以用dreamweaver，扩展下载地址 Zen Coding for Dreamweaver v.0.7 测试通过
有些迷惑吧？今天，我将向你介绍Zen Coding，一组用于快速HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄语)，由鄙人(也就是我)开发了数月并最终达到比较成熟的状态。Zen Coding由两个核心组件组成：一个缩写扩展器(缩写为像CSS一样的选择器)和上下文无关的HTML标签对匹配器。看一下这个演示视频来看一下它们能为你做些什么。

注意：该视频原版位于Vimeo，但是要看的话需要翻[和谐]墙先，地址在这里：http://vimeo.com/7405114，上面的视频是我费尽周折从Vimeo上下载下来上传到优酷的，上传后质量竟被大打折扣了，囧。youtube上也有一份视频，是基于Aptana的演示，一样很精彩：http://www.youtube.com/watch?v=ug84Ypwqfzk。PS:貌似youtube要比Vimeo翻[和谐]墙容易些，不过如何翻[和谐]墙不在本站讨论范围。

如果你想跳转到详细介绍和使用指南，请看一下演示页面并立刻下载你适用的插件：

Demo

Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
中文版演示

下载(完全支持)

Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

下载(部分支持，只支持“展开缩写”)

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

现在让我们看一下这些工具是如何工作的吧。

展开缩写

展开缩写功能将类似CSS的选择器转换为XHTML代码。术语“缩写”可能会有点儿难以理解。为什么不直接称之为“CSS选择器”呢？嗯，首要原因是语义化：“选择器”意为选择一些东西，但是在这里我们事实上是生成一些东西，是写一个长代码的较短的替代。其次，它只是使用真实的CSS选择器语法的一个小的子集，并添加了一些新的操作符。

这里是一个支持的属性和操作符的列表：

E
요소 이름(div, p);
E#id
id를 사용하는 요소(div#content, p#intro,span#error);
E.class
클래스 요소(div.header, p.error.critial)를 사용하세요. 또한 class와 idID를 조합하여 사용할 수도 있습니다: div#content.column.width;
E>N
하위 요소(div>p, div#footer>p>span);
E+N
형제 요소(h1+p, div#header+div#content+div#footer);
E*N
요소 곱셈(ul#nav>li*5>a);
E$*N
항목 번호(ul#nav>li.item-$*5)

보시다시피 Zen Coding을 사용하는 방법을 이미 알고 계십니다. 다음과 같은 간단한 가짜 CSS 선택기(어, "약어"라 죄송합니다)...

코드 복사 코드는 다음과 같습니다.

div#header>img.logo+ul#nav>li*4>a

요소를 생성하려면 li*5를 작성하면 됩니다. 또한 모든 하위 요소를 재정의합니다. 내부에 태그가 있는 4개의
요소를 작성하려면 간단히 li*4>a를 작성하면 다음 HTML 코드가 생성됩니다.
코드 복사 코드는 다음과 같습니다.
;/li>

마지막 - 원하는 상황에 대한 항목 번호 인덱스로 중복 요소를 표시합니다. item1, item2 및 item3 클래스를 사용하여 세 개의

요소를 생성한다고 가정합니다. div.item$*3 이렇게 쓰면 됩니다.

코드 복사 코드는 다음과 같습니다.

< /div>

인덱스를 표시할 클래스 또는 ID 속성에 원하는 만큼 달러 기호를 추가하기만 하면 됩니다. 그럼 이렇게...

코드 복사 코드는 다음과 같습니다.

div# i$-test.class $$$*5

은 다음으로 변환됩니다:

코드 복사 코드는 다음과 같습니다.

< ;/div>

Zen 코딩 방법 언제 태그를 생성해야 하는지 알고 있습니까? 기본 속성을 추가하거나 닫는 태그를 건너뛰나요? 출력 요소를 설명하는 zen_settings.js라는 전용 파일이 있습니다. 이는 각 언어의 약어를 설명하는 간단한 JSON 파일입니다(예, HTML, XSL, CSS 등과 같은 다양한 구문에 대한 약어를 정의할 수 있습니다). 공통 언어 약어 정의는 다음과 같습니다. html': { 'snippets': { 'cc:ie6': '',
...

}, '약어': { 'a': '', 'img': '', ... } }

요소 유형

Zen Coding에는 "스니펫"과 "약어"라는 두 가지 주요 요소 유형이 있습니다. 조각은 임의의 코드 조각이고 약어는 태그 정의입니다. 스니펫을 사용하면 원하는 코드를 작성할 수 있으며 작성한 형식으로 출력되지만 수동으로 형식을 지정하고(줄 바꿈 및 들여쓰기에 n 사용) ${child} 변수를 Go to where에 넣어야 합니다. cc:ie6>style과 같이 하위 요소를 출력하려고 합니다. ${child} 변수를 사용하지 않으면 코드 조각에서 다음에 하위 요소가 출력됩니다.

약어를 사용하려면 마크업 정의를 작성해야 하는데 구문이 매우 중요합니다. 일반적으로 와 같은 모든 기본 속성을 포함하는 간단한 태그를 작성해야 합니다. Zen Coding이 로드되면 태그 정의를 태그 이름, 속성(순서 포함) 및 태그가 비어 있는지 여부를 설명하는 특정 개체로 구문 분석합니다. 따라서 라고 쓰면 태그가 비어 있어야 한다고 Zen Coding에 알리고 "약어 확장" 동작은 태그를 출력하기 전에 이에 대한 특정 규칙을 사용하게 됩니다.

스니펫과 약어의 경우 약어가 확장될 때 커서의 위치를 Zen Coding에 알려주는 파이프 기호를 추가할 수 있습니다. 기본적으로 Zen Coding은 빈 속성의 따옴표 사이와 여는 태그와 닫는 태그 사이에 커서를 배치합니다.

예

그래서 약어를 작성하고 '약어 확장' 액션을 소환하면 어떤 일이 발생하는지 설명합니다. 첫째, 완전한 약어를 독립된 요소로 분리합니다. 따라서 div>a는 당연히 관계를 유지하면서 div와 a 요소로 분할됩니다. 그런 다음 각 요소에 대해 파서는 먼저 코드 조각 내에서 정의를 찾은 다음 약어 내에서 정의를 찾습니다. 찾을 수 없는 경우 해당 요소의 이름이 새 태그로 사용되며 약어로 정의된 ID와 클래스가 해당 요소에 추가됩니다. 예를 들어, mytag#example을 작성했는데 파서가 조각이나 약어에서 mytag 정의를 찾을 수 없으면 를 출력합니다.

저희는 기본 CSS와 HTML 약어 및 스니펫을 많이 만들었습니다. Zen Coding 사용법을 배우면 생산성이 향상될 수 있습니다.

HTML 태그 쌍 일치자

HTML 코더의 또 다른 일반적인 작업은 요소에 대한 태그 쌍을 찾는 것입니다. 예를 들어 전체

태그를 선택하여 다른 곳으로 이동하거나 삭제하려고 합니다. 또는 닫는 태그를 찾고 있으며 해당 태그가 속한 시작 태그를 알고 싶을 수도 있습니다.

안타깝게도 많은 최신 개발 도구에는 이 기능이 부족합니다. 그런 다음 Zen Coding의 일부로 나만의 태그 쌍 일치 프로그램을 작성하기로 결정했습니다. 아직 베타 버전이고 몇 가지 문제가 있지만 꽤 잘 작동하고 빠릅니다. 전체 문서를 탐색하는 대신(일반 HTML 태그 쌍 일치 프로그램처럼) 현재 커서 위치에서 시작하여 관련 태그를 찾습니다. 이로 인해 매우 빠르고 컨텍스트가 필요하지 않습니다. 이 JavaScript 코드 조각에서도 작동합니다.

코드 복사 코드는 다음과 같습니다.

var table = ''; for (var i = 0; i < 3; i++) {
테이블 + = ''; for (var j = 0; j 테이블 += ''; >}
테이블 += ''
}
테이블 += '

' + j + '

약어 줄바꿈 사용

약어 검색기와 태그 쌍 검색기의 기능을 하나로 결합한 정말 멋진 기능입니다. 브라우저 버그를 수정하기 위해 래퍼 요소를 추가해야 한다는 사실을 얼마나 자주 발견하셨나요? 아니면 블록 수준 콘텐츠에 배경 이미지나 테두리 등의 장식을 추가해야 합니까? 시작 태그를 작성하고 코드를 일시적으로 중단한 다음 관련 지점을 찾은 다음 태그를 닫아야 합니다. 여기서 "약어로 래핑"이 도움이 될 수 있습니다.

이 기능은 매우 간단합니다. 약어를 입력하라는 메시지를 표시한 다음 적절한 "약어 확장" 작업을 수행하고 약어의 마지막 요소 안에 원하는 텍스트를 배치합니다. 텍스트를 선택하지 않으면 태그 쌍 일치 프로그램이 시작되고 결과가 사용됩니다. 또한 커서가 어디에 있는지(태그 내용 내부 또는 여는 태그와 닫는 태그 사이)도 알고 있습니다. 위치에 따라 태그의 내용이나 태그 자체를 래핑합니다.

약어 래핑은 개별 줄을 래핑하기 위한 특정 약어 구문을 도입합니다. 예를 들어 ul#nav>li*>a와 같이 곱셈 연산자 다음의 숫자로 이동하면 됩니다. Zen Coding은 정의되지 않은 승수를 사용하는 요소를 찾으면 이를 반복 요소로 처리하여 해당 장의 줄 수만큼 출력하고 각 줄의 내용을 추가합니다. 반복되는 요소의 마지막 하위 요소 내부.

이 약어 div#header>ul#navigation>li.item$*>a>span을 이 텍스트 외부로 래핑하는 경우:

코드 복사 코드는 다음과 같습니다.

회사 소개 
제품 
뉴스 
블로그 
문의

 

당신 다음과 같은 결과를 얻게 됩니다.

코드 복사 코드는 다음과 같습니다.

< div id=" header">

你可以看到，Zen Coding是一个强大的文本处理工具。

快捷键

Ctrl+,
展开缩写
Ctrl+M
匹配对
Ctrl+H
使用缩写包括
Shift+Ctrl+M
合并行
Ctrl+Shift+?
上一个编辑点
Ctrl+Shift+?
下一个编辑点
Ctrl+Shift+?
定位匹配对

这些快捷键是可以自定义的。

在线演示

你已经学到很多关于Zen Coding如何工作以及它是如何使你的编码更容易了。现在为什么不自己尝试一下呢？因为Zen Coding是用纯JavaScript开发并迁移到Python，它甚至可以用于浏览器内部，这令它成为引入到CMS的首选。

Demo (使用 Ctrl + , 展开缩写，需要JavaScript支持)
中文版演示

支持的编辑器

Zen Coding并不依赖某个特定的编辑器。它是一个只处理文本的出色的组件：它获取文本、做一些处理并放回新的文本(或索引，用于标签匹配)。Zen Coding由JavaScript和Python编写，所以它实际上可以运行于任何平台。在Windows，你可以运行JavaScript版本，而Mac和Linux 分支可以使用Python版。

如果让你的编辑器支持Zen Coding，你需要写一个特定的可以在你的编辑器和Zen Coding之间转换数据的插件。问题是一个编辑器可能不会完整的支持Zen Coding因为它本身的插件系统。比如，TextMate通过使用脚本输出替换当前行很容的就支持了“展开缩写”功能，但是它不能处理标签对匹配因为没有标准的方法请求TextMate来选择内容。

完全支持

Aptana (跨平台);
Coda, via TEA for Coda (Mac);
Espresso, via TEA for Espresso (Mac);

部分支持(只支持“展开缩写”)

TextMate (只能用于Mac机,Windows可以使用E-text编辑器替代);
TopStyle;
Sublime Text;
GEdit;
Dreamweaver CS4
editArea在线编辑器;
Zen Coding在线编辑器中文版

Aptana是我主要的开发环境，它使用一个JavaScript版本的Zen Coding。它也包含很多其它的我用于日常工作的工具，所以任何一个新的Zen Coding版本都将会首先对Aptana可用，然后部署到Python并兼容其它的编辑器。

Coda和Espresso 插件被杰出的Text Editor Actions (TEA) 平台支持，由Ian Beck开发。原始的源代码在GitHub上，但我还是制作了我自己的分支以整合Zen Coding的特性。

总结

很多尝试过Zen Coding的人都说它改变了他们写页面的方式。当然还有很多事情要做，还有很多的编辑器需要被支持以及一些文档要写。请浏览现在的文档以及源代码以寻找你的问题的答案。希望你喜欢Zen Coding!

附：Zen coding的具体用法

遗憾的是，本文原作者并没有说明zen coding的具体用法，神飞认为有必要做以下简要的说明。这里就以Aptana/Eclipse和Dreamweaver为例，其它编辑器平台暂不描述，如有疑问可以在评论中与前端观察的网友交流。

Aptana/Eclipse

由于Aptana本身就是基于Eclipse的，所以，Zen Coding也是支持Eclipse的，只是需要一个EclipseMonkey插件的支持，Aptana已经封装了这个插件，所以如果你使用Aptana，下面的第一步可以跳过。

업데이트 웹사이트를 통해 EclipseMonkey를 설치하세요: http://download.eclipse.org/technology/dash/update(Aptana를 사용하는 경우 이 단계를 건너뛸 수 있습니다)
현재 작업에서 최상위 프로젝트를 만들고 이름을 지정합니다(예: zencoding).
새로 생성된 프로젝트에 scripts 폴더를 생성합니다.
다운로드한 ZIP 플러그인 패키지를 이 폴더에 추출합니다. 프로젝트 구조는 다음과 같습니다.
설치 후 Aptana 메뉴바의 "스크립트" 메뉴에 Zen 코딩 관련 하위 메뉴가 나타납니다

참고:

Aptana 공식 플러그인은 MAC 기반입니다. Windows를 사용하는 경우 단축키를 수동으로 변경해야 합니다. (각 파일 헤드의 주석 조각에서 변경하세요.)
공식 파일 인코딩이 좀 지저분합니다. 인코딩 문제에 주의해 주세요.

드림위버

좋은 소식은 이제 DreamWeaver 플러그인에 Zen 코딩이 있다는 것입니다. 나쁜 소식은 플러그인이 지원하는 기능이 거의 없으며 약어 확장만 지원한다는 것입니다. 그리고 기본 단축키가 유효하지 않습니다. 작업은 명령 메뉴에서만 클릭할 수 있습니다. 또한 플러그인이 CS4 버전만 지원하는지 여부는 테스트하지 않았습니다. 하지만 더 좋은 점은 작성자가 이 플러그인의 소스 코드도 공개했으며 Dreamweaver 플러그인을 사용자 정의할 수 있다는 것입니다.

사실 공식 DW 플러그인은 Windows에서 약간의 버그가 있습니다. 즉, 간단히 수정하고 패키지를 다시 컴파일한 것입니다. 이 컴퓨터에서는 문제가 없습니다. . 관심이 있으시면 아동용 신발을 다운로드하여 시험해 보실 수 있습니다: http://www.boxcn.net/shared/c71z7x7sfe

PS: 공식 DW 플러그인이 업데이트되었습니다. 추천공식 웹사이트에서 다운로드하세요. 새로운 플러그인은 더 많은 기능 지원을 추가합니다. 업데이트 @ 12-23-2009

특별 추천: Haoqing 학생이 약어를 연습하고 많은 훌륭한 사용 사례를 요약했습니다. 가서 배우세요.

원저자 소개:

Sergey Chikuyonok은 이미지와 JavaScript 효과부터 작업 흐름과 시간을 절약해 주는 코딩에 이르기까지 최적화에 큰 열정을 갖고 있는 러시아의 프런트 엔드 개발 엔지니어이자 작가입니다. 그의 홈페이지와 트위터를 방문해 보세요.

원본: http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html