얼마전 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)';
좀더 자세한 내용은 아래 링크에서 확인 할 수 있습니다.
처음부터 접근하고자 한다면 좀 어려울 수도 있겠지만 CSS나 jQuery를 많이 다뤄보셨다면 충분히 편하고 누군가 설명해 주지 않아도 바로 바로 해 볼 수 있어서 편합니다.
위키 문서에 보시면 좀 더 자세한 설명이 있으니 한번씩 잠깐만 살펴보시고 쓰세요~
고맙습니다.
'HTML' 카테고리의 다른 글
| CSS Cross Browser Zoom In/Out(웹 브라우저 줌인/줌아웃) (4) | 2011.02.22 |
|---|---|
| 텍스트 말줄임 [문자열 자르기] (Text Ellipsis) (3) | 2011.02.09 |
| IE 전용 이미지 계단 현상 없애기.. (0) | 2009.03.03 |
| html Table 트러짐... 숫자 영문자 자동 엔터 및 점선 표시 방법 (0) | 2009.02.16 |
| HTML Mailto Protocol (0) | 2009.01.21 |
