반응형
💡 해당 post에서는 vscode에서 html 코드를 빠르게 작성하는 방법에 대해서 배워볼 것이다!
기본 HTML 템플릿
! + enter key
⬇️
<!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>Class 지정
.box⬇️
<div class="box">
</div>
.box.box1⬇️
<div class="box box1">
</div>
h2.box.box1⬇️
<h2 class="box box1">
</h2>자식 element 포함해서 만들기
.box>.inner⬇️
<div class="box">
<div class="inner"></div>
</div>복수개 만들기
div.box*5⬇️
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>자동번호 매김
.box$*5⬇️
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
.box>.inner.inner$*5⬇️
<div class="box">
<div class="inner inner1"></div>
<div class="inner inner2"></div>
<div class="inner inner3"></div>
<div class="inner inner4"></div>
<div class="inner inner5"></div>
</div>
.box.box$*5>.inner.$⬇️
<div class="box box1">
<div class="inner 1"></div>
</div>
<div class="box box2">
<div class="inner 2"></div>
</div>
<div class="box box3">
<div class="inner 3"></div>
</div>
<div class="box box4">
<div class="inner 4"></div>
</div>
<div class="box box5">
<div class="inner 5"></div>
</div>HTML 하나하나 다 작성하기 정말 힘든데.. VSCODE 최고!!!
반응형
'Other 📖 > vsCode' 카테고리의 다른 글
| Visual Studio Code: CSS 파일에서 HTML Class 자동 완성 플러그인 (0) | 2022.01.20 |
|---|
댓글