[HMTL] emmet이란?

✍ emmet 

:  HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인

 

 

---

실습

h1
<h1></h1>

h1+h2
<h1></h1>
<h2></h2>

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

h${hello}
<h1>hello</h1>

h1>[*2
<h1>
  <p></p>
  <p></p>
</h1> 

h1>p*5
<h1>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</h1>

h1#one
<h1 id="one"></h1>

h1.one
<h1 class="one"></h1>

.one
<div class="one"></div>

#one
<div id="one"></div>

(div>table>(tr>(td*2))*3)+(footer>p) 
<div>
    <table>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>
<footer>
    <p></p>
</footer>

lorem
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam id nemo adipisci dolores corrupti? Ipsam explicabo commodi blanditiis expedita placeat quis ad quod nihil recusandae. Voluptates blanditiis optio pariatur odio.

img
<img src="" alt="">

img:z
<img src="" alt="" sizes="" srcset="">

p[a="value1" b="value2" c=1]
<p a="value1" b="value2" c="1"></p>

a
<a href=""></a>

a[href="https://www.naver.com"]
<a href="https://www.naver.com"></a>

h1.one.two#three 
<h1 class="one two" id="three"></h1>

 

하나하나 입력할때보다  확실히

구조에 대한 이해나 속도 측면에서 더 효율적인 것 같다.