우선 노트패드++에 설치하기 전에 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
'Youtube 동영상 > the etc.' 카테고리의 다른 글
[ Map API ] 네이버 지도 API를 웹에 구현하자. (0) | 2019.01.08 |
---|---|
[설문 공개] 웹디자이너, 웹퍼블리셔 초임 연봉은? 근무시간은? 애로사항은? 설문 결과를 공개합니다. (0) | 2018.12.10 |
네이버 지도(naver map API) 웹페이지에 구현하기 (0) | 2018.03.22 |
fontawesom version 5 사용방법 3가지 (0) | 2018.03.16 |
Fontawesome 버전 4 - 사용방법 4가지 (0) | 2017.05.28 |