Emmet 사용법

aepee·2020년 9월 14일
1

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

Emmet (에밋)을 사용하면 HTML & CSS의 작업 속도를 엄청나게 향상시킬 수 있다!! 👏🏽👏🏼👏🏻

VS Code는 emmet을 기본적으로 지원하고 Tab키를 통해 사용한다.


HTML


자식(하위) 요소 >

>

div>ul>li 입력 후 Tab

<div>
    <ul>
        <li></li>
    </ul>
</div>

아주 간편히 자식 요소들을 생성했다 !! 나이스,,


형제 요소 +

+

div>p+span

<div>
    <p></p>
    <span></span>
</div>

올라가기 ^

^

div>ul>li^p+a

<div>
    <ul>
        <li></li>
    </ul>
    <p></p>
    <a href=""></a>
</div>

^를 여러번 입력하면 입력한 만큼 올라갈 수 있음

div>ul>li^^div

<div>
    <ul>
        <li></li>
    </ul>
</div>
<div></div>

반복하기 *

*

div>ul>li*3

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

그룹화 ()

()

div>(header>ul>li*2)+footer

<div>
    <header>
        <ul>
            <li></li>
            <li></li>
        </ul>
    </header>
    <footer></footer>
</div>

그룹화를 통해 footerheader의 형제 요소가 되었다
괄호 없이 div>header>ul>li*2+footer 처럼 작성하게 된다면?

<div>
    <header>
        <ul>
            <li></li>
            <li></li>
            <footer></footer>
        </ul>
    </header>
</div>

li의 형제요소가 되어버렸다,, ( 💁🏽‍♂️ 주의합시다 )


Emmet을 이용하면 이렇게나 쉽고 간편하게 요소들을 만들 수 있다.
뿐만 아니라 class나 id 값 혹은 다른 속성 값들을 넣어 만들 수도 있다.

클래스 .class

div.class

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

너무나 쉽게 container라는 클래스를 가진 div가 생성되었다.
기본은 div이기 때문에 div를 생략하고 .container라고 입력해도 결과는 같다!


아이디 #id

div#id

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

속성 [attr]

td[title="hello" colspan=5]

<td title="hello" colspan="5"></td>

넘버링 $

$

ul>li.item$*5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

ul>li.item$@5*5

<ul>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
    <li class="item8"></li>
    <li class="item9"></li>
</ul>

텍스트 {}

{}

.fruit{banana}

<div class="fruit">banana</div>

.container>ul.list>li.list-item*5>a{list$}

<div class="container">
    <ul class="list">
        <li class="list-item"><a href="">list1</a></li>
        <li class="list-item"><a href="">list2</a></li>
        <li class="list-item"><a href="">list3</a></li>
        <li class="list-item"><a href="">list4</a></li>
        <li class="list-item"><a href="">list5</a></li>
    </ul>
</div>

CSS


w100 입력 후 Tab

width: 100px; (기본이 px단위)
  • p → %
  • e → em
  • x → ex

w50p h100p

width: 50%;
height: 100%;

m10p30e5x

margin: 10% 30em 5ex;

와.. 정말 간단하지 않나요 세상사람들..???
이제라도 Emmet을 알아서 증말 다행이다,, 🙊🙈🙉

profile
📝내가 보려고 기록하는 블로그

1개의 댓글

comment-user-thumbnail
2020년 10월 15일

와! 정말 깔끔하게 잘 정리되어있네요 ㅎㅎ
감사합니다 ㅋㅋㅋㅋ

답글 달기