XML 형식의 데이터를 입력하려면 굉장히 귀찮습니다. 특히 HTML 코드는 굉장히 많이 사용되는데, 까다로운 문법을 가지고 있어서 코딩하는데 불편함이 많죠.
<!DOCTYPE HTML&rt <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html>
굉장히 간단한 HTML 코드입니다. HTML는 꺽쇠들이 많이 쓰이고 여는 태그와 닫힌 태그를 써야 하기 때문에 태그가 2중으로 쓰이게 되서 코딩하는데 불편함이 많습니다. 그래서 나온 해법이 Zen Coding 입니다.
Zen Coding: http://code.google.com/p/zen-coding/
Zen Coding은 HTML을 빠르게 코딩하기 위해 개발된 기법입니다. 여러 종류의 에디터의 plugin 형식으로 사용됩니다. Eclipse, TextMate, Notepad++, Sublime Text22, Dreamweaver, NetBeans, Visual Studio, Ultra Edit, Chrome Extension 등등 수많은 프로그램에서 사용할 수 있습니다. Zen Coding 사용법은 에디터 마다 조금씩 다르지만, 문법은 동일합니다. 위의 코드를 만들기 위한 Zen Coding은 다음과 같습니다.
html:5
이후 Expand Abbreviation 단축키를 누르면 됩니다.(단축키는 프로그램마다 다릅니다. 예로 Sublime Text2에서는 Tab이고, Notepad++에서는 Ctrl+Alt+Enter 입니다.)
일단 기본 형식을 굉장히 간단히 만들 수 있습니다. 그 이후에도 Zen Coding은 계속 유용하게 사용될 수 있습니다.
예를 들어 아래와 같은 리스트를 만들어 본다고 합시다.
<ul class=”my-list”> <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> <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>
이 코드는 Zen Coding을 사용하면 다음과 같습니다.
ul.my-list>li*10>a
그리고 단축키를 누르면 됩니다. 엄청나게 간단해졌습니다. 백자가 넘는 코드가 17자의 코드로 변환되었습니다. 리스트를 만들 때 뿐만 아니라 wrapper 형식으로 문서를 구성할 때 열고->열고->열고->닫고->닫고->닫고를 해야 해서 귀찮을 때가 많습니다. 아래의 예를 보죠.
<div id=”wrapper”>
<div id=”header”>
<nav id=”nav”>
<ul id=”list”>
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
<li><a href=””></a></li>
</ul>
</nav>
</div>
</div>
이게 보통 HTML에서 쓰이는 열고-> 열고->…. ->닫고->닫고->….. 형식입니다. 이 코드를 Zen Coding을 사용하여 표현해 보겠습니다.
#wrapper>#header>nav#nav>ul#list>li*4>a
상당히 간단해 졌습니다. 글자 수도 글자 수 이지만, 저렇게 여려겹의 wrapper로 둘러싸는 구조로 만들다 보면 탭을 하고 백탭을 하면서 코딩하는 것이 얼마나 귀찮은 일인지 많은 분들이 아실겁니다. 하지만 이런 코딩이 한 줄로 가능해 진것입니다.
Zen Coding에 대한 자세한 문법은 홈페이지에 가면 보실 수 있습니다. 여기서는 간단한 문법만 설명해 드리고자 합니다.
위의 예를 보고 이미 어느 정도 문법을 눈치채신 분도 있으실 겁니다.
기본적인 구조는 태그#(아이디).(클래스)[attr="somethimg"]입니다.
예를 들어 <div id="wrapper" class="content" width="640px"></div>는 Zen Coding으로 div#wrapper.content[width="640px"]입니다. 여기서 div같은 경우는 생략할 수 있습니다. 태그의 이름이 정해지지 않은 경우 Zen Coding은 자동으로 div으로 인식하게 됩니다.
그리고 계층구조로 만들려면 >를 써주시면 됩니다. 위의 예제를 보시면 이해하실 수 있을 겁니다.
또한 *을 이용해서 태그를 반복할 수 있습니다. 이것도 위의 li*10을 쓴 부분을 보시면 아실 수 있을 겁니다.
마지막으로 제가 애용하는 에디터인 Sublime Text2로 Zen Coding하는 유튜브 영상을 보도록 하겠습니다.
Zen Coding을 이용하면 HTML 코딩 시간을 현저하게 줄일 수 있습니다. 또한 태그 입력을 잘못 입력하는 실수던가, 태그를 열었다가 안 닫은 실수 등을 줄임으로써 멘붕을 줄일 수 있습니다. 즐거운 코딩을 할 수 있는 겁니다. Zen Coding 만세!
'프로그래밍 > web' 카테고리의 다른 글
| stroll.js - 멋있는 스크롤 효과 in 웹 (0) | 2012.09.07 |
|---|---|
| PhoneGap Build – 폰갭으로 모든 플랫폼의 앱을 만들다. (4) | 2012.08.24 |
| 블로그에 addthis 달기 (소셜 공유, 페이스북 like, 트위터 tweet) (0) | 2012.03.30 |
| jPlayer - HTML5 Video & Audio Player (0) | 2012.03.29 |
| Canvas로 그린 Dynamic 시계 (2) | 2012.03.28 |
