Emmet 치트시트
검색과 인쇄가 가능한 Emmet 참고자료입니다: 중첩 연산자, 곱셈, 그룹화, 속성, HTML과 CSS 약어까지. 무료입니다.
Nesting operators
8div>ul>li
> child: li inside ul inside div
div+p+blockquote
+ sibling: elements on the same level
div+div>p>span+em
Combine child and sibling operators
div+div>p>span+em^bq
^ climb up: bq is a sibling of p
div+div>p>span+em^^^bq
Each ^ climbs one more level up
nav>ul>li*4>a
A four-link navigation in one line
ul>li>a[href=#]{Link}
Nest, attribute and text combined
div>p+p+p
One parent, three paragraph children
Multiplication & numbering
9ul>li*5
* repeats the element 5 times
li.item$*3
$ = counter: item1, item2, item3
li.item$$$*3
Pad with zeros: item001, item002...
li.item$@-*3
@- counts down: item3, item2, item1
li.item$@3*5
@3 starts counting at 3 (3..7)
li.item$@-3*5
Count down ending at 3 (7..3)
h$[title=item$]{Header $}*3
$ works in tag, attribute and text
ul>li*3>a{Link $}
Counter follows the repeated parent
td*5
Five empty table cells
Grouping
8div>(header>ul>li*2>a)+footer>p
() groups a subtree; footer stays in div
(div>dl>(dt+dd)*3)+footer>p
Nested groups, repeated dt/dd pairs
(li>a)*5
Multiply a whole group, not one tag
ul>(li>a{Item $})*4
Grouped repeat with counters
(header+main+footer)
Page skeleton as one abbreviation
table>(tr>td*3)*4
4x3 table via nested groups
(div.col)*2
Two sibling columns
section>(h2+p)*3
Repeat heading + paragraph blocks
ID, class & attributes
10div#header
# sets the id attribute
div.title
. sets the class attribute
p.class1.class2.class3
Chain multiple classes
form#search.wide
Combine id and class
#page
No tag: div is implied
.card
Same: expands to div.card
td[title="Hello" colspan=3]
[] sets custom attributes
a[href=# data-id=5]
Multiple attributes, space-separated
input[type=text required]
Boolean attributes need no value
img[src=logo.png alt=Logo]
Quotes optional for simple values
Text & implicit tag names
9a{Click me}
{} inserts text into the element
a{click}+b{here}
<a>click</a><b>here</b>
a>{click}+b{here}
<a>click<b>here</b></a>: b inside a
p>{Text }+a{link}+{ more}
Mix raw text nodes and elements
.wrap>.content
div is implied at block level
em>.hint
Inside inline: span is implied
ul>.item*3
Inside ul/ol: li is implied
table>.row>.col
tr and td are implied in tables
select>.opt*3
option is implied inside select
HTML boilerplate
10!
Full HTML5 boilerplate (html:5)
html:5
Same: doctype, head, meta, body
!!!
Just the <!DOCTYPE html> line
meta:utf
<meta charset="UTF-8">
meta:vp
Responsive viewport meta tag
link
<link rel="stylesheet" href="">
link:css
Stylesheet link to style.css
link:favicon
Favicon link tag
script:src
<script src=""></script>
doc
Document without the doctype
Common HTML abbreviations
14a
<a href=""></a>
a:mail
<a href="mailto:"></a>
img
<img src="" alt="">
btn
<button></button>
form:post
Form with method="post"
input:email
Email input with name and id
input:password
Password input
input:checkbox / input:radio
Checkbox / radio inputs
input:submit
Submit button input
sel>opt*3
Select with three options
label+input
Label and input pair
tarea
<textarea></textarea>
table+
table>tr>td expanded
ol+ / ul+ / dl+
List with its first item(s)
CSS abbreviations
15m10
margin: 10px;
p10-20
padding: 10px 20px;
m10-auto
margin: 10px auto;
w100 / h50
width: 100px; / height: 50px;
df
display: flex;
dib / dn
display: inline-block; / none;
pos:a / pos:r / pos:f
position absolute/relative/fixed
t0+l0
top: 0; left: 0;
fz14
font-size: 14px;
fwb / fw700
font-weight: bold / 700
c#f00
color: #f00;
bgc#fff
background-color: #fff;
bd+
border: 1px solid #000;
tac / tar
text-align: center / right
bdrs5
border-radius: 5px;
CSS values & units
11m10
Integers default to px: 10px
m10p
p suffix = percent: 10%
m1.5
Floats default to em: 1.5em
m10e
e suffix = em: 10em
m10r
r suffix = rem: 10rem
m10x
x suffix = ex unit
w100p
width: 100%;
m-10
Negative value: margin: -10px;
m10-20-30-40
Four values: top right bottom left
lh1.5
line-height: 1.5em (or unitless)
fz2r
font-size: 2rem;
Vendor prefixes
9-bdrs
Prefix with all vendors + plain
-wm-trf
Only -webkit- and -moz- variants
-w-bxsh
w=webkit, m=moz, s=ms, o=opera
trf:r
transform: rotate(angle);
trf:s
transform: scale(x, y);
trs
transition shorthand
anim
animation shorthand
us:n
user-select: none;
-super-foo
Unknown props get prefixed too
Wrap & editor actions
11Wrap with Abbreviation
Wrap the selection in an abbreviation
ul>li*
While wrapping: one li per line
a[href=$#]{$#}
$# outputs the wrapped content
Balance (outward/inward)
Select the matching tag pair
Go to Matching Pair
Jump between open and close tags
Remove Tag
Delete a tag, keep its children
Split/Join Tag
Toggle <p></p> and <p/> forms
Toggle Comment
Comment out the current tag/rule
Increment Number by 1/10/0.1
Bump a number under the cursor
Select Next/Previous Item
Hop between tags, attrs, classes
Update Image Size
Insert real width/height of an img
“:q”와 일치하는 항목이 없습니다.
Emmet 치트시트 소개
이 Emmet 치트시트는 약어 문법을 검색 가능한 한 페이지로 정리했습니다: 중첩 연산자, 곱셈과 번호 매기기, 그룹화, ID, 클래스와 속성 문법, 텍스트와 암시적 태그 이름, HTML 기본 골격, 자주 쓰는 HTML 약어, CSS 약어, CSS 값과 단위, 벤더 접두사, 그리고 wrap과 에디터 동작까지 다룹니다.
Emmet은 연산자가 손에 익으면 그 진가를 발휘합니다: 자식, 형제, 상위 이동 문자, 목록 전체를 생성하는 곱셈과 $ 번호 매기기, 세 글자로 속성과 값을 전개하는 CSS 축약형 등입니다. 모든 행이 약어와 그것이 전개되는 마크업 또는 CSS를 함께 보여줍니다.
이 그룹의 다른 치트시트와 마찬가지로 무료이며 클라이언트 측에서 동작합니다: 검색창으로 실시간으로 행을 필터링하고, 고정된 목차로 섹션을 이동하고, 클릭 한 번으로 약어를 복사하고, 에디터 옆에서 참고할 수 있도록 페이지를 인쇄할 수 있습니다.
Emmet 치트시트 사용 방법
- 시트를 열고 중첩 연산자부터 wrap & 에디터 동작까지 섹션을 검토하세요.
- numbering, boilerplate, grid 같은 키워드를 검색해 모든 행을 실시간으로 필터링하세요.
- 마크업 축약형이 아니라 속성 축약형이 필요할 때는 CSS 약어 섹션으로 이동하세요.
- 약어나 복사 아이콘을 클릭해 클립보드에 복사한 다음 에디터에서 전개하세요.
- 전체 Emmet 참고자료를 종이로 보려면 인쇄를 사용하세요.
자주 묻는 질문
11개 섹션입니다: 중첩 연산자, 곱셈과 번호 매기기, 그룹화, ID, 클래스와 속성, 텍스트와 암시적 태그 이름, HTML 기본 골격, 자주 쓰는 HTML 약어, CSS 약어, CSS 값과 단위, 벤더 접두사, wrap과 에디터 동작입니다.
네. Emmet은 VS Code에 내장되어 있고 대부분의 다른 최신 에디터와 IDE에도 기본 포함되어 있으므로 이 시트의 약어는 별도 설정 없이 바로 전개됩니다.
곱셈과 번호 매기기 섹션에서 $ 플레이스홀더를 사용하는 * 연산자를 0 채우기와 시작 오프셋까지 포함해 보여주므로, 약어 하나로 번호가 매겨진 요소 목록을 생성할 수 있습니다.
네. 어떤 행이든 클릭하거나 복사 아이콘을 클릭하면 바로 약어가 복사됩니다.
네, 완전히 무료이며 로그인 없이 브라우저에서 실행됩니다.
인기 검색어
emmet 치트시트
emmet 약어
emmet html 단축 문법
emmet css 약어
emmet 문법 참고자료
vs code emmet 단축키
emmet 곱셈 번호 매기기
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.