Visual Studio Code에는 Emmet이라는 플러그인이 내장되어있다.
이를 통해 html 코드를 쉽고 빠르게 작성할 수 있다.
html 파일 내에서 사용 가능한 단축키 및 설정에 대해 알아보자.
!를 누르고 탭 키를 누르면
<!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>
html 기본 형식이 자동으로 완성된다.자동완성 단축키
div
<div></div>
div.class 혹은 .class
<div class="class"></div>
div#id 혹은 .id
<div id="id"></div>
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
div>ul+li
<div>
<ul></ul>
<li></li>
</div>
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
div>ul>li^ol*2
<div>
<ul>
<li></li>
</ul>
<ol></ol>
<ol></ol>
</div>
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>
p>lorem(더미용 텍스트)
<p>Lorem ipsum dolor sit ~~~~~~ aliquid?</p>
p>lorem4
<p>Lorem ipsum dolor sit.</p>
지금은 갈팡질팡하지만 점차 바르게 걷게될지어다