사이드바
visual_studio_code:emmet
문서의 이전 판입니다!
VSCode Emmet
- Visual Studio Code / VSCode에 기본 내장
기본
!: 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>
상위에 태그 추가
Groupping
- 괄호를 사용하여 그루핑 가능
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.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>
참조
visual_studio_code/emmet.1639381409.txt.gz · 마지막으로 수정됨: 2021/12/13 16:43 저자 kwon37xi
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
