HTML_CSS_005_TAG_emmet(zen_coding)

Emmet (Zen coding) 방법

> : 하위선택자 / 자식선택자

{text} : 소괄호 내 text 입력

$ : 숫자가 1부터 증가하면서 치환됨 for문 같은 구조

table>tbody>tr*2>td*3{text $}

<table>
  <tbody>
    <tr>
      <td>num 1</td>
      <td>num 2</td>
      <td>num 3</td>
    </tr>
    <tr>
      <td>num 1</td>
      <td>num 2</td>
      <td>num 3</td>
    </tr>
  </tbody>
</table>

+ : 동일 class / 인접 동생선택자

^ : 이전 class / 부모 속성으로 위치전환

+ table>thead>tr*2^tbody>tr^2

+ table>(thead>tr*2)+tbody>tr^2

+ table>(thead>tr*2{thead_tr_$$})+tbody>tr*2{tbody_tr_$$$}

<table>
  <thead>
    <tr>thead_tr_01</tr>
    <tr>thead_tr_02</tr>
  </thead>
  <tbody>
    <tr>tbody_tr_001</tr>
    <tr>tbody_tr_002</tr>
  </tbody>
</table>

[ ] : tag 속성 넣기

table[border="1"]

<table border="1"></table>

---

a[href="https://naver.com"][target="_blank"]{네이버}+br+a[href="https://google.com"][target="_blank"]{구글}

<a href="https://naver.com" target="_blank">네이버</a>
<br>
<a href="https://google.com"  target="_blank">구글</a>

Emmet 문법

<!-- 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>