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

참조

권남

사용자 도구

사이트 도구

사이드바

목차

Emmet

기본

형제 태그 생성

상위에 태그 추가

Grouping

Text 넣기

숫자 자동 할당

dummy text

Custom attribute

참조

문서 도구