VSCode Emmet 사용법

rain98·2020년 12월 13일
8

VSCode

목록 보기
1/2
post-thumbnail

Emmet?

Emmet은 HTML과 CSS의 작성의 시간을 아주 빠르게 단축 시켜주는 확장기능이다.

향후 오래 코딩할 나의 미래 손목건강🤲과 효율적인 마크업를 위해 Emmet을 사용하자.

사용법은 입력하고 키보드 Tab키를 누르면 끝!

HTML

HTML 표준DTD문서 !

! 입력 후 Tab키

간단하고 빠르게 HTML 문서 타입이 출력된다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

자식노드 >

div>ul>li 입력 후 Tab키

>를 사용하여 자식 요소를 생성할 수 있다

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

형제노드 +

div>ul+ol+div 입력 후 Tab키

+를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다

<div>
    <ul></ul>
    <ol></ol>
    <div></div>
</div>

반복하기 *

div>li*3 입력 후 Tab키

>를 사용하여 한 단계 위에 요소를 배치할 수 있다.

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

그룹화 ()

div>(header>ul>li*2>a)+footer 입력 후 Tab키

()를 사용하여 괄호안에 있는 코드를 묶어 그룹화를 시켜준다.

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer></footer>
</div>

div>header>ul>li*2>a+footer 입력 후 Tab키

그룹화 하지 않았을때 와는 다른 코드가 되니 주의하자.

<div>
    <header>
        <ul>
            <li>
                <a href=""></a>
                <footer></footer>
            </li>
            <li>
                <a href=""></a>
                <footer></footer>
            </li>
        </ul>
    </header>
</div>

클래스 부여 .

.item 입력 후 Tab키

CSS의 클래스 선택자를 사용한다고 하면 간단하다.
기본 default값은 div라서 div.item이 아닌 .item으로 생략이 가능하다

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

p.item 입력 후 Tab키

만약 p태그에 클래스를 주고 싶다면 이렇게 하면된다.

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

아이디

#item 입력 후 Tab키

동일하게 CSS의 아이디 선택자를 줄때 사용 가능하다.

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

텍스트 입력 {}

p.container{item} 입력 후 Tab키

p태그안에 item이라는 텍스트가 입력된다.

<p class="container">item</p>

자동 넘버링 부여 $

p.container{item$}*5 입력 후 Tab키

$값에 숫자가 입력된다.

<p class="container">item1</p>
<p class="container">item2</p>
<p class="container">item3</p>
<p class="container">item4</p>
<p class="container">item5</p>

#page>#nav>ul>li.item{hello$}*5+dl^dd 입력 후 Tab키

<div id="page">
    <div id="nav">
        <ul>
            <li class="item">hello1</li>
            <li class="item">hello2</li>
            <li class="item">hello3</li>
            <li class="item">hello4</li>
            <li class="item">hello5</li>
            <dl></dl>
        </ul>
        <dd></dd>
    </div>
</div>

응용하자면 이렇게 손쉽고 빠르게 마크업이 가능하다.


CSS

width,heigt

.item{h100+w100} 입력 후 Tab

  .item{ height: 100px;
         width: 100px; }

기본값은 px단위이며 단위를 교체하는것도 가능하다.

  • 기본값 → px
    p → %
    e → em
    x → ex
    r → rem

margin, padding

.item{m100p+p100e} 입력 후 Tab

.item{ margin: 100%;
       padding: 100em; }

등등..

.item {c#111111} 입력 후 Tab

.item { color: #111111;} 

.item {fsz13} 입력 후 Tab

.item { font-size: 13px;}

폰트색상과 사이즈등 다양한 기능이 많으니, 공식사이트에 예제들을 보면서 익히면 유용하게 사용 가능하다.

https://docs.emmet.io/abbreviations/syntax/

profile
헷갈리거나 기억에 남기고 싶은것을 기록합니다.

2개의 댓글

comment-user-thumbnail
2021년 6월 4일

감사합니다~!

1개의 답글