🌼 HTML Emmet plug-in
Emmet is a set of plug-ins for text editors that allow for high-speed coding and editing in HTML, XML, XSLT, and other structured code formats via content assist. The project was started by Vadim Makeev in 2008 and continues to be actively developed by Sergey Chikuyonok and Emmet users.
HTML5 Boilerplate: ! + tab
<!-- ! + tab -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
>
</body>
</html>태그 생성: 태그 이름 + tab
<!-- header + tab -->
<header></header>class 혹은 id가 포함된 태그 생성: 태그 이름.클래스 명 + tab, 태그이름#아이디 명 + tab
<!-- a.img + tab -->
<a href="" class="img"></a>부모 > 자식 노드 생성: 부모 태그 이름 > 자식 태그 이름 + tab
<!-- div>ul>ol + tab -->
<div>
<ul>
<ol></ol>
</ul>
</div>형제 노드 생성: 형제 태그1 이름 + 형제 태그2 이름 + tab
<!-- ol+ul + tab -->
<ol></ol>
<ul></ul>동일 태그 반복 생성: 태그 이름*숫자 + tab
<!-- li*5 + tab -->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>상위 노드 생성: 태그 이름1^태그 이름2 + tab (1과 2를 동일한 레벨로 인식한다.)
<!-- div>ul>li*3^ol ul과 ol를 동일한 레벨로 인식하여 노드를 생성한다.-->
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ol></ol>
</div>부모 노드 아래 자식 노드를 2개 이상 생성: 부모 태그 이름 > (자식 태그 이름1 + 자식 태그 이름2) + tab
<!-- div>(header+footer) + tab -->
<div>
<header></header>
<footer></footer>
</div>텍스트가 포함된 태그 생성: 태그 이름{텍스트} + tab
<!-- p>{hello world} -->
<p>hello world</p>숫자 할당하여 태그 생성: 태그 이름.클래스 명{텍스트}*숫자 + tab
<!-- p.box${item $}*5 $ 대신 * 숫자에 입력된 숫자가 1 ~ 숫자로 인식되어 태그가 생성된다.-->
<p class="box1">item 1</p>
<p class="box2">item 2</p>
<p class="box3">item 3</p>
<p class="box4">item 4</p>
<p class="box5">item 5</p>더미용 텍스트 작성: 태그 이름 > lorem + tab, tag 이름> lorem숫자
(입력된 숫자만큼의 단어 수가 제한되어 더미용 텍스트가 생성된다.)
<!-- p>lorem -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, iure. Quos cupiditate esse placeat ipsa reprehenderit dolorem, laboriosam nulla repudiandae exercitationem molestias tempore nihil quis asperiores distinctio ut iste perferendis?</p>
<!-- p>lorem5 -->
<p>Lorem ipsum dolor sit amet.</p>
Turtle Never stop