티스토리 뷰

젠 코딩 정말 나이스 하네요. 
긴 HTML 등들은 TAG, CLASS, ID 속명만으로 html tag를 자동으로 한방에 생성해주고 , 여러가지 
옵션으로 편하게 사용할수 있네요.  에디터도 여러가지 지원하네요.

 

최신 버전의 에디터 플러스를 설치 하시면 zen coding 명령 탭이 화면에 나타납니다.  최신버전의 에디터플러스 설치하세요.


소개 : http://guny.kr/zen-coding-editplus/

Zen Coding 소개  동영상 : http://vimeo.com/40333685

http://code.google.com/p/zen-coding/wiki/Actions

 

http://code.google.com/p/zen-coding/wiki/ZenHTMLSelectorsEn



 

명령어 설명  - 단축키 잘 지정해서 쓰세욤.

 

  • expand abbreviation : 약어 실행
  • wrap width abbreviation : 영역을 감싸고 약어를 실행
  • Match pair : 쌍으로 매치되는 영역을 선택합니다.
  • Match pair Inward : 현재 커서위치 부터 매치되는 영역을 선택 합니다.
  • Next Edit pointer : 다음 수정될 포인터 위치
  • Prev Edit pointer : 이전 수정될 포인터 위치
  • go to Matcing pair : 매칭 되는 태그 위치로 커서를 이동
  • Merge Lines : 현재 선택된 영역 부터 한줄로 정렬합니다.
  • Toggle Comment : 선택된 영역부터 주석처리 하기
  • Split/join : 나누고/합치기. ( 흠.. 태그하나로 변경되어버리네. ^^; )
  • Remove Tag : 태그 지우기 
  • Numbers
     - Evaluate Math Expression : 연산을 실행
     - Increment Number by 1 : 1 증가
     - Decrement Number by 1 : 1 감소
     - Increment Number by 0.1 : 0.1 증가
     - Decrement Number by 0.1 : 0.1 감소
     - Increment Number by 10 : 10 증가
     - Decrement Number by 10 : 10 감소
  • select Next Item  : 다음 아이템을 선택
  • select previous item : 이전 아이템을 선택
  • reflect css value : css 값을 반영


예) 커서를 문장의 끝에 위치하여, Zen Coding ==> expand abbreviation 실행해 보세요.

html:xt
 
#header>ul.menu>li*5
 
#header>ul.menu>li.menu$*5
 
#header>ul.menu>li.menu$*5|c
 
#header>ul.menu>li.menu$*5>a>img
 
table+
 
table>tr*5>td*2
 
div.item$-$-content*6
 
div#page>div.logo+ul#navigation>li*5>a

'웹개발 > HTML&CSS' 카테고리의 다른 글

css3 , 트랜지션 애니메이션 예제  (0) 2012.12.13
IE 버전 다른 스타일 적용하기  (0) 2012.06.14
트위터 css , 이미지 버튼  (0) 2012.02.03
HTML5 개발자 API 가이드  (0) 2012.01.18
CSS3 핵심 가이드.  (0) 2012.01.13
댓글
D-DAY
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함