Class
  • 강좌게시판
  • Tip&Tech
  • Download
  • Tip&Tech
  • HOME > Class > Tip&Tech > Zen Coding in Editplus (HTML,CSS 코딩을 빠르게)
[정보] Zen Coding in Editplus (HTML,CSS 코딩을 빠르게)
글쓴이 기술레벨커뮤니티레벨날고픈쭈니 날 짜 12-05-04 02:40 조 회 2342
간편URL http://phpschool.com/link/tipntech/75472 복사

SyntaxHighlight로 보기

Link1 http://code.google.com/p/zen-coding/ (159)
Link2 http://vimeo.com/7405114 (116)
이번 에디터플러스 업데이트 되면서 젠코딩 지원이 되었네요.

에디터 플러스 상단메뉴에서 Zen Coding - Zen Coding 사용  활성화해주시면 되구요.
기본 단축키는 Ctrl+E입니다.
저는 Shift + Space로 사용합니다.
추가 방법은 도구 - 기본설정 - 키보드 - Zen Coding - Expand Abbreviation 선택후 단축키를 추가해주시면 됩니다.


Zen Coding은 HTML,CSS를 코딩함에 있어 생산성을 비약적으로 높여주는 개념입니다.
자동완성 기능과는 다르구요.
CSS셀렉터문법방식 그대로를 사용해 HTML태그로 전환시켜준다는 것입니다.
단축단어속성이 있어서 숙달되면 빠른 속도로 코딩할 수 있습니다.

동영상 보시면 이해가 빠르실겁니다.
http://vimeo.com/7405114


간단한 예제 따라해보시면 아실겁니다. (단축키 Ctrl + E)
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

---------------------------------------------------

덧붙이자면
Ediptplus설치 폴더에  zen_coding_epp.js 파일을 열어 보시면 Zen Coding을 확인할수있구요.
스크립트 호스팅 기능을 제공하는거죠.
다르게 사용하거나 필요하신건 자신에 맞게 추가 수정가능합니다. (수정후엔 에디터플러스 재시작)

전체댓글수 7

  • 기술레벨커뮤니티레벨zzins 12-05-04 09:04

    소스보기

  • 상당히 편해요.
    근데 아직도 무의식적으로 다 코딩하네요.
  • 기술레벨커뮤니티레벨언제돈벌어장가가남 12-05-04 10:38

    소스보기

  • ㅇㅇ 공감 백퍼
  • 기술레벨커뮤니티레벨불코 12-05-04 14:56

    소스보기

  • 와우~
    좋네여 ㅋ
  • 기술레벨커뮤니티레벨알찬돌삐 12-05-04 16:10

    소스보기

  • 와웅. 편해보이긴하는데.음.
  • 기술레벨커뮤니티레벨나갈래고양이 12-05-04 22:29

    소스보기

  • 저는 Ctrl + Enter로 할당해서 쓰고 있음. Shift + space는 한영 전환이라서;
    기존에 에디터플러스 자동 완성에 등록해서 쓰던게 익숙해져서 그런지..엄청은 아니지만 기발하긴 함ㅋㅋ
    그리고 막상 코딩하면 html 태그는 몇 줄 안되고 css가 많은게 문제
    반복되는 요소들 아니면 크게 편하다고는 못 느끼겠더라구요.

    물론 css도 젠코딩이 가능함. 약어 외는게 귀찮을때도 있지만 대충 때려 박으면 왠만한건 그냥 나오더라구요.
    p하고 변환 단축키 치면 padding:(포커스);
    m하고 변환 단축키 치면 margin:(포커스);
    fl:l하고 변환 단축키 치면 float:left;
    약어 정리된 링크
    http://code.google.com/p/zen-coding/wiki/ZenCSSPropertiesEn


    그리고  주석 달아주는 |c는 오늘 알았네요. 크게 쓸일은 없을것 같지만ㄳㄳ
  • 기술레벨커뮤니티레벨날고픈쭈니 12-05-04 23:47

    소스보기

  • CSS중 자주쓰거나 잘 까먹는것중

    bg+
    background:#FFF url() 0 0 no-repeat;

    ff
    font-family:

    bg:ie
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');

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

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

    등 다양하게 있습니다.
  • 기술레벨커뮤니티레벨폭스테리어 12-05-10 14:59

    소스보기

  • 아., 좋은것이 있었군요, expresJs 에 내장할 수 있는 Jade 템플릿(http://jade-lang.com/) 엔진과 비슷한 문법을 쓰군요, 웹개발하면 제일 타이핑하기 귀찮은게 마크업인데 ㅎㅎ, 잘 쓰겠습니다.
  • 게시물 12,482건 RSS
번호분류제목글쓴이날짜조회
12,482 정보 1원) scss 사용 중... [2] 새글 기술레벨커뮤니티레벨레어닉 13-05-24 180
12,481 DBMS mysql 에서의 in 과 조인의 선택을 위한 테스트 [7] 이미지 기술레벨커뮤니티레벨전진하는아르고 13-05-22 284
12,480 브라우저 css browser selector js to css_browser_selector.class.php [5] 링크 기술레벨커뮤니티레벨송효진 13-05-21 277
12,479 브라우저 IE9 이하 jquery placeholder 0.3 [3] 링크 기술레벨커뮤니티레벨송효진 13-05-20 331
12,478 함수 redis_cache (그누보드 함수캐쉬. redis 버젼) 기술레벨커뮤니티레벨아빠불당 13-05-20 261
12,477 설치/설정 redis 설치 [1] 기술레벨커뮤니티레벨아빠불당 13-05-20 319
12,476 알고리즘 [1원팁] php 동적인 상속 [6] 기술레벨커뮤니티레벨RGB255 13-05-18 449
12,475 스크립트 js 함수,메소드 명세, 표준인지 MSIE 지원 되는지... [5] 링크 기술레벨커뮤니티레벨송효진 13-05-15 410
12,474 DBMS 초보자를 위한 mysql에서의 비트연산 활용 [4] 기술레벨커뮤니티레벨전진하는아르고 13-05-13 546
12,473 알고리즘 페이스북이 만든 PHP 가상머신인 HipHop For PHP 를 소개합니다. [6] 링크 기술레벨커뮤니티레벨egoing 13-05-13 695
12,472 브라우저 google chrome high contrast plugin 사이트 고대비화 도구 [3] 링크 기술레벨커뮤니티레벨송효진 13-05-12 346
12,471 알고리즘 Codeigniter 2.1.3 기반 공개보드 [2] 링크 기술레벨커뮤니티레벨마냐 13-05-11 572
12,470 기타 코드가 손에 안 익으신다구요.. 이것 한번 해 보심이. [3] 링크 기술레벨커뮤니티레벨폭스테리어 13-05-09 804
12,469 서버운영 git 을 이용한 서버간 동기화 스크립트. 자동 commit, push, res… [2] 첨부파일 기술레벨커뮤니티레벨송효진 13-05-08 616
12,468 알고리즘 CodeIgniter 에서 캐쉬를 사용하는 방법을 수업으로 만들었습니… [2] 링크 기술레벨커뮤니티레벨egoing 13-05-08 404
12,467 설치/설정 NGINX와 PHP-FPM [19] 링크 인기 기술레벨커뮤니티레벨egoing 13-04-25 1532
12,466 정보 Chart.js - 6가지 종류의 예쁜 차트 [5] 링크 인기 기술레벨커뮤니티레벨킁킁탐정 13-04-24 1318
12,465 정보 List.js - List/Table를 편리하게! [5] 링크 인기 기술레벨커뮤니티레벨킁킁탐정 13-04-23 1068
12,464 정보 Rivets.js - View Logic [2] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 704
12,463 정보 Moment.js - 시간의 모든것 [8] 링크 기술레벨커뮤니티레벨킁킁탐정 13-04-23 827
 
12345678910
글쓰기
SEARCH 검색하기