emmet 입력 방식

각종 태그를 단축해서 작성하는 방법

​

https://www.youtube.com/watch?v=m7wsrVQsVjI&t=197s

! + tab : html기본 양식 만들기

​

div + tab : <div></div>

​

div.클래스명 + tab : <div class="클래스명"></div>

​

div#아이디명 + tab : <div id="id명"></div>

​

div>태그명 + tab : 

<div> 

  <태그></태그> 

</div>

​

div>부모태그>자식태그 + tab: 

<div> 

  <부모태그> 

    <자식태그> </자식태그> 

  </부모태그> 

</div>

​

div>형재태그1+형재태그2 + tab : 

<div> 

  <형재태그1> </형재태그1> 

  <형재태그2> </형재태그2> 

</div>

​

ul>li*3 :

<ul> 

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

​

p{hello} :

<p>hello</p>

​

p.class${item $}*5 :

<p class="class1">item 1</p>

<p class="class2">item 2</p>

<p class="class3">item 3</p>

<p class="class4">item 4</p>

<p class="class5">item 5</p>