[html] 젠코딩 (zen coding)

* zen coding

- 젠코딩은 HTML 코딩의 생산성을 향상시켜주는 도구

- eclipse, vim, dreamweaver, editplus와 같은 에디터에 플러그인으로 설치

 

* 문법

• ID, CLASS 속성
  • div#page.section.main
  • <div id="page" class="section main"></div>
• 커스텀 속성
  • a[title="hello world"]
  • <a title="hello world"></a>
• 엘리먼트 복제
  • li*3
  • <li></li><li></li><li></li>
• 넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)
  • li.item$*3
  • <li class="item1"></li><li class="item2"></li><li class="item3"></li>
     
  • li.item$$$*2
  • <li class="item001"></li><li class="item002"></li>
• 그룹핑
  • div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer
• ID, CLASS 앞에 태그명을 생략하면 DIV로 간주
  • #content>.section
  • <div id="content"><div class="section"></div></div>
• 텍스트
  • p>{click}
  • <p>click</p>

 

예시1)

div.box>h2+ul>li*5

결과 이미지

 

예시2)

div.con-box>div.inner>article.txt-box>h3+p*2^^^div.con1>div.inner>h2+p+ul>li*5

결과 이미지

 

예시3)

div#wrap>header#header>div.inner>h1

결과 이미지

 

* 표현 방법은 다르지만 결과 값은 동일

 

1. div#wrap>header#header>div.inner>h1{로고}^^section#visual+

main#container>section#content^footer#footer>div.inner

결과 이미지

2. div#wrap>(header#header>div.inner>h2{로고})+(section#visual>h2)+(main#container>section#content)+(footer#footer>div.inner)

결과 이미지

 

* 기본 젠코딩 정리

결과 이미지

 

# 추가 내용

 

{제목$}

$ : 아이템 넘버링

-> 젠코딩로 작성 시 활용

 

article>dl>(dt{제목$}+dd{설명$}*2)*3

 

결과 이미지

 

* 참고 사이트

 

https://docs.emmet.io/cheat-sheet/

Cheat Sheet