Emmet
- HTML, CSS 작성 시간 단축시켜주는 확장 기능이다.
적용
환경설정에서 Emmet: Trigger Expansion On Tab 체크하면 편하게 사용 가능
1. HTML 표준 DTD 문서 " ! "
- !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. 자식 노드 " > "
- ul > li
<ul>
<li></li>
</ul>
3. 형제 노드 " + "
- ui > li + div
<ul>
<li></li>
<div></div>
</ul>
4. 반복하기 " * "
- ul > li * 3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
5. 그룹화 " ( ) "
- div > (header > ul > li *3 > a) + footer
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer></footer>
</div>- div 자식으로 header와 footer 존재, header 자식 ul 자식 li 자식*3의 자식 a
6. 클래스 부여 " . "
- p.testclass
<p class="testclass"></p>
7. 아이디 부여 " # "
- p#testId
<p id="testId"></p>
8. 텍스트 / 콘텐츠 입력 " { } "
- p.testClass#testId{콘텐츠입력}
<p class="testClass" id="testId">콘텐츠입력</p>
9. 속성 입력 " [ ] "
- abbr[title="HyperText Markup Language"]{HTML}
<abbr title="HyperText Markup Language">HTML</abbr>
10. 자동 넘버링 부여 " $ "
- ul>li{hello emmet$} * 3
<ul>
<li>hello emmet1</li>
<li>hello emmet2</li>
<li>hello emmet3</li>
</ul>- 위와 같이 $ 부분에 넘버링이 차례대로 부여된다.
11. 숫자부터 자동 넘버링 부여 " $@숫자 "
- ul>li{hello emmet$@4} * 3
<ul>
<li>hello emmet4</li>
<li>hello emmet5</li>
<li>hello emmet6</li>
</ul>- 위와 같이 $@숫자 부분에 숫자부터 넘버링이 차례대로 부여된다.
12. 상위 계층으로 올라가기 " ^ "
- ul>(ol*3>li*2)^^footer
<ul>
<ol>
<li></li>
<li></li>
</ol>
<ol>
<li></li>
<li></li>
</ol>
<ol>
<li></li>
<li></li>
</ol>
</ul>
<footer></footer>
'기타' 카테고리의 다른 글
| [VS Code] 단축키 (0) | 2023.06.26 |
|---|---|
| [Visual studio] 빌드 속도 개선, Unity build (0) | 2022.11.25 |
| [C++] 코딩테스트 유용한 기능 (0) | 2022.11.13 |
| [VS Code] 초기 환경설정 (설정, 확장프로그램) (0) | 2022.10.16 |
| 정적 라이브러리 사용 효과 (0) | 2022.10.12 |
