emmit 사용법
emmit이란
강력한 자동완성 기능을 통해 HTML 작성속도를 향상시켜주는 플러그인
emmit 활용법
1. ! + tab
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>이렇게 HTML태그 , head태그, body태그 등 기본틀이 자동으로 만들어진다.
2. tag + Enter
태그 + Enter를 하게되면 태그쌍이 만들어진다.
ex) h1 + Enter
<h1></h1>이렇게 만들어진다.
h1 + Tab도 가능하다.
3. tag + tag
tag + tag이다.
바로 예를 들어보자.
ex) h1+p
<h1></h1>
<p></p>그리고 +태그를 계속해서 덧붙여가도 적용된다.
ex) h2+h1+h3+p+p+p
<h2></h2>
<h1></h1>
<h3></h3>
<p></p>
<p></p>
<p></p>4. 자식요소 >
자식요소를 나타낼 때 사용된다.
ex) div>p
<div>
<p></p>
</div>ex) div>div>li
<div>
<div>
<li></li>
</div>
</div>5. .class
클래스를 만들때 사용된다.
.클래스을 입력한후 Enter or Tab
ex) .class_name
<div class="class_name"></div>6. 넘버링 $
숫자를 넘버링 할 때 사용하는 emmit 표기다. $!!
ex) p$*3
<p1></p1>
<p2></p2>
<p3></p3>ex) ol>li$*10
<ol>
<li1></li1>
<li2></li2>
<li3></li3>
<li4></li4>
<li5></li5>
<li6></li6>
<li7></li7>
<li8></li8>
<li9></li9>
<li10></li10>
</ol>유용하다 유용해 ...
***
7. tag + # + 아이디명
마지막으로는 아이디명!
ex) p#nastar를 입력하게되면
<p id="nastar"></p>이렇게 !! 나오게 된다.
정말 유용한 emmit이다.
마지막
emmit을 쓰지 않고 HTML 과 CSS로 하나의 랜딩페이지를 만들어 본적이 있다. 그때 emmit을 사용하긴 했지만 활용하진 못했던 것 같다. 예를 들어 자식요소 emmit 같은 것 말이다. emmit을 한번 글로 정리해보니 기억에 잘 남는 것 같다.
멋쟁이사자 프론트엔드 스쿨에 합격하고 2/27일 부터 교육을 듣게 되었다. 여기서 강조하는 것은 1일 1커밋과 회고, 블로그 작성 이라고 생각한다. 그래서 미뤄왔던 블로그 작성을 제대로 해보게되었고 이번 교육을 통해 지금이나마 시작할 수 있어서 감사하다.
블로그 글 쓰는 것이 어렵지만 글을 계속 써봄으로써 가독성 좋은 글을 쓰고자 노력해볼 것이다. + Markdown작성법 도 연습되니까 좋다!! 🙂😚🤩
VS Code 작업속도 향상을 위한 Emmit 블로거님 글이 깔끔한 것 같다.
https://www.hanl.tech/blog/emmet-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%B0%8F-%ED%8A%B8%EB%A6%AD-9%EA%B0%80%EC%A7%80/
