emmet
코드 빠르게 작성하는 emmet
.(class) , #(id)
div.class{class}
div#id{id}
.div{class}
↓↓↓↓↓↓↓
<div class="class">class</div>
<div id="id">id</div>
<div class="class">class</div>
Html 기본 소스: !
! (tab)
↓↓↓↓↓↓↓
<!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>
자식 : >
div>ul>li
↓↓↓↓↓↓↓
<div>
<ul>
<li></li>
</ul>
</div>
형제: +
div>ul+ol
↓↓↓↓↓↓↓
<div>
<ul></ul>
<ol></ol>
</div>
똑같은것 여러개 만들고 싶을때 : *n(숫자)
div>ul*4
↓↓↓↓↓↓↓
<div>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
맨마지막 자식에서 바로 위 부모의 형제를 만들고 싶을때: ^
div>ul>li^ol
↓↓↓↓↓↓↓
<div>
<ul>
<li></li>
</ul>
<ol></ol>
</div>
태그 그룹화 하기 : ( )
div(header>ul>li*2>a)+footer>p
↓↓↓↓↓↓↓
<div></div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
텍스트 입력하기 : { }
p{hello}
↓↓↓↓↓↓↓
<p>hello</p>
오름차순 숫자 할당법 : $
p.class${item}*5
↓↓↓↓↓↓↓
<p class="class1">item</p>
<p class="class2">item</p>
<p class="class3">item</p>
<p class="class4">item</p>
<p class="class5">item</p>
더미용 텍스트 : lorem+n(숫자)
p>lorem4
↓↓↓↓↓↓↓
<p>Lorem ipsum dolor sit.</p>
그외 다른 태그들
<pre> 텍스트 </pre>
<kbd>ctrl + c </kbd> <br><br>
<dfn>용어 정의</dfn> <br><br>
<small> 텍트스 작게</small>
댓글남기기