Emmet
Emmet은 조금 더 적은 손길을 거쳐 효율적으로 HTML 코드를 작성하게 해주는 플러그인이다. 따고 Extension에서 설치하지 않아도 요즘 vscode에는 기본적으로 내장되어 있다. 윈도우에서는 기본적으로 tab키를 사용한다.
이러한 Emmet은 대량의, 그리고 반복적인 HTML 코드를 작성할 때 좀 더 빠르게 작성할 수 있도록 도와준다.
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 -->
<div></div>
<!-- .class -->
<div class="class"></div>
<!-- .id -->
<div class="id"></div>
<!-- div>ul>li -->
<div>
<ul>
<li></li>
</ul>
</div>
<!-- div>ul+ol -->
<div>
<ul></ul>
<ol></ol>
</div>
<!-- div>ol>li*3 -->
<div>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<!-- div>ul>li^ol -->
<div>
<ul>
<li></li>
</ul>
<ol></ol>
</div>
<!-- div>ul>li^^span -->
<div>
<ul>
<li></li>
</ul>
</div>
<span></span>
<!-- div>(header>ul>(li>a)*2)+(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">item1</p>
<p class="class2">item2</p>
<p class="class3">item3</p>
<!-- p>lorem -->
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita fugit tempore atque unde! Repudiandae perspiciatis magnam voluptas? Quisquam ipsum, quaerat distinctio est veritatis voluptatum quae omnis illo culpa illum expedita!</p>
<!-- p>lorem3 -->
<p>Lorem, ipsum dolor.</p>단순히 div, .class, #id와 같이 입력한 후 tab키를 눌러서 간단하게 태그를 만들 수 있다. 그리고 >와 +를 통해 부모자식형제 구조를 형성할 수 있고 *를 통해 반복되는 태그를 여러 개 형성할 수도 있다. ^를 통해서는 한 단계 위의 부모로 올라간다. ()을 통해 묶어서 태그를 형성할 수도 있다.
{}로는 text로 어떤 것이 올지 적어줄 수 있고 $를 통해서 반복적인 숫자를 적어줄 수도 있다. 그리고 더미용 텍스트가 필요할 때는 lorem을 사용하면 되고 뒤에 숫자를 붙여서 더미용 텍스트의 단어를 조절할 수 있다.
'프로그래밍 > HTML' 카테고리의 다른 글
| Data Attribute (0) | 2022.03.07 |
|---|---|
| Semantic Markup, 시멘틱 구조 (0) | 2021.11.07 |