Emmet

https://docs.emmet.io/

VSCode, Bracket, Notepad+ 와 같은 프로그램에서 HTML, CSS 코딩에 반복되는 코드 입력을 손쉽게 해주는 확장기능이다.

VSCode는 추가기능 설치가 필요없이 기본적으로 Emmet을 지원하며, 입력 후에 Tab을 누르면 된다.

Syntax

Child: >

nav>ul>li

  <nav>
    <ul>
        <li></li>
    </ul>
  </nav>

Sibling: +

div+p+bq

  <div></div>
  <p></p>
  <blockquote></blockquote>

Climb-up: ^

div+div>p>span+em^bq

  <div></div>
  <div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
  </div>

div+div>p>span+em^^bq

  <div></div>
  <div>
    <p><span></span><em></em></p>
  </div>
  <blockquote></blockquote>

Grouping: ()

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>

(div>dl>(dt+dd)*3)+footer>p

  <div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
  </div>
  <footer>
    <p></p>
  </footer>

Multiplication: *

ul>li*5

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

Item numbering: $

ul>li.item$*5

  <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
  </ul>

h$[title=item$]{Header $}*3

  <h1 title="item1">Header 1</h1>
  <h2 title="item2">Header 2</h2>
  <h3 title="item3">Header 3</h3>

ul>li.item$$$*5

  <ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
 </ul>

ul>li.item$@-*5

  <ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
  </ul>

ul>li.item$@3*5

  <ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
  </ul>

ID and CLASS attributes

#header

  <div id="header"></div>

.title

  <div class="title"></div>

form#search.wide

  <form id="search" class="wide"></form>

p.class1.class2.class3

  <p class="class1 class2 class3"></p>

Custom attributes

p[title=“Hello world”]

  <p title="Hello world"></p>

td[rowspan=2 colspan=3 title]

  <td rowspan="2" colspan="3" title=""></td>

[a='value1' b=“value2”]

  <div a="value1" b="value2"></div>

Text: {}

a{Click me}

  <a href="">Click me</a>

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

Implicit tag names

.class

  <div class="class"></div>

em>.class

  <em><span class="class"></span></em>

ul>.class

  <ul>
    <li class="class"></li>
  </ul>

table>.row>.col

  <table>
    <tr class="row">
        <td class="col"></td>
    </tr>
  </table>

HTML

All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>.

! Alias of html:5

  <!DOCTYPE html>
  <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <title>Document</title>
   </head>
   <body>
    
   </body>
  </html>

a

  <a href=""></a>

a:link

  <a href="http://"></a>

a:mail

  <a href="mailto:"></a>

abbr

  <abbr title=""></abbr>

acronym, acr

  <acronym title=""></acronym>

base

  <base href="" />

basefont

  <basefont />

br

  <br />

frame

  <frame />

hr

  <hr />

bdo

  <bdo dir=""></bdo>

bdo:r

  <bdo dir="rtl"></bdo>

bdo:l

  <bdo dir="ltr"></bdo>

col

  <col />

link

  <link rel="stylesheet" href="" />

link:css

  <link rel="stylesheet" href="style.css" />

link:print

  <link rel="stylesheet" href="print.css" media="print" />

link:favicon

  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

link:touch

  <link rel="apple-touch-icon" href="favicon.png" />

link:rss

  <link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml" />

link:atom

  <link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml" />

link:import, link:im

  <link rel="import" href="component.html" />

meta

  <meta />

meta:utf

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

meta:win

  <meta http-equiv="Content-Type" content="text/html;charset=windows-1251" />

meta:vp

  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

meta:compat

  <meta http-equiv="X-UA-Compatible" content="IE=7" />

style

  <style></style>

script

  <script></script>

script:src

  <script src=""></script>

img

  <img src="" alt="" />

img:srcset, img:s

  <img srcset="" src="" alt="" />

img:sizes, img:z

  <img sizes="" srcset="" src="" alt="" />

picture

  <picture></picture>

source, src

  <source />

source:src, src:sc

  <source src="" type="" />

source:srcset, src:s

  <source srcset="" />

source:media, src:m

  <source media="(min-width: )" srcset="" />

source:type, src:t

  <source srcset="" type="image/" />

source:sizes, src:z

  <source sizes="" srcset="" />

source:media:type, src:mt

  <source media="(min-width: )" srcset="" type="image/" />

source:media:sizes, src:mz

  <source media="(min-width: )" sizes="" srcset="" />

source:sizes:type, src:zt

  <source sizes="" srcset="" type="image/" />

iframe

  <iframe src="" frameborder="0"></iframe>

embed

  <embed src="" type="" />

object

  <object data="" type=""></object>

param

  <param name="" value="" />

map

  <map name=""></map>

area

  <area shape="" coords="" href="" alt="" />

area:d

  <area shape="default" href="" alt="" />

area:c

  <area shape="circle" coords="" href="" alt="" />

area:r

  <area shape="rect" coords="" href="" alt="" />

area:p

  <area shape="poly" coords="" href="" alt="" />

form

  <form action=""></form>

form:get

  <form action="" method="get"></form>

form:post

  <form action="" method="post"></form>

label

  <label for=""></label>

input

  <input type="text" />

inp

  <input type="text" name="" id="" />

input:hidden, input:h
Alias of input[type=hidden name]

  <input type="hidden" name="" />

input:text, input:t
Alias of inp

  <input type="text" name="" id="" />

input:search
Alias of inp[type=search]

  <input type="search" name="" id="" />

input:email
Alias of inp[type=email]

  <input type="email" name="" id="" />

input:url
Alias of inp[type=url]

  <input type="url" name="" id="" />

input:password, input:p
Alias of inp[type=password]

  <input type="password" name="" id="" />

input:datetime
Alias of inp[type=datetime]

  <input type="datetime" name="" id="" />

input:date
Alias of inp[type=date]

  <input type="date" name="" id="" />

input:datetime-local
Alias of inp[type=datetime-local]

  <input type="datetime-local" name="" id="" />

input:month
Alias of inp[type=month]

  <input type="month" name="" id="" />

input:week
Alias of inp[type=week]

  <input type="week" name="" id="" />

input:time
Alias of inp[type=time]

  <input type="time" name="" id="" />

input:tel
Alias of inp[type=tel]

  <input type="tel" name="" id="" />

input:number
Alias of inp[type=number]

  <input type="number" name="" id="" />

input:color
Alias of inp[type=color]

  <input type="color" name="" id="" />

input:checkbox, input:c
Alias of inp[type=checkbox]

  <input type="checkbox" name="" id="" />

input:radio, input:r
Alias of inp[type=radio]

  <input type="radio" name="" id="" />

input:range
Alias of inp[type=range]

  <input type="range" name="" id="" />

input:file, input:f
Alias of inp[type=file]

  <input type="file" name="" id="" />

input:submit, input:s

  <input type="submit" value="" />

input:image, input:i

  <input type="image" src="" alt="" />

input:button, input:b

  <input type="button" value="" />

isindex

  <isindex />

input:reset
Alias of input:button[type=reset]

  <input type="reset" value="" />

select

  <select name="" id=""></select>

select:disabled, select:d
Alias of select[disabled.]

  <select name="" id="" disabled="disabled"></select>

option, opt

  <option value=""></option>

textarea

  <textarea name="" id="" cols="30" rows="10"></textarea>

marquee

  <marquee behavior="" direction=""></marquee>

menu:context, menu:c
Alias of menu[type=context]>

  <menu type="context"></menu>

menu:toolbar, menu:t
Alias of menu[type=toolbar]>

  <menu type="toolbar"></menu>

video

  <video src=""></video>

audio

  <audio src=""></audio>

html:xml

  <html xmlns="http://www.w3.org/1999/xhtml"></html>

keygen

  <keygen />

command

  <command />

button:submit, button:s, btn:s
Alias of button[type=submit]

  <button type="submit"></button>

button:reset, button:r, btn:r
Alias of button[type=reset]

  <button type="reset"></button>

button:disabled, button:d, btn:d
Alias of button[disabled.]

  <button disabled="disabled"></button>

fieldset:disabled, fieldset:d, fset:d, fst:d
Alias of fieldset[disabled.]

  <fieldset disabled="disabled"></fieldset>

bq
Alias of blockquote

  <blockquote></blockquote>

fig
Alias of figure

  <figure></figure>

figc
Alias of figcaption

  <figcaption></figcaption>

pic
Alias of picture

  <picture></picture>

ifr
Alias of iframe

  <iframe src="" frameborder="0"></iframe>

emb
Alias of embed

  <embed src="" type="" />

obj
Alias of object

  <object data="" type=""></object>

cap
Alias of caption

  <caption></caption>

colg
Alias of colgroup

  <colgroup></colgroup>

fst, fset
Alias of fieldset

  <fieldset></fieldset>

btn
Alias of button

  <button></button>

optg
Alias of optgroup

  <optgroup></optgroup>

tarea
Alias of textarea

  <textarea name="" id="" cols="30" rows="10"></textarea>

leg
Alias of legend

  <legend></legend>

sect
Alias of section

  <section></section>

art
Alias of article

  <article></article>

hdr
Alias of header

  <header></header>

ftr
Alias of footer

  <footer></footer>

adr
Alias of address

  <address></address>

dlg
Alias of dialog

  <dialog></dialog>

str
Alias of strong

  <strong></strong>

prog
Alias of progress

  <progress></progress>

mn
Alias of main

  <main></main>

tem
Alias of template

  <template></template>

datag
Alias of datagrid

  <datagrid></datagrid>

datal
Alias of datalist

  <datalist></datalist>

kg
Alias of keygen

  <keygen />

out
Alias of output

  <output></output>

det
Alias of details

  <details></details>

cmd
Alias of command

  <command />

doc
Alias of html
(head>meta[charset=${charset}]+title{${1:Document}})+body

  <html>
    <head>
      <meta charset="UTF-8" />
      <title>Document</title>
    </head>
    <body>
    
    </body>
  </html>

doc4
Alias of html>(head>meta[http-equiv=“Content-Type” >content=“text/html;charset=${charset}”]+title{${1:Document}})+body

  <html>
    <head>
      <meta http-equiv="Content-Type" 
       content="text/html;charset=UTF-8" />
      <title>Document</title>
    </head>
    <body>
    
    </body>
  </html>

ri:dpr, ri:d
Alias of img:s

  <img srcset="" src="" alt="" />

ri:viewport, ri:v
Alias of img:z

  <img sizes="" srcset="" src="" alt="" />

ri:art, ri:a
Alias of pic>src:m+img

  <picture>
    <source media="(min-width: )" srcset="" />
    <img src="" alt="" />
  </picture>

ri:type, ri:t
Alias of pic>src:t+img

  <picture>
    <source srcset="" type="image/" />
    <img src="" alt="" />
  </picture>

html:4t
Alias of !!!4t+doc4[lang=${lang}]

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  <html lang="en">
  <head>
      <meta http-equiv="Content-Type" 
  content="text/html;charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
    
  </body>
  </html>

html:4s
Alias of !!!4s+doc4[lang=${lang}]

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  <html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
    
  </body>
  </html>

html:xt
Alias of !!!xt+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
    
  </body>
  </html>

html:xs
Alias of !!!xs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
    
  </body>
  </html>

html:xxs
Alias of !!!xxs+doc4[xmlns=http://www.w3.org/1999/xhtml xml:lang=${lang}]

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
  </head>
  <body>
    
  </body>
  </html>

html:5
Alias of !!!+doc[lang=${lang}]

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    
  </body>
  </html>

ol+
Alias of ol>li

  <ol>
    <li></li>
  </ol>

ul+
Alias of ul>li

  <ul>
    <li></li>
  </ul>

dl+
Alias of dl>dt+dd

  <dl>
    <dt></dt>
    <dd></dd>
  </dl>

map+
Alias of map>area

  <map name="">
    <area shape="" coords="" href="" alt="" />
  </map>

table+
Alias of table>tr>td

  <table>
    <tr>
        <td></td>
    </tr>
  </table>

colgroup+, colg+
Alias of colgroup>col

  <colgroup>
    <col />
  </colgroup>

tr+
Alias of tr>td

  <tr>
    <td></td>
  </tr>

select+
Alias of select>option

  <select name="" id="">
    <option value=""></option>
  </select>

optgroup+, optg+
Alias of optgroup>option

  <optgroup>
    <option value=""></option>
  </optgroup>

pic+
Alias of picture>source:srcset+img

  <picture>
    <source srcset="" />
    <img src="" alt="" />
  </picture>

!!!

  <!DOCTYPE html>

!!!4t

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

!!!4s

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

!!!xt

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

!!!xs

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

!!!xxs

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

c

  <!-- ${child} -->

cc:ie6

  <!--[if lte IE 6]>
    ${child}
  <![endif]-->

cc:ie

  <!--[if IE]>
    ${child}
  <![endif]-->

cc:noie

  <!--[if !IE]><!-->
    ${child}
  <!--<![endif]-->

CSS

CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.

If abbreviation wasn’t found, it is transformed into property name: foo-bar → foo-bar: |;

You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo

Visual Formatting

pos

position:relative;

pos:s

position:static;

pos:a

position:absolute;

pos:r

position:relative;

pos:f

position:fixed;

t

top:;

>

t:a

top:auto;

r

right:;

r:a

right:auto;

b

bottom:;

b:a

bottom:auto;

l

left:;

l:a

left:auto;

z

z-index:;

z:a

z-index:auto;

fl

float:left;

fl:n

float:none;

fl:l

float:left;

fl:r

float:right;

cl

clear:both;

cl:n

clear:none;

cl:l

clear:left;

cl:r

clear:right;

cl:b

clear:both;

d

display:block;

d:n

display:none;

d:b

display:block;

>

d:f

display:flex;

d:if

display:inline-flex;

d:i

display:inline;

d:ib

display:inline-block;

d:li

display:list-item;

d:ri

display:run-in;

d:cp

display:compact;

d:tb

display:table;

d:itb

display:inline-table;

d:tbcp

display:table-caption;

d:tbcl

display:table-column;

d:tbclg

display:table-column-group;

d:tbhg

display:table-header-group;

d:tbfg

display:table-footer-group;

d:tbr

display:table-row;

d:tbrg

display:table-row-group;

d:tbc

display:table-cell;

d:rb

display:ruby;

d:rbb

display:ruby-base;

d:rbbg

display:ruby-base-group;

d:rbt

display:ruby-text;

d:rbtg

display:ruby-text-group;

v

visibility:hidden;

v:v

visibility:visible;

v:h

visibility:hidden;

v:c

visibility:collapse;

ov

overflow:hidden;

ov:v

overflow:visible;

ov:h

overflow:hidden;

ov:s

overflow:scroll;

ov:a

overflow:auto;

ovx

overflow-x:hidden;

ovx:v

overflow-x:visible;

ovx:h

overflow-x:hidden;

ovx:s

overflow-x:scroll;

ovx:a

overflow-x:auto;

ovy

overflow-y:hidden;

ovy:v

overflow-y:visible;

ovy:h

overflow-y:hidden;

ovy:s

overflow-y:scroll;

ovy:a

overflow-y:auto;

ovs

overflow-style:scrollbar;

ovs:a

overflow-style:auto;

ovs:s

overflow-style:scrollbar;

ovs:p

overflow-style:panner;

ovs:m

overflow-style:move;

ovs:mq

overflow-style:marquee;

zoo, zm

zoom:1;

cp

clip:;

cp:a

clip:auto;

cp:r

clip:rect(top right bottom left);

rsz

resize:;

rsz:n

resize:none;

rsz:b

resize:both;

rsz:h

resize:horizontal;

rsz:v

resize:vertical;

cur

cursor:${pointer};

cur:a

cursor:auto;

cur:d

cursor:default;

cur:c

cursor:crosshair;

cur:ha

cursor:hand;

cur:he

cursor:help;

cur:m

cursor:move;

cur:p

cursor:pointer;

cur:t

cursor:text;

Margin & Padding

m

margin:;

m:a

margin:auto;

mt

margin-top:;

mt:a

margin-top:auto;

mr

margin-right:;

mr:a

margin-right:auto;

mb

margin-bottom:;

mb:a

margin-bottom:auto;

ml

margin-left:;

ml:a

margin-left:auto;

p

padding:;

pt

padding-top:;

pr

padding-right:;

pb

padding-bottom:;

pl

padding-left:;

Box Sizing

bxz

box-sizing:border-box;

bxz:cb

box-sizing:content-box;

bxz:bb

box-sizing:border-box;

bxsh

box-shadow:inset hoff voff blur color;

bxsh:r

box-shadow:inset hoff voff blur spread rgb(0, 0, 0);

bxsh:ra

box-shadow:inset h v blur spread rgba(0, 0, 0, .5);

bxsh:n

box-shadow:none;

w

width:;

w:a

width:auto;

h

height:;

h:a

height:auto;

maw

max-width:;

maw:n

max-width:none;

mah

max-height:;

mah:n

max-height:none;

miw

min-width:;

mih

min-height:;

Font

f

font:;

f+

font:1em Arial,sans-serif;

fw

font-weight:;

fw:n

font-weight:normal;

fw:b

font-weight:bold;

fw:br

font-weight:bolder;

fw:lr

font-weight:lighter;

fs

font-style:${italic};

fs:n

font-style:normal;

fs:i

font-style:italic;

fs:o

font-style:oblique;

fv

font-variant:;

fv:n

font-variant:normal;

fv:sc

font-variant:small-caps;

fz

font-size:;

fza

font-size-adjust:;

fza:n

font-size-adjust:none;

ff

font-family:;

ff:s

font-family:serif;

ff:ss

font-family:sans-serif;

ff:c

font-family:cursive;

ff:f

font-family:fantasy;

ff:m

font-family:monospace;

ff:a

font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

ff:t

font-family: "Times New Roman", Times, Baskerville, Georgia, serif;

ff:v

font-family: Verdana, Geneva, sans-serif;

fef

font-effect:;

fef:n

font-effect:none;

fef:eg

font-effect:engrave;

fef:eb

font-effect:emboss;

fef:o

font-effect:outline;

fem

font-emphasize:;

femp

font-emphasize-position:;

femp:b

font-emphasize-position:before;

femp:a

font-emphasize-position:after;

fems

font-emphasize-style:;

fems:n

font-emphasize-style:none;

fems:ac

font-emphasize-style:accent;

fems:dt

font-emphasize-style:dot;

fems:c

font-emphasize-style:circle;

fems:ds

font-emphasize-style:disc;

fsm

font-smooth:;

fsm:a

font-smooth:auto;

fsm:n

font-smooth:never;

fsm:aw

font-smooth:always;

fst

font-stretch:;

fst:n

font-stretch:normal;

fst:uc

font-stretch:ultra-condensed;

fst:ec

font-stretch:extra-condensed;

fst:c

font-stretch:condensed;

fst:sc

font-stretch:semi-condensed;

fst:se

font-stretch:semi-expanded;

fst:e

font-stretch:expanded;

fst:ee

font-stretch:extra-expanded;

fst:ue

font-stretch:ultra-expanded;

Text

va

vertical-align:top;

va:sup

vertical-align:super;

va:t

vertical-align:top;

va:tt

vertical-align:text-top;

va:m

vertical-align:middle;

va:bl

vertical-align:baseline;

va:b

vertical-align:bottom;

va:tb

vertical-align:text-bottom;

va:sub

vertical-align:sub;

ta

text-align:left;

ta:l

text-align:left;

ta:c

text-align:center;

ta:r

text-align:right;

ta:j

text-align:justify;

ta-lst

text-align-last:;

tal:a

text-align-last:auto;

tal:l

text-align-last:left;

tal:c

text-align-last:center;

tal:r

text-align-last:right;

td

text-decoration:none;

td:n

text-decoration:none;

td:u

text-decoration:underline;

td:o

>text-decoration:overline;

td:l

text-decoration:line-through;

te

text-emphasis:;

te:n

text-emphasis:none;

te:ac

text-emphasis:accent;

te:dt

text-emphasis:dot;

te:c

text-emphasis:circle;

te:ds

text-emphasis:disc;

te:b

text-emphasis:before;

te:a

text-emphasis:after;

th

text-height:;

th:a

text-height:auto;

th:f

text-height:font-size;

th:t

text-height:text-size;

th:m

text-height:max-size;

ti

text-indent:;

ti:-

text-indent:-9999px;

tj

text-justify:;

tj:a

text-justify:auto;

tj:iw

text-justify:inter-word;

tj:ii

text-justify:inter-ideograph;

tj:ic

text-justify:inter-cluster;

tj:d

text-justify:distribute;

tj:k

text-justify:kashida;

tj:t

text-justify:tibetan;

to

text-outline:;

to+

text-outline:0 0 #000;

to:n

text-outline:none;

tr

text-replace:;

tr:n

text-replace:none;

tt

text-transform:uppercase;

tt:n

text-transform:none;

tt:c

text-transform:capitalize;

tt:u

text-transform:uppercase;

tt:l

text-transform:lowercase;

tw

text-wrap:;

tw:n

text-wrap:normal;

tw:no

text-wrap:none;

tw:u

text-wrap:unrestricted;

tw:s

text-wrap:suppress;

tsh

text-shadow:hoff voff blur #000;

tsh:r

text-shadow:h v blur rgb(0, 0, 0);

tsh:ra

text-shadow:h v blur rgba(0, 0, 0, .5);

tsh+

text-shadow:0 0 0 #000;

tsh:n

text-shadow:none;

lh

line-height:;

lts

letter-spacing:;

lts-n

letter-spacing:normal;

whs

white-space:;

whs:n

white-space:normal;

whs:p

white-space:pre;

whs:nw

white-space:nowrap;

whs:pw

white-space:pre-wrap;

whs:pl

white-space:pre-line;

whsc

white-space-collapse:;

whsc:n

white-space-collapse:normal;

whsc:k

white-space-collapse:keep-all;

whsc:l

white-space-collapse:loose;

whsc:bs

white-space-collapse:break-strict;

whsc:ba

white-space-collapse:break-all;

wob

word-break:;

wob:n

word-break:normal;

wob:k

word-break:keep-all;

wob:ba

word-break:break-all;

wos

word-spacing:;

wow

word-wrap:;

wow:nm

word-wrap:normal;

wow:n

word-wrap:none;

wow:u

word-wrap:unrestricted;

wow:s

word-wrap:suppress;

wow:b

word-wrap:break-word;

Background

bg

background:#000

;

bg+

background:#fff url() 0 0 no-repeat;

bg:n

background:none;

bgc

background-color:#fff;

bgc:t

background-color:transparent;

bgi

background-image:url();

bgi:n

background-image:none;

bgr

background-repeat:;

bgr:n

background-repeat:no-repeat;

bgr:x

background-repeat:repeat-x;

bgr:y

background-repeat:repeat-y;

bgr:sp

background-repeat:space;

bgr:rd

background-repeat:round;

bga

background-attachment:;

bga:f

background-attachment:fixed;

bga:s

background-attachment:scroll;

bgp

background-position:0 0;

bgpx

background-position-x:;

bgpy

background-position-y:;

bgbk

background-break:;

bgbk:bb

background-break:bounding-box;

bgbk:eb

background-break:each-box;

bgbk:c

background-break:continuous;

bgcp

background-clip:padding-box;

bgcp:bb

background-clip:border-box;

bgcp:pb

background-clip:padding-box;

bgcp:cb

background-clip:content-box;

bgcp:nc

background-clip:no-clip;

bgo

background-origin:;

bgo:pb

background-origin:padding-box;

bgo:bb

background-origin:border-box;

bgo:cb

background-origin:content-box;

bgsz

background-size:;

bgsz:a

background-size:auto;

bgsz:ct

background-size:contain;

bgsz:cv

background-size:cover;

Color

c

color:#000;

c:r

color:rgb(0, 0, 0);

c:ra

color:rgba(0, 0, 0, .5);

op

opacity:;

Generated content

cnt

content:'';

cnt:n, ct:n

content:normal;

cnt:oq, ct:oq

content:open-quote;

cnt:noq, ct:noq

content:no-open-quote;

cnt:cq, ct:cq

content:close-quote;

cnt:ncq, ct:ncq

content:no-close-quote;

cnt:a, ct:a

content:attr();

cnt:c, ct:c

content:counter();

cnt:cs, ct:cs

content:counters();

ct

content:;

q

quotes:;

q:n

quotes:none;

q:ru

quotes:'\00AB' '\00BB' '\201E' '\201C';

q:en

quotes:'\201C' '\201D' '\2018' '\2019';

coi

counter-increment:;

cor

counter-reset:;

Outline

ol

outline:;

ol:n

outline:none;

olo

outline-offset:;

olw

outline-width:;

olw:tn

outline-width:thin;

olw:m

outline-width:medium;

olw:tc

outline-width:thick;

ols

outline-style:;

ols:n

outline-style:none;

ols:dt

outline-style:dotted;

ols:ds

outline-style:dashed;

ols:s

outline-style:solid;

ols:db

outline-style:double;

ols:g

outline-style:groove;

ols:r

outline-style:ridge;

ols:i

outline-style:inset;

ols:o

outline-style:outset;

olc

outline-color:#000;

olc:i

outline-color:invert;

Tables

tbl

table-layout:;

tbl:a

table-layout:auto;

tbl:f

table-layout:fixed;

cps

caption-side:;

cps:t

caption-side:top;

cps:b

caption-side:bottom;

ec

empty-cells:;

ec:s

empty-cells:show;

ec:h

empty-cells:hide;

Border

bd

border:;

bd+

border:1px solid #000;

bd:n

border:none;

bdbk

border-break:close;

bdbk:c

border-break:close;

bdcl

border-collapse:;

bdcl:c

border-collapse:collapse;

bdcl:s

border-collapse:separate;

bdc

border-color:#000;

bdc:t

border-color:transparent;

bdi

border-image:url();

bdi:n

border-image:none;

bdti

border-top-image:url();

bdti:n

border-top-image:none;

bdri

border-right-image:url();

bdri:n

border-right-image:none;

bdbi

border-bottom-image:url();

bdbi:n

border-bottom-image:none;

bdli

border-left-image:url();

bdli:n

border-left-image:none;

bdci

border-corner-image:url();

bdci:n

border-corner-image:none;

bdci:c

border-corner-image:continue;

bdtli

border-top-left-image:url();

bdtli:n

border-top-left-image:none;

bdtli:c

border-top-left-image:continue;

bdtri

border-top-right-image:url();

bdtri:n

border-top-right-image:none;

bdtri:c

border-top-right-image:continue;

bdbri

border-bottom-right-image:url();

bdbri:n

border-bottom-right-image:none;

bdbri:c

border-bottom-right-image:continue;

bdbli

border-bottom-left-image:url();

bdbli:n

border-bottom-left-image:none;

bdbli:c

border-bottom-left-image:continue;

bdf

border-fit:repeat;

bdf:c

border-fit:clip;

bdf:r

border-fit:repeat;

bdf:sc

border-fit:scale;

bdf:st

border-fit:stretch;

bdf:ow

border-fit:overwrite;

bdf:of

border-fit:overflow;

bdf:sp

border-fit:space;

bdlen

border-length:;

bdlen:a

border-length:auto;

bdsp

border-spacing:;

bds

border-style:;

bds:n

border-style:none;

bds:h

border-style:hidden;

bds:dt

border-style:dotted;

bds:ds

border-style:dashed;

bds:s

border-style:solid;

bds:db

border-style:double;

bds:dtds

border-style:dot-dash;

bds:dtdtds

border-style:dot-dot-dash;

bds:w

border-style:wave;

bds:g

border-style:groove;

bds:r

border-style:ridge;

bds:i

border-style:inset;

bds:o

border-style:outset;

bdw

border-width:;

bdt, bt

border-top:;

bdt+

border-top:1px solid #000;

bdt:n

border-top:none;

bdtw

border-top-width:;

bdts

border-top-style:;

bdts:n

border-top-style:none;

bdtc

border-top-color:#000;

bdtc:t

border-top-color:transparent;

bdr, br

border-right:;

bdr+

border-right:1px solid #000;

bdr:n

border-right:none;

bdrw

border-right-width:;

bdrst

border-right-style:;

bdrst:n

border-right-style:none;

bdrc

border-right-color:#000;

bdrc:t

border-right-color:transparent;

bdb, bb

border-bottom:;

bdb+

border-bottom:1px solid #000;

bdb:n

border-bottom:none;

bdbw

border-bottom-width:;

bdbs

border-bottom-style:;

bdbs:n

border-bottom-style:none;

bdbc

border-bottom-color:#000;

bdbc:t

border-bottom-color:transparent;

bdl, bl

border-left:;

bdl+

border-left:1px solid #000;

bdl:n

border-left:none;

bdlw

border-left-width:;

bdls

border-left-style:;

bdls:n

border-left-style:none;

bdlc

border-left-color:#000;

bdlc:t

border-left-color:transparent;

bdrs

border-radius:;

bdtrrs

border-top-right-radius:;

bdtlrs

border-top-left-radius:;

bdbrrs

border-bottom-right-radius:;

bdblrs

border-bottom-left-radius:;

Lists

lis

list-style:;

lis:n

list-style:none;

lisp

list-style-position:;

lisp:i

list-style-position:inside;

lisp:o

list-style-position:outside;

list

list-style-type:;

list:n

list-style-type:none;

list:d

list-style-type:disc;

list:c

list-style-type:circle;

list:s

list-style-type:square;

list:dc

list-style-type:decimal;

list:dclz

list-style-type:decimal-leading-zero;

list:lr

list-style-type:lower-roman;

list:ur

list-style-type:upper-roman;

lisi

list-style-image:;

lisi:n

list-style-image:none;

Print

pgbb

page-break-before:;

pgbb:au

page-break-before:auto;

pgbb:al

page-break-before:always;

pgbb:l

page-break-before:left;

pgbb:r

page-break-before:right;

pgbi

page-break-inside:;

pgbi:au

page-break-inside:auto;

pgbi:av

page-break-inside:avoid;

pgba

page-break-after:;

pgba:au

page-break-after:auto;

pgba:al

page-break-after:always;

pgba:l

page-break-after:left;

pgba:r

page-break-after:right;

orp

orphans:;

wid

widows:;

Others

!

!important

@f

@font-face {
    font-family:;
    src:url(|);
}

@f+

@font-face {
    font-family: 'FontName';
    src: url('FileName.eot');
    src: url('FileName.eot?#iefix') format('embedded-opentype'),
         url('FileName.woff') format('woff'),
         url('FileName.ttf') format('truetype'),
         url('FileName.svg#FontName') format('svg');
    font-style: normal;
    font-weight: normal;
}

@i, @import

@import url();

@kf

@-webkit-keyframes identifier {
    from {  }
    to {  }
}
@-o-keyframes identifier {
    from {  }
    to {  }
}
@-moz-keyframes identifier {
    from {  }
    to {  }
}
@keyframes identifier {
    from {  }
    to {  }
}

@m, @media

@media screen {
    
}

ac

align-content: ;

ac:c

align-content:center;

ac:fe

align-content:flex-end;

ac:fs

align-content:flex-start;

ac:s

align-content:stretch;

ac:sa

align-content:space-around;

ac:sb

align-content:space-between;

ai

align-items:;

ai:b

align-items:baseline;

ai:c

align-items:center;

ai:fe

align-items:flex-end;

ai:fs

align-items:flex-start;

ai:s

align-items:stretch;

anim

animation:;

anim-

animation:name duration timing-function delay iteration-count 
direction fill-mode;

animdel

animation-delay:time;

animdir

animation-direction:normal;

animdir:a

animation-direction:alternate;

animdir:ar

animation-direction:alternate-reverse;

animdir:n

animation-direction:normal;

animdir:r

animation-direction:reverse;

animdur

animation-duration:0s;

animfm

animation-fill-mode:both;

animfm:b

animation-fill-mode:backwards;

animfm:bt, animfm:bh

animation-fill-mode:both;

animfm:f

animation-fill-mode:forwards;

animic

animation-iteration-count:1;

animic:i

animation-iteration-count:infinite;

animn

animation-name:none;

animps

animation-play-state:running;

animps:p

animation-play-state:paused;

animps:r

animation-play-state:running;

animtf

animation-timing-function:linear;

animtf:cb

animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);

animtf:e

animation-timing-function:ease;

animtf:ei

animation-timing-function:ease-in;

animtf:eio

animation-timing-function:ease-in-out;

animtf:eo

animation-timing-function:ease-out;

animtf:l

animation-timing-function:linear;

ap

appearance:${none};

as

align-self:;

as:a

align-self:auto;

as:b

align-self:baseline;

as:c

align-self:center;

as:fe

align-self:flex-end;

as:fs

align-self:flex-start;

as:s

align-self:stretch;

bfv

backface-visibility:;

bfv:h

backface-visibility:hidden;

bfv:v

backface-visibility:visible;

bg:ie

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');

cm

/* ${child} */

colm

columns:;

colmc

column-count:;

colmf

column-fill:;

colmg

column-gap:;

colmr

column-rule:;

colmrc

column-rule-color:;

colmrs

column-rule-style:;

colmrw

column-rule-width:;

colms

column-span:;

colmw

column-width:;

d:ib+

display: inline-block;
*display: inline;
*zoom: 1;

fx

flex:;

fxb

flex-basis:;

fxd

flex-direction:;

fxd:c

flex-direction:column;

fxd:cr

flex-direction:column-reverse;

fxd:r

flex-direction:row;

fxd:rr

flex-direction:row-reverse;

fxf

flex-flow:;

fxg

flex-grow:;

fxsh

flex-shrink:;

fxw

flex-wrap: ;

fxw:n

flex-wrap:nowrap;

fxw:w

flex-wrap:wrap;

fxw:wr

flex-wrap:wrap-reverse;

jc

justify-content:;

jc:c

justify-content:center;

jc:fe

justify-content:flex-end;

jc:fs

justify-content:flex-start;

jc:sa

justify-content:space-around;

jc:sb

justify-content:space-between;

mar

max-resolution:res;

mir

min-resolution:res;

op+

opacity: ; filter: alpha(opacity=);

op:ie

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);

op:ms

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';

ord

order:;

ori

orientation:;

ori:l

orientation:landscape;

ori:p

orientation:portrait;

tov

text-overflow:${ellipsis};

tov:c

text-overflow:clip;

tov:e

text-overflow:ellipsis;

trf

transform:;

trf:r

transform: rotate(angle);

trf:rx

transform: rotateX(angle);

trf:ry

transform: rotateY(angle);

trf:rz

transform: rotateZ(angle);

trf:sc

transform: scale(x, y);

trf:sc3

transform: scale3d(x, y, z);

trf:scx

transform: scaleX(x);

trf:scy

transform: scaleY(y);

trf:scz

transform: scaleZ(z);

trf:skx

transform: skewX(angle);

trf:sky

transform: skewY(angle);

trf:t

transform: translate(x, y);

trf:t3

transform: translate3d(tx, ty, tz);

trf:tx

transform: translateX(x);

trf:ty

transform: translateY(y);

trf:tz

transform: translateZ(z);

trfo

transform-origin:;

trfs

transform-style:preserve-3d;

trs

transition:prop time;

trsde

transition-delay:time;

trsdu

transition-duration:time;

trsp

transition-property:prop;

trstf

transition-timing-function:tfunc;

us

user-select:${none};

wfsm

-webkit-font-smoothing:${antialiased};

wfsm:a

-webkit-font-smoothing:antialiased;

wfsm:n

-webkit-font-smoothing:none;

wfsm:s, wfsm:sa

-webkit-font-smoothing:subpixel-antialiased;

wm

writing-mode:lr-tb;

wm:btl

writing-mode:bt-lr;

wm:btr

writing-mode:bt-rl;

wm:lrb

writing-mode:lr-bt;

wm:lrt

writing-mode:lr-tb;

wm:rlb

writing-mode:rl-bt;

wm:rlt

writing-mode:rl-tb;

wm:tbl

writing-mode:tb-lr;

wm:tbr

writing-mode:tb-rl;

XSL

tmatch, tm

<xsl:template match="" mode=""></xsl:template>

tname, tn

<xsl:template name=""></xsl:template>

call

<xsl:call-template name="" />

ap

<xsl:apply-templates select="" mode="" />

api

<xsl:apply-imports />

imp

<xsl:import href="" />

inc

<xsl:include href="" />

ch

<xsl:choose></xsl:choose>

xsl:when, wh

<xsl:when test=""></xsl:when>

ot

<xsl:otherwise></xsl:otherwise>

if

<xsl:if test=""></xsl:if>

par

<xsl:param name=""></xsl:param>

pare

<xsl:param name="" select="" />

var

<xsl:variable name=""></xsl:variable>

vare

<xsl:variable name="" select="" />

wp

<xsl:with-param name="" select="" />

key

<xsl:key name="" match="" use="" />

elem

<xsl:element name=""></xsl:element>

attr

<xsl:attribute name=""></xsl:attribute>

attrs

<xsl:attribute-set name=""></xsl:attribute-set>

cp

<xsl:copy select="" />

co

<xsl:copy-of select="" />

val

<xsl:value-of select="" />

each, for

<xsl:for-each select=""></xsl:for-each>

tex

<xsl:text></xsl:text>

com

<xsl:comment></xsl:comment>

msg

<xsl:message terminate="no"></xsl:message>

fall

<xsl:fallback></xsl:fallback>

num

<xsl:number value="" />

nam

<namespace-alias stylesheet-prefix="" result-prefix="" />

pres

<xsl:preserve-space elements="" />

strip

<xsl:strip-space elements="" />

proc

<xsl:processing-instruction name=""></xsl:processing-instruction>

sort

<xsl:sort select="" order="" />

choose+
Alias of xsl:choose>xsl:when+xsl:otherwise

<xsl:choose>
    <xsl:when test=""></xsl:when>
    <xsl:otherwise></xsl:otherwise>
</xsl:choose>

xsl
Alias of !!!+xsl:stylesheet[version=1.0
xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{
|}

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>

!!!

<?xml version="1.0" encoding="UTF-8"?>

nme.kr

목차

문서 도구

사이트 도구

사용자 도구

왼쪽 메뉴 편집

Plugin 관리
테마 디자인

목차

Emmet

Syntax

Child: >

Sibling: +

Climb-up: ^

Grouping: ()

Multiplication: *

Item numbering: $

ID and CLASS attributes

Custom attributes

Text: {}

Implicit tag names

HTML

CSS

Visual Formatting

Margin & Padding

Box Sizing

Font

Text

Background

Color

Generated content

Outline

Tables

Border

Lists

Print

Others

XSL

nme.kr

목차

문서 도구

사이트 도구

사용자 도구

왼쪽 메뉴 편집 Plugin 관리 테마 디자인

목차

Emmet

Syntax

Child: >

Sibling: +

Climb-up: ^

Grouping: ()

Multiplication: *

Item numbering: $

ID and CLASS attributes

Custom attributes

Text: {}

Implicit tag names

HTML

CSS

Visual Formatting

Margin & Padding

Box Sizing

Font

Text

Background

Color

Generated content

Outline

Tables

Border

Lists

Print

Others

XSL

왼쪽 메뉴 편집

Plugin 관리
테마 디자인