200925__HTML Emmet 작성 tip

Positive Ko·2020년 9월 25일

Emmet은 VSCODE를 비롯한 각종 에디터에서 언어를 자동 완성해주는 툴이다.

오늘은 Emmet 작성 (HTML에 한해) 팁에 대해 정리해보고자 한다.

구조화 하기 Nesting operators

>를 사용하여 자식 요소를 생성한다.

작성 후 엔터(혹은 탭)
body>div>ul>li

결과
<body>
    <div>
        <ul>
            <li></li>
        </ul>
    </div>
</body>

+형제 요소를 추가한다.

div+div+div

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

^ 한 단계 위에 요소를 추가한다.

body>div>ul>li^p

<body>
    <div>
        <ul>
            <li></li>
        </ul>
        <p></p>
    </div>
</body>

* 반복적으로 요소를 생성한다.

div*5

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

() 복잡한 축약에서 그룹을 지어줄 수 있다.

body>(div>ul>li)+a>p

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

다음도 가능하다.

div>(a>p)*3+div>(ul>li)*3

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

연산자 추가 Attribute operators

ID 와 Class 추가가 가능하다. id는 #을 그리고 class는 .을 사용한다.

div.num>div#num$*4

<div class="num">
    <div id="num1"></div>
    <div id="num2"></div>
    <div id="num3"></div>
    <div id="num4"></div>
</div>

숫자 매기기 Numbering

$을 사용한다. $의 개수로 숫자의 자릿수도 결정할 수 있다.

ul>li#$*3>p#$$*3

<ul>
    <li id="1">
        <p id="01"></p>
        <p id="02"></p>
        <p id="03"></p>
    </li>
    <li id="2">
        <p id="01"></p>
        <p id="02"></p>
        <p id="03"></p>
    </li>
    <li id="3">
        <p id="01"></p>
        <p id="02"></p>
        <p id="03"></p>
    </li>
</ul>

텍스트 추가 Text

{}으로 텍스트를 요소에 추가한다.

div>p{Hello}

<div>
    <p>Hello</p>
</div>

Positive Ko

내 이름 고은정, 은을 180deg 돌려 고긍정 🤭

이전 포스트

200924__HTTP: 웹과 네트워크의 기본

다음 포스트