Emmet은 html과 css에서 자동완성을 담당하며,코드를 적는시간을 단축시킨다.
HTML 기본구조
<!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>
visual studio code에서 ! tab키를 누르게 되면 html기본구조가 자동적으로 생성되게 된다. 위의 코드를 외울필요는 없다.
자식노드 >
div>ul>li <div>
<ul>
<li></li>
</ul>
</div>
형제노드 +
div>ul+ol <div>
<ul></ul>
<ol></ol>
</div>
반복하기 *
div>ul>li*3 <div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
else
<!--id-->
span#id
<!--class-->
span.class
<!--contents-->
p{hello} <span id="id"></span>
<span class="calss"></span>
<p>hello</p>
Emmet을 반드시 사용할 필요는 없지만 사용하게 된다면 굉장히 편리하다. 따라서 Emmet에 익숙해주고 사용하는것이 좋다
'front-end > html' 카테고리의 다른 글
| html 3,4주차 강의 (0) | 2024.10.15 |
|---|---|
| html 강의 내용 정리 1,2주차 (9) | 2024.09.25 |
