Emmet

https://emmet.io/
고속 HTML 편집 도우미이다. 각종 에디터용으로 플러그인이 나와있다.
Emmet Documentation

기본

! : HTML 기본 뼈대
!!! : <!DOCTYPE html>
tag : tag 를 자동 생성
tag.className : <tag class=“className”></tag>
tag#myId : <tag id=“myId”></tag>
tag>tag2>tag3 : 자식들 생성

형제 태그 생성

div>ul+ol : div 아래에 ul,ol 두개 태그(형제로) 생성

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

ul>li*3 : ul 아래에 자식 li 3개 만들기

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

상위에 태그 추가

div>ul>li^ol>li : li 위에 다시 ol을 넣음.

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

Grouping

괄호를 사용하여 그루핑 가능 div>(header>ul>li*2>a)+footer>p

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

Text 넣기

p{hello}

<p>hello</p>

숫자 자동 할당

$가 순서대로 숫자로 변환됨. p.class${item $}*3

<p class="class1">item 1</p>
<p class="class2">item 2</p>
<p class="class3">item 3</p>

dummy text

div>lorem : div 안에 lorem ipsum… 더미 문자열 생성됨.(주의 {lorem}아님)

<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illo quos consequuntur nemo. Totam corrupti itaque numquam quod tenetur ad hic molestiae fuga odit culpa provident aliquid explicabo ducimus, consectetur dolores!</div>

div>lorem3 : 숫자값에 따라 단어 갯수 조정

<div>Lorem, ipsum dolor.</div>

Custom attribute

td[title=“Hello world!” colspan=3]

<td title="Hello World!" colspan="3"></td>

목차

Emmet

기본

형제 태그 생성

상위에 태그 추가

Grouping

Text 넣기

숫자 자동 할당

dummy text

Custom attribute

참조