HTML5 - 190605 Basic Study 12(드림위버 젠코딩) - Dreamweaver ZenCoding

1. 젠코딩 사이트

https://code.google.com/archive/p/zen-coding/downloads

2. 드림위버 젠코딩 다운로드 후 설치

3.  젠 코딩 키 설정

편집 > 키보드 단축키

설정 복제 > 명령 > Zen Coding > Expand Abbreviation > 단축키 지정후 바꾸기 > 확인

4. 젠 코딩 활용

#header>ul.menu>li*5

<div id="header">
  <ul class="menu">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

#header>ul.menu>li.menu$*5

<div id="header">
  <ul class="menu">
    <li class="menu1"></li>
    <li class="menu2"></li>
    <li class="menu3"></li>
    <li class="menu4"></li>
    <li class="menu5"></li>
  </ul>
</div>

#header>ul.menu>li.menu$*5lc

<div id="header">
  <ul class="menu">
    <li class="menu1"></li>
  </ul>
</div>

#header>ul.menu>li.menu$*5>a>img

<div id="header">
  <ul class="menu">
    <li class="menu1"><a href=""><img src="" alt=""></a></li>
    <li class="menu2"><a href=""><img src="" alt=""></a></li>
    <li class="menu3"><a href=""><img src="" alt=""></a></li>
    <li class="menu4"><a href=""><img src="" alt=""></a></li>
    <li class="menu5"><a href=""><img src="" alt=""></a></li>
  </ul>
</div>

table+

<table>
  <tr>
    <td></td>
  </tr>
</table>

table>tr*5>td*2

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

div.item$-$-conter*6

<div class="item1-1-conter"></div>
<div class="item2-2-conter"></div>
<div class="item3-3-conter"></div>
<div class="item4-4-conter"></div>
<div class="item5-5-conter"></div>
<div class="item6-6-conter"></div>

div#page>div.logo+ul#navigation>li*5>a

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</div> 

table>tr*4>td#idc$*4>img[ankiwoong]

<table>
  <tr>
    <td id="idc1"><img src="" alt="" ankiwoong=""></td>
    <td id="idc2"><img src="" alt="" ankiwoong=""></td>
    <td id="idc3"><img src="" alt="" ankiwoong=""></td>
    <td id="idc4"><img src="" alt="" ankiwoong=""></td>
  </tr>
  <tr>
    <td id="idc1"><img src="" alt="" ankiwoong=""></td>
    <td id="idc2"><img src="" alt="" ankiwoong=""></td>
    <td id="idc3"><img src="" alt="" ankiwoong=""></td>
    <td id="idc4"><img src="" alt="" ankiwoong=""></td>
  </tr>
  <tr>
    <td id="idc1"><img src="" alt="" ankiwoong=""></td>
    <td id="idc2"><img src="" alt="" ankiwoong=""></td>
    <td id="idc3"><img src="" alt="" ankiwoong=""></td>
    <td id="idc4"><img src="" alt="" ankiwoong=""></td>
  </tr>
  <tr>
    <td id="idc1"><img src="" alt="" ankiwoong=""></td>
    <td id="idc2"><img src="" alt="" ankiwoong=""></td>
    <td id="idc3"><img src="" alt="" ankiwoong=""></td>
    <td id="idc4"><img src="" alt="" ankiwoong=""></td>
  </tr>
</table>

h${welcome}*6

<h1>welcome</h1>
<h2>welcome</h2>
<h3>welcome</h3>
<h4>welcome</h4>
<h5>welcome</h5>
<h6>welcome</h6> 

ul>li*5>a[href=#]{menu}

<ul>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
  <li><a href="#">menu</a></li>
</ul>

ul>li*5>a[href=#]{버튼$}

<ul>
  <li><a href="#">버튼1</a></li>
  <li><a href="#">버튼1</a></li>
  <li><a href="#">버튼1</a></li>
  <li><a href="#">버튼1</a></li>
  <li><a href="#">버튼1</a></li>
</ul>

link:css

<link rel="stylesheet" type="text/css" href="${1:style}.css" media="all">

p*3

<p></p>
<p></p>
<p></p>