이번 포스트에서는 HTML 코드 작성시 코딩 속도에 날개를 달아줄 Emmet의 필수 사용법에 대해 알아보자.
Emmet - the essential toolkit for web developers
Emmet은 HTML 태그 작성을 매우 빠르게 할 수 있게 도와주는 도구이다.
https://emmet.io/
Emmet — the essential toolkit for web-developers
Emmet — the essential toolkit for web-developers Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow: Demo | @@@ tooltip: Type CSS-like abbreviation type: ul#nav>li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan
emmet.io
Emmet은 대부분의 IDE들에 내장시켜서 사용할 수 있다. vscode에는 기본으로 내장되어있고 eclipse에서도 플러그인으로 설치할 수 있다.
https://goodteacher.tistory.com/395
[eclipse]emmet 플러그인 설치
emmit은 미리 지정된(주로 css 선택자 기반)예약어들을 이용해서 어마어마하게 빠른 속도록 html 페이지를 작성할 수 있게 도와주는 녀석이다. Emmet — the essential toolkit for web-developers Emmet — the essent
goodteacher.tistory.com
Cheet Sheet
emmet은 단축키,기호 기반으로 HTML 태그를 작성하는 도구이다. 따라서 용도에 따라서 적절한 단축키, 기호를 알아두는 것이 매우 중요하다. emmet 사이트에는 cheet sheet를 통해 기능들을 공개해 두었다.
https://docs.emmet.io/cheat-sheet/
Cheat Sheet
Download cheat sheet as printable PDF A5
docs.emmet.io
그런데 가지수가 너~무 많다는 것은 함정! 그나마 다행인점은 기호들의 출발점이 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>
이때 lang을 en에서 ko로 변경하려면 다음을 참조하자.
https://goodteacher.tistory.com/612
자식 요소(child) 작성: >
nav>ul>li
nav>ul>li <!-- 중간에 공백 삽입 금지-->
<nav>
<ul>
<li></li>
</ul>
</nav>
상위 요소로 이동
div>p>b^hr^a
<div>
<p>
<b></b>
</p>
<hr>
</div>
<a href=""></a>
형제 요소 작성: +
div>p+bq
div>p+a
<div>
<p></p>
<a href=""></a>
</div>
태그 반복: *
ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ID와 Class 속성: #, .
div#main.container
<div id="main" class="container"></div>
요소의 numbering: $
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
h$.header$$$.container$$@-#item$@5*3
<h1 class="header001 container03" id="item5"></h1>
<h2 class="header002 container02" id="item6"></h2>
<h3 class="header003 container01" id="item7"></h3>
grouping: ()
div>(header>ul>li*2>a)+footer>p div>header>ul>li*2>a^^^footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
속성: [key=value]
p[title='hello world']
<p title="hello world"></p>
텍스트: {내용}
a[href="naver"]{click me}
<a href="naver">click me</a>