Zen Coding 사용법

Zen Coding(이하 "젠 코딩")이라는 새로운 HTML 및 CSS 코드 작성하는 방법이 있습니다. 블로그를 운영하다가 또는 개인 웹사이트를 운영하다보면 HTML과 CSS 코드를 작성해야하는 일이 종종 있는데 젠 코딩을 이용해서 빠르게 프로토 타이핑을 할 수 있었습니다. :D

Zen Coding

젠 코딩은 구글 코드로 제공이 됩니다. 다운로드 가능한 주소는 Zen Coding입니다. 각자 사용하는 에디터에 맞게 지원된 코드가 있으면 내려 받읍시다. 저 또한 Zen Coding을 지원하는 별도의 에디터 프로그램을 사용합니다. :)

Example

젠 코딩의 좋은 점은 불필요한 반복적인 타이핑을 줄여줍니다. 예를 들어서 하나씩 살펴봅시다.

Looping

단순 반복적인것은 * 기호를 통해 가능합니다.

div*5

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

add class

DOM 객체에 class 속성을 넣고 싶으면 . 기호를 통해 할 수 있습니다.

div.blue*5

<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>

add Id

DOM 객체에 id 속성을 넣고 싶으면 # 기호를 통해 할 수 있습니다.

div#myId

<div id="myId"></div>

add multi var

DOM 객체에 id, class등을 차례로 부여하고 싶다면 $ 기호를 통해 할 수 있습니다.

div#myId-$*2

<div id="myId-1"></div>
<div id="myId-2"></div>

add child object

만약 하위 DOM 객체를 넣고 싶다면 > 기호를 통해 할 수 있습니다.

ul>li

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

add brother object

만약 동일한 위치에 DOM 객체를 넣고 싶다면 + 기호를 통해 할 수 있습니다.

ul>li>strong+p

<ul>
	<li>
		<strong></strong>
		<p></p>
	</li>
</ul>

complex

약간 응용을 하자면 다음처럼도 가능합니다.

div.blue.green>ul>li#id-$*3>strong+p

<div class="blue green">
	<ul>
		<li id="id-1">
			<strong></strong>
			<p></p>
		</li>
		<li id="id-2">
			<strong></strong>
			<p></p>
		</li>
		<li id="id-3">
			<strong></strong>
			<p></p>
		</li>
	</ul>
</div>

마무리

제가 주로 사용하는 부분만 예제로 작성했습니다만, 이 외에도 더 많은 사용법이 있습니다. :D