VSCode Emmet

Visual Studio Code / VSCode에 기본 내장
Emmet

기본

! : 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>

텍스트 넣기 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>

참조

웹사이트 빨리 만드는 지름길 Emmet, HTML 빠르게 마크업하기 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript - YouTube

권남

−사이드바

−목차

VSCode Emmet

기본

dummy text

참조

권남

사용자 도구

사이트 도구

−사이드바

−목차

VSCode Emmet

기본

dummy text

참조

문서 도구