본문 바로가기

HTML

CSS와 jQuery의 Selector 같은 코딩 페턴으로 Html, CSS을 렌더링 해 주는 Zen Coding을 알고 계십니까?

얼마전 Editplus 버전을 업데이트 했습니다.

잠깐 테스트 용으로요..

그런데 왠 못 보던 메뉴가 생겼습니다.

ZC라는 Zen Coding입니다.

 

CSS나 혹은 jQuery를 많이 다뤄보신 분이라면.. 굉장히 편하게 Html을 작성 할 수 있는 코딩 도우미 입니다.

거의 모든 Editor에서 사용이 가능한 것 같습니다. vs 2010, 2012, editplus, eclips 등등등

 

코딩 형태는 아래와 같습니다.

div#id.className>div.test

그리고 지정해 놓은 ZC 단축키를 누르게 되면 아래와 같이 확장 됩니다.

div#id.className>div.test
<div id="id" class="className">
	<div class="test"></div>
</div>

CSS나 jQuery를 많이 다뤄보신 분이라면.. 바로 알아 차릴 수 있는 직관적인 코딩 도우미라고 할 수 있겠네요!!

저 같은 경우에 개발자이다 보니.. css 관련 명령어가 가물가물한데..

ZC가 있으니 편하게 개발 할 수 있습니다.

 

간단한 Html 명령어는 아래와 같습니다.

<!-- Html Doc Type -->
html:4s, html:4t, html:xt, html:xs
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>
<!-- 순차 넘버링 -->
ul>li.className_$$*4, $$$*7
<ul>
	<li class="className_01"></li>
	<li class="className_02"></li>
	<li class="className_03"></li>
	<li class="className_04"></li>
</ul>
<!-- 자동 확장 -->
table+, ul+
<table>
	<tr>
		<td></td>
	</tr>
</table>

CSS 관련 명령어는 아래와 같습니다.

@i
@import url();

!
!important

pos:s, pos:a, pos:r, pos:f
position:static;

d:n, d:b, d:i
display:none;

m:4, m:a, m:0, m:2
margin:0 0 0 0;

p:0, p:a, p:0, p:2
padding:0;

op:ie
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

op:ms
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';

 

좀더 자세한 내용은 아래 링크에서 확인 할 수 있습니다.

Zen Coding URL

Html Elements

Html Selectors

Css Properties

 

처음부터 접근하고자 한다면 좀 어려울 수도 있겠지만 CSS나 jQuery를 많이 다뤄보셨다면 충분히 편하고 누군가 설명해 주지 않아도 바로 바로 해 볼 수 있어서 편합니다.

위키 문서에 보시면 좀 더 자세한 설명이 있으니 한번씩 잠깐만 살펴보시고 쓰세요~

 

고맙습니다.