Zen Coding – 빠른 HTML 코딩을 위한 툴

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 만세!

 

 

 

 

신고
비밀 댓글