우선 노트패드++에 설치하기 전에 https://codepen.io/ 사이트에서 미리 zencoding을 확인해보려 한다.
codepen은 기본적으로 zen coding플러그인이 장착되어 있어 빠르게 markup을 할 수 있도록 도와준다.
예를 들어 codepen에서 아래과 같이 입력하고 Tab을 누르면 화면과 같이 자동으로 완성된다.
[ zen coding ]
div.container>p>lorem 을 입력한다.
[ zen coding ]
키보드의 Tab를 누르면 화면과 같이 자동으로 코드를 생성한다.
Notepad++에 zen coding 플러그인 추가하기
메뉴/플러그인/plugin Manger / Show Plugin Manager/
플러그인 매니저 없을 때 설치하기
https://github.com/bruderstein/nppPluginManager/releases
노트패드++ 버전에 맞는 소스 다운로드
x86 (PluginManager_v1.4.9_UNI.zip)
64bit (PluginManager_v1.4.9_x64.zip)
(다운로드 한후 압축을 해제하고 파일을 c\/program files(x86)/notepad++ 폴더에 붙여넣기 한다)
플러그인중 Zen coding을 선택하고 install을 클릭한다.
플러그인 업데이트 경고가 나오면 업데이트를 한후 다시 zencoding 플러그인을 설치해야 한다.
Restart
플러그인중 Zen coding을 선택하고 install을 클릭한다.
설치중
플러그인 설치된 화면
zen coding 사용법
아래와 같이 입력하고 메뉴에서 플러그인/zen coding-python/ expand abbreviation을 선택한다.
단축기 변경하기
기본 단축키는 Ctrl + Alt + Enter인데 좀더 간단한 코드로 변경해볼 수 있다.
설정/ 단축키 설정
Plugin commands의 보면 Expand Abbreviation의 단축키 설정이 나와있다. 해당 칸을 선택하고 Modify를 눌러 수정한다.
충돌이 없는 조합으로 원하는 단축키 설정을 한다. CTRL + shift + Enter로 변경해보았다.
사용법 예시 HTML
div#header | <div id="header"></div> |
div.container | <div class="container"></div> |
div.container>h1 | <div class="container"> <h1></h1> </div> |
div.container>h1#title | <div class="container"> <h1 id="title"></h1> </div> |
p+p | <p></p> <p></p> |
div.item+div.item | <div class="item"></div> <div class="item"></div> |
td[colspan=2] | <td colspan="2"></td> |
span[title="Hello" rel] | <span title="Hello" rel=""></span> |
ul.news-list>li.item*3 | <ul class="news-list"> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> |
p.name-$*3 | <p class="name-1"></p> <p class="name-2"></p> <p class="name-3"></p> |
select>option#item-$*3 | <select name="" id=""> <option value="" id="item-1"></option> <option value="" id="item-2"></option> <option value="" id="item-3"></option> </select> |
ul+ | <ul> <li></li> </ul> |
table+ | <table> <tr> <td></td> </tr> </table> |
dl+ | <dl> <dt></dt> <dd></dd> </dl> |
zen coding HTML 참조
https://code.google.com/archive/p/zen-coding/wikis/ZenHTMLSelectorsEn.wiki
사용법 예시 CSS
@i | @import url(); |
@f | @font-face { font-family:; src:url(); } |
! | !important |
pos | position:; |
pos:s | position:static; |
pos:a | position:absolute; |
pos:f | position:fixed; |
fl | float:; |
fl:l | float:left; |
d:b | display:block; |
d:i | display:inline; |
d:ib | display:inline-block; |
m:a | margin:auto; |
fz | font-size:; |
|
|
zen coding CSS 참조
https://code.google.com/archive/p/zen-coding/wikis/ZenCSSPropertiesEn.wiki
