[HTML] Emmet 으로 마술 부리기

 Emmet 이란? 

엄청나게 강력한 자동완성 기능 플러그인으로, HTML 마술을 보여주어 머글들을 혼내주자!

생성하려는 요소의 이름을 입력한 뒤 tab을 누르면 태그가 자동 생성된다.

 

https://emmet.io/

 

div*3

<div></div>

<div></div>

<div></div>

 

div.box 또는 .box

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

 

div.box.container (클래스 2개이상)

<div class="box container"></div>

 

div#unique-box

<div id="unique-box"></div>

 

div[style="color: black"]

<div style="color: black"></div>

 

div[attr1="속성1값" attr2="속성2값"]

<div attr1="속성1값" attr2="속성2값"></div>

 

div{Hello, World}*3

<div>Hello, World</div>

<div>Hello, World</div>

<div>Hello, World</div>

 

lorem (라틴어 샘플)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis sint iure quaerat enim officiis 

doloremque pariatur odio quisquam deserunt? Soluta fugiat molestias nam praesentium! Voluptatum, 

itaque cum. Libero, quod ea?

 

lorem3 (단어 수를 정할 수 있다)

Lorem, ipsum dolor.

 

(div>lorem)*3

<div>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus a dolore omnis quam, 

sint aliquam repudiandae dolores doloribus asperiores est autem doloremque quis. 

Cum, doloremque aliquam dolor dolore consequatur in?</div>

<div>Voluptatibus odio in cumque modi eligendi ipsum excepturi nemo voluptas magni, 

quae dignissimos voluptatum ullam animi non. Nobis incidunt rem praesentium atque quam minus ipsam quos? 

Reprehenderit, nobis sed! Tempora.</div>

<div>Qui dignissimos nihil, reiciendis error tempore fugiat officiis molestiae esse, laborum quasi 

reprehenderit ipsa quas, assumenda ut! Cumque alias nemo architecto quae, numquam excepturi aliquid 

ex labore. Explicabo, rerum et!</div>

 

h$*6

<h1></h1>

<h2></h2>

<h3></h3>

<h4></h4>

<h5></h5>

<h6></h6>

 

c+tab (주석만들기)

<!--  -->

 

div{$번 입니다.}*3

<div>1번 입니다.</div>

<div>2번 입니다.</div>

<div>3번 입니다.</div>

 

div{$$$번 식사시간이다.}*3

<div>001번 식사시간이다.</div>

<div>002번 식사시간이다.</div>

<div>003번 식사시간이다.</div>

 

div{$@-번 입니다.}*3 (역순으로)

<div>3번 입니다.</div>

<div>2번 입니다.</div>

<div>1번 입니다.</div>

 

div{$@3번 일어나}*3 (시작순서 변경)

<div>3번 일어나</div>

<div>4번 일어나</div>

<div>5번 일어나</div>

 

ul>li*3

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

 

div>span+a

<div><span></span><a href=""></a></div>

 

div>(ul>li*3)+a

<div>

    <ul>

        <li></li>

        <li></li>

        <li></li>

    </ul>

    <a href=""></a>

</div>

 

(ul>li*3)*3 또는 ul*3>li*3

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>

<ul>

    <li></li>

    <li></li>

    <li></li>

</ul>