VSCODE html 단축키 (Emmet 약어)

Visual Studio Code로 웹 공부하는데 단축키를 알면 더 도움이 될 것 같아서 정리한다

처음 HTML 기본세팅은 html만 쳐도 자동완성으로 html:5가 떠서 선택하면 된다

근데 그냥 ! 엔터 해도 된다

html  or  !

<!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>

태그의 속성까지 지정해서 자동완성하려면 [ ] 안에 속성명을 적는다

input[type]

<input type="">

하위 요소까지 같이 만들려면 > 를 사용한다

반복해서 만들려면 * 하고 반복할 숫자를 적는다

table>tr*3>td*2

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

class와 id는

. 과 #을 쓴다

p.wow
h1.hey
p.wow#hey

<p class="wow"></p>
<h1 id="hey"></h1>
<p class="wow" id="hey"></p>

티스토리툴바