category: Dev
tags: [web,html,emmet,zen coding]
reference site :
emmet 공식 홈페이지 가이드 문서

개요

html 태그를 생성하기 위한 방법중 사실상 가장 편한 방법이라고 생각하는 emmet.
기본적인 사용법정도는 익혀두면 좋다. css 에도 사용 가능하다는데 그건 다음에

기본 사용법

태그 생성 : {tab}키
- grid {tab}
```
  <grid></grid> 
```
하위(Child) 태그 생성 : “>”
- grid>button
```
  <grid><button></button></grid>
```

형제(Sibling) 태그 생성: “+”

grid>button+li

  <grid>
      <button></button>
      <li></li>
  </grid>

상위(Climb-up) 태그 생성: “^”

굳이 그럴필요 있을까 싶지만 작성중 편의를 위한 것으로 보임.

div>grid>li^textbox

  <div>
      <grid>
          <li></li>
      </grid>
      <textbox></textbox>
  </div>

div>grid>li^^textbox

  <div>
      <grid>
          <li></li>
      </grid>
  </div>
  <textbox></textbox>

태그 반복(Multiplication) 생성 : “*”

동일 태그 반복 생성. 표그리기 등 - ul>li*5

  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>

그룹(Grouping) 묶기 : “()”

반복작업시에 여러개 태그를 하나의 그룹으로 처리한다.

(div>dl>(dt+dd)*3)+footer>p

  <div>
      <dl>
          <dt></dt>
          <dd></dd>
          <dt></dt>
          <dd></dd>
          <dt></dt>
          <dd></dd>
      </dl>
  </div>
  <footer>
      <p></p>
  </footer>

속성(attribute) 관리

자주쓰는 속성도 emmet으로 선언할 수 있다.

ID, CLSS 선언 : “#”, “.”

css셀렉터와 동일함.

div#header+div.page+div#footer.class1.class2.class3

  <div id="header"></div>
  <div class="page"></div>
  <div id="footer" class="class1 class2 class3"></div>

커스텀 속성 관리 : “[attr=val]”
- 임의, 그외 속성 관리도 가능.
- td[title=”Hello world!” colspan=3]
```
  <td title="Hello world!" colspan="3"></td>
```

넘버링 (descending, ascending): “$” / “$@-“

특정속성의 이름 넘버링 하는 방식.

ul>li.item$*5

  <ul>
      <li class="item1"></li>
      <li class="item2"></li>
      <li class="item3"></li>
      <li class="item4"></li>
      <li class="item5"></li>
  </ul>

ul>li.item$$$*5

  <ul>
      <li class="item001"></li>
      <li class="item002"></li>
      <li class="item003"></li>
      <li class="item004"></li>
      <li class="item005"></li>
  </ul>

역순

ul>li.item$@-*5

  <ul>
      <li class="item5"></li>
      <li class="item4"></li>
      <li class="item3"></li>
      <li class="item2"></li>
      <li class="item1"></li>
  </ul>

시작 번호를 매길 수 있음.

ul>li.item$@3*5

  <ul>
      <li class="item3"></li>
      <li class="item4"></li>
      <li class="item5"></li>
      <li class="item6"></li>
      <li class="item7"></li>
  </ul>

내용쓰기

내용쓰기 : “{}”
- button{click me}
```
  <button>click me</button>
```
복합사용
- 아래 두 예시에서 a에 대한 텍스트를 참조 하자
- a{click}+b{here} : a와 b가 형제태그임.
```
  <a href="">click</a><b>here</b>
```
- a>{click}+b{here} : a 하위에 텍스트와 b태그가 존재.
```
  <a href="">click<b>here</b></a>
```

사용 팁

이미 만들어진 html 안에서도 작성 가능하다.

  <grid>
      li   <!--이걸 탭하면 li tag가 생성됨. -->
      .item <!-- 여기서 탭하면 "<div class="item"></div>" 태그가 됨.  -->
  </grid>

생략가능한 태그도 존재.


.wrap>.content	div.wrap>div.content
em>.info	em>span.info
ul>.item*3	ul>li.item*3
table>#row$*4>[colspan=2]	table>tr#row$*4>td[colspan=2]

하위태그가 자동으로 붙는 것도 있음 (Implicit tag names)
- ul>.item : ul 아래에 item클래스를 갖는 li 태그
- tr>.item : tr 아래 item클래스를 갖는 td 태그
- 최상위에서는 div가 기본 태그가 됨.
맨 뒤에 e 를 붙이면 <> 가 < , > 로 표시됨. (필터)
lorem 태그명으로 생성시 흔히 말하는 “Lorem Ipsum” 내용이 복사됨.

예제

표 만들기

.table>table>.header>.FirstNm{First Name}+.LastNm{Last Name}+.Point1{Point1}+.point2{Point2}^(.row$>.FirstNm${test$}+.LastNm${data$}+.Point1${ponit$}+.Point2${testing$})*3

  <div class="table">
      <table>
          <tr class="header">
              <td class="FirstNm">First Name</td>
              <td class="LastNm">Last Name</td>
              <td class="Point1">Point1</td>
              <td class="point2">Point2</td>
          </tr>
          <tr class="row1">
              <td class="FirstNm1">test1</td>
              <td class="LastNm1">data1</td>
              <td class="Point11">ponit1</td>
              <td class="Point21">testing1</td>
          </tr>
          <tr class="row2">
              <td class="FirstNm2">test2</td>
              <td class="LastNm2">data2</td>
              <td class="Point12">ponit2</td>
              <td class="Point22">testing2</td>
          </tr>
          <tr class="row3">
              <td class="FirstNm3">test3</td>
              <td class="LastNm3">data3</td>
              <td class="Point13">ponit3</td>
              <td class="Point23">testing3</td>
          </tr>
      </table>
  </div>

리스트 만들기 (원본: 부트스트랩 소스 )

ul.nav.nav-pills>.active>a[#]{Home}^li>a[#]{Profile}^.disabled>a[#]{Disabled}^.dropdown>a.dropdown-toggle[data-toggle=dropdown href=#]>{Dropdown}+span.caret^ul.dropdown-menu>li>a[#]{Action}^li>a[#]{Another action}^li>a[#]{Something else here}^.divider+li>a[#]{Separated link}

  <ul class="nav nav-pills">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Profile</a></li>
      <li class="disabled"><a href="#">Disabled</a></li>
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown<span class="caret"></span></a>
          <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li><a href="#">Separated link</a></li>
          </ul>
      </li>
  </ul>

Keispace

Emmet(Zen coding) html 사용법 요약

개요