https://docs.emmet.io/cheat-sheet/
Cheat Sheet
Download cheat sheet as printable PDF A5
docs.emmet.io
html 작업환경에서(나의 경우는 vscode 상) 자동완성 기능
<!DOCTYPE html>
<html lang="ko">
<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>emmet</title>
</head>
<body>
h1
h1{hello world}
h1+p
h1{hello}10
h1#one
h1.one
table>(tr>(td4))3
lorem
lorem3
lorem5
img
img:z
a[a="value1" b="value2" c=1]<!-- 얘네 a, b, c,는 그냥 이렇게 attribute 입력가능하다고 -->
a
a[href="www.naver.com"]
h1.one.two#three
</body>
</html>body 태그 사이에 있는 것들이 다 emmet 문법들인데 저렇게 입력하고서 팝업?처럼 뜰 때 tab 키를 누르면 저기에 연동되어 있는 tag들이 자동 입력된다.
머리에 털나고 처음 보는 줄 알았는데 대충 알고 있던 거였구나
이런 생산성을 봤나
이걸 몰랐으니 html 뭔가 작업하기 비효율적이다 생각했지.
+ h1~h2 태그 한번에 입력하기
역시 emmet문법으로!
h$*6{hello world}이렇게 입력하고 탭하면
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>한번에 이렇게 나온다!!
생산성 무엇
'Etc. > HTML' 카테고리의 다른 글
| [HTML] Markup Layout (0) | 2021.11.04 |
|---|---|
| [HTML] div, section, article (0) | 2021.10.29 |
| [HTML] 접근하는 마음가짐 (0) | 2021.10.29 |
댓글