HTML5 꿀팁 tip. 알고있었나요? with. emmet

Emmet 기본 내장 기능 활용 팁.

emmet 문법 정리

div.class

<div class="class"></div>

div#id

<div id="id"></div>

div>ul>li  자식

<!-- > -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

div>ul+ol 형제

<!-- + -->
<div>
  <ul></ul>
  <ol></ol>
</div>

ul>li*5 반복

<!-- * -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

div>ul>li^ol 부모

<!-- ^ -->
<div>
  <ul>
    <li></li>
  </ul>
  <ol></ol>
</div>

div>(header>ul>li*2>a)+footer>p 그룹

<!-- () -->
<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

tip1.

ol>li*3

-ol 태그 안에 li태그를 3개 생성하는 기능이 있습니다.

// ol>li*3  --result
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

tip2.

div.container>div.item.item${$}*10

-div태그 안에 class="container"를 부여하고 그 자식으로 div태그 안에 class="item item$(순차적 숫자)" {$(순차적 숫자)}컨텐츠를 *10 열번 생성합니다. 

// div.container>div.item.item${$}*10 --result
<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
</div>

드림코딩 아카데미 → http://academy.dream-coding.com/

드림코딩 유튜브 → http://www.youtube.com/c/드림코딩by엘리