nme.kr

추적: › emmet
현재 위치: index » keyboard » emmet

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
keyboard:emmet [2023/07/18 17:26]
clayeryan@gmail.com [Print] 		keyboard:emmet [2025/06/27 16:00] (현재)
줄 3: 줄 3:
 [[https://docs.emmet.io/]] [[https://docs.emmet.io/]]
  
 +**VSCode, Bracket, Notepad+ 와 같은 프로그램에서 HTML, CSS 코딩에 반복되는 코드 입력을 손쉽게 해주는 확장기능이다.**
 +
 +VSCode는 추가기능 설치가 필요없이 기본적으로 Emmet을 지원하며, 입력 후에 <key>Tab</key>을 누르면 된다.
 ===== Syntax ===== ===== Syntax =====
  
줄 322: 줄 325:
  
 >hr >hr
-  +
 <code java> <code java>
   <hr />   <hr />
줄 3881: 줄 3884:
 ==== Others ==== ==== Others ====
  
-!+>! 
 +<code java>
 !important !important
-@f+</code> 
 + 
 +>@f 
 +<code java>
 @font-face { @font-face {
     font-family:;     font-family:;
     src:url(|);     src:url(|);
 } }
-@f++</code> 
 + 
 +>@f+ 
 +<code java>
 @font-face { @font-face {
     font-family: 'FontName';     font-family: 'FontName';
줄 3899: 줄 3909:
     font-weight: normal;     font-weight: normal;
 } }
-@i, @import+</code> 
 + 
 +>@i, @import 
 +<code java>
 @import url(); @import url();
-@kf+</code> 
 + 
 +>@kf 
 +<code java>
 @-webkit-keyframes identifier { @-webkit-keyframes identifier {
     from {  }     from {  }
줄 3918: 줄 3934:
     to {  }     to {  }
 } }
-@m, @media+</code> 
 + 
 +>@m, @media 
 +<code java>
 @media screen { @media screen {
          
 } }
-ac +</code> 
-align-content:; + 
-ac:c+>ac 
 +<code java> 
 +align-content: ; 
 +</code> 
 + 
 +>ac:c 
 +<code java>
 align-content:center; align-content:center;
-ac:fe+</code> 
 + 
 +>ac:fe 
 +<code java>
 align-content:flex-end; align-content:flex-end;
-ac:fs+</code> 
 + 
 +>ac:fs 
 +<code java>
 align-content:flex-start; align-content:flex-start;
-ac:s+</code> 
 + 
 +>ac:s 
 +<code java>
 align-content:stretch; align-content:stretch;
-ac:sa+</code> 
 + 
 +>ac:sa 
 +<code java>
 align-content:space-around; align-content:space-around;
-ac:sb+</code> 
 + 
 +>ac:sb 
 +<code java>
 align-content:space-between; align-content:space-between;
-ai+</code> 
 + 
 +>ai 
 +<code java>
 align-items:; align-items:;
-ai:b+</code> 
 + 
 +>ai:b 
 +<code java>
 align-items:baseline; align-items:baseline;
-ai:c+</code> 
 + 
 +>ai:c 
 +<code java>
 align-items:center; align-items:center;
-ai:fe+</code> 
 + 
 +>ai:fe 
 +<code java>
 align-items:flex-end; align-items:flex-end;
-ai:fs+</code> 
 + 
 +>ai:fs 
 +<code java>
 align-items:flex-start; align-items:flex-start;
-ai:s+</code> 
 + 
 +>ai:s 
 +<code java>
 align-items:stretch; align-items:stretch;
-anim+</code> 
 + 
 +>anim 
 +<code java>
 animation:; animation:;
-anim- +</code> 
-animation:name duration timing-function delay iteration-count direction fill-mode; + 
-animdel+>anim- 
 +<code java> 
 +animation:name duration timing-function delay iteration-count  
 +direction fill-mode; 
 +</code> 
 + 
 +>animdel 
 +<code java>
 animation-delay:time; animation-delay:time;
-animdir+</code> 
 + 
 +>animdir 
 +<code java>
 animation-direction:normal; animation-direction:normal;
-animdir:a+</code> 
 + 
 +>animdir:a 
 +<code java>
 animation-direction:alternate; animation-direction:alternate;
-animdir:ar+</code> 
 + 
 +>animdir:ar 
 +<code java>
 animation-direction:alternate-reverse; animation-direction:alternate-reverse;
-animdir:n+</code> 
 + 
 +>animdir:n 
 +<code java>
 animation-direction:normal; animation-direction:normal;
-animdir:r+</code> 
 + 
 +>animdir:r 
 +<code java>
 animation-direction:reverse; animation-direction:reverse;
-animdur+</code> 
 + 
 +>animdur 
 +<code java>
 animation-duration:0s; animation-duration:0s;
-animfm+</code> 
 + 
 +>animfm 
 +<code java>
 animation-fill-mode:both; animation-fill-mode:both;
-animfm:b+</code> 
 + 
 +>animfm:b 
 +<code java>
 animation-fill-mode:backwards; animation-fill-mode:backwards;
-animfm:bt, animfm:bh+</code> 
 + 
 +>animfm:bt, animfm:bh 
 +<code java>
 animation-fill-mode:both; animation-fill-mode:both;
-animfm:f+</code> 
 + 
 +>animfm:f 
 +<code java>
 animation-fill-mode:forwards; animation-fill-mode:forwards;
-animic+</code> 
 + 
 +>animic 
 +<code java>
 animation-iteration-count:1; animation-iteration-count:1;
-animic:i+</code> 
 + 
 +>animic:i 
 +<code java>
 animation-iteration-count:infinite; animation-iteration-count:infinite;
-animn+</code> 
 + 
 +>animn 
 +<code java>
 animation-name:none; animation-name:none;
-animps+</code> 
 + 
 +>animps 
 +<code java>
 animation-play-state:running; animation-play-state:running;
-animps:p+</code> 
 + 
 +>animps:p 
 +<code java>
 animation-play-state:paused; animation-play-state:paused;
-animps:r+</code> 
 + 
 +>animps:r 
 +<code java>
 animation-play-state:running; animation-play-state:running;
-animtf+</code> 
 + 
 +>animtf 
 +<code java>
 animation-timing-function:linear; animation-timing-function:linear;
-animtf:cb+</code> 
 + 
 +>animtf:cb 
 +<code java>
 animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1); animation-timing-function:cubic-bezier(0.1, 0.7, 1.0, 0.1);
-animtf:e+</code> 
 + 
 +>animtf:e 
 +<code java>
 animation-timing-function:ease; animation-timing-function:ease;
-animtf:ei+</code> 
 + 
 +>animtf:ei 
 +<code java>
 animation-timing-function:ease-in; animation-timing-function:ease-in;
-animtf:eio+</code> 
 + 
 +>animtf:eio 
 +<code java>
 animation-timing-function:ease-in-out; animation-timing-function:ease-in-out;
-animtf:eo+</code> 
 + 
 +>animtf:eo 
 +<code java>
 animation-timing-function:ease-out; animation-timing-function:ease-out;
-animtf:l+</code> 
 + 
 +>animtf:l 
 +<code java>
 animation-timing-function:linear; animation-timing-function:linear;
-ap+</code> 
 + 
 +>ap 
 +<code java>
 appearance:${none}; appearance:${none};
-as+</code> 
 + 
 +>as 
 +<code java>
 align-self:; align-self:;
-as:a+</code> 
 + 
 +>as:a 
 +<code java>
 align-self:auto; align-self:auto;
-as:b+</code> 
 + 
 +>as:b 
 +<code java>
 align-self:baseline; align-self:baseline;
-as:c+</code> 
 + 
 +>as:c 
 +<code java>
 align-self:center; align-self:center;
-as:fe+</code> 
 + 
 +>as:fe 
 +<code java>
 align-self:flex-end; align-self:flex-end;
-as:fs+</code> 
 + 
 +>as:fs 
 +<code java>
 align-self:flex-start; align-self:flex-start;
-as:s+</code> 
 + 
 +>as:s 
 +<code java>
 align-self:stretch; align-self:stretch;
-bfv+</code> 
 + 
 +>bfv 
 +<code java>
 backface-visibility:; backface-visibility:;
-bfv:h+</code> 
 + 
 +>bfv:h 
 +<code java>
 backface-visibility:hidden; backface-visibility:hidden;
-bfv:v+</code> 
 + 
 +>bfv:v 
 +<code java>
 backface-visibility:visible; backface-visibility:visible;
-bg:ie+</code> 
 + 
 +>bg:ie 
 +<code java>
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop'); filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='x.png',sizingMethod='crop');
-cm+</code> 
 + 
 +>cm 
 +<code java>
 /* ${child} */ /* ${child} */
-colm+</code> 
 + 
 +>colm 
 +<code java>
 columns:; columns:;
-colmc+</code> 
 + 
 +>colmc 
 +<code java>
 column-count:; column-count:;
-colmf+</code> 
 + 
 +>colmf 
 +<code java>
 column-fill:; column-fill:;
-colmg+</code> 
 + 
 +>colmg 
 +<code java>
 column-gap:; column-gap:;
-colmr+</code> 
 + 
 +>colmr 
 +<code java>
 column-rule:; column-rule:;
-colmrc+</code> 
 + 
 +>colmrc 
 +<code java>
 column-rule-color:; column-rule-color:;
-colmrs+</code> 
 + 
 +>colmrs 
 +<code java>
 column-rule-style:; column-rule-style:;
-colmrw+</code> 
 + 
 +>colmrw 
 +<code java>
 column-rule-width:; column-rule-width:;
-colms+</code> 
 + 
 +>colms 
 +<code java>
 column-span:; column-span:;
-colmw+</code> 
 + 
 +>colmw 
 +<code java>
 column-width:; column-width:;
-d:ib++</code> 
 + 
 +>d:ib+ 
 +<code java>
 display: inline-block; display: inline-block;
 *display: inline; *display: inline;
 *zoom: 1; *zoom: 1;
-fx+</code> 
 + 
 +>fx 
 +<code java>
 flex:; flex:;
-fxb+</code> 
 + 
 +>fxb 
 +<code java>
 flex-basis:; flex-basis:;
-fxd+ 
 +</code> 
 +>fxd 
 +<code java>
 flex-direction:; flex-direction:;
-fxd:c+</code> 
 + 
 +>fxd:c 
 +<code java>
 flex-direction:column; flex-direction:column;
-fxd:cr+</code> 
 + 
 +>fxd:cr 
 +<code java>
 flex-direction:column-reverse; flex-direction:column-reverse;
-fxd:r+</code> 
 + 
 +>fxd:r 
 +<code java>
 flex-direction:row; flex-direction:row;
-fxd:rr+</code> 
 + 
 +>fxd:rr 
 +<code java>
 flex-direction:row-reverse; flex-direction:row-reverse;
-fxf+</code> 
 + 
 +>fxf 
 +<code java>
 flex-flow:; flex-flow:;
-fxg+</code> 
 + 
 +>fxg
 flex-grow:; flex-grow:;
-fxsh+ 
 +>fxsh
 flex-shrink:; flex-shrink:;
-fxw+ 
 +>fxw
 flex-wrap: ; flex-wrap: ;
-fxw:n+ 
 +>fxw:n
 flex-wrap:nowrap; flex-wrap:nowrap;
-fxw:w+ 
 +>fxw:w
 flex-wrap:wrap; flex-wrap:wrap;
-fxw:wr+ 
 +>fxw:wr
 flex-wrap:wrap-reverse; flex-wrap:wrap-reverse;
-jc+ 
 +>jc
 justify-content:; justify-content:;
-jc:c+ 
 +>jc:c
 justify-content:center; justify-content:center;
-jc:fe+ 
 +>jc:fe
 justify-content:flex-end; justify-content:flex-end;
-jc:fs+ 
 +>jc:fs
 justify-content:flex-start; justify-content:flex-start;
-jc:sa+ 
 +>jc:sa
 justify-content:space-around; justify-content:space-around;
-jc:sb+ 
 +>jc:sb
 justify-content:space-between; justify-content:space-between;
-mar+ 
 +>mar
 max-resolution:res; max-resolution:res;
-mir+ 
 +>mir
 min-resolution:res; min-resolution:res;
-op++ 
 +>op+
 opacity: ; opacity: ;
 filter: alpha(opacity=); filter: alpha(opacity=);
-op:ie+ 
 +>op:ie
 filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-op:ms+ 
 +>op:ms
 -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; -ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)';
-ord+ 
 +>ord
 order:; order:;
-ori+ 
 +>ori
 orientation:; orientation:;
-ori:l+ 
 +>ori:l
 orientation:landscape; orientation:landscape;
-ori:p+ 
 +>ori:p
 orientation:portrait; orientation:portrait;
-tov+ 
 +>tov
 text-overflow:${ellipsis}; text-overflow:${ellipsis};
-tov:c+ 
 +>tov:c
 text-overflow:clip; text-overflow:clip;
-tov:e+ 
 +>tov:e
 text-overflow:ellipsis; text-overflow:ellipsis;
-trf+ 
 +>trf
 transform:; transform:;
-trf:r+ 
 +>trf:r
 transform: rotate(angle); transform: rotate(angle);
-trf:rx+ 
 +>trf:rx
 transform: rotateX(angle); transform: rotateX(angle);
-trf:ry+ 
 +>trf:ry
 transform: rotateY(angle); transform: rotateY(angle);
-trf:rz+ 
 +>trf:rz
 transform: rotateZ(angle); transform: rotateZ(angle);
-trf:sc+ 
 +>trf:sc
 transform: scale(x, y); transform: scale(x, y);
-trf:sc3+ 
 +>trf:sc3
 transform: scale3d(x, y, z); transform: scale3d(x, y, z);
-trf:scx+ 
 +>trf:scx
 transform: scaleX(x); transform: scaleX(x);
-trf:scy+ 
 +>trf:scy
 transform: scaleY(y); transform: scaleY(y);
-trf:scz+ 
 +>trf:scz
 transform: scaleZ(z); transform: scaleZ(z);
-trf:skx+ 
 +>trf:skx
 transform: skewX(angle); transform: skewX(angle);
-trf:sky+ 
 +>trf:sky
 transform: skewY(angle); transform: skewY(angle);
-trf:t+ 
 +>trf:t
 transform: translate(x, y); transform: translate(x, y);
-trf:t3+ 
 +>trf:t3
 transform: translate3d(tx, ty, tz); transform: translate3d(tx, ty, tz);
-trf:tx+ 
 +>trf:tx
 transform: translateX(x); transform: translateX(x);
-trf:ty+ 
 +>trf:ty
 transform: translateY(y); transform: translateY(y);
-trf:tz+ 
 +>trf:tz
 transform: translateZ(z); transform: translateZ(z);
-trfo+ 
 +>trfo
 transform-origin:; transform-origin:;
-trfs+ 
 +>trfs
 transform-style:preserve-3d; transform-style:preserve-3d;
-trs+ 
 +>trs
 transition:prop time; transition:prop time;
-trsde+ 
 +>trsde
 transition-delay:time; transition-delay:time;
-trsdu+ 
 +>trsdu
 transition-duration:time; transition-duration:time;
-trsp+ 
 +>trsp
 transition-property:prop; transition-property:prop;
-trstf+ 
 +>trstf
 transition-timing-function:tfunc; transition-timing-function:tfunc;
-us+ 
 +>us
 user-select:${none}; user-select:${none};
-wfsm+ 
 +>wfsm
 -webkit-font-smoothing:${antialiased}; -webkit-font-smoothing:${antialiased};
-wfsm:a+ 
 +>wfsm:a
 -webkit-font-smoothing:antialiased; -webkit-font-smoothing:antialiased;
-wfsm:n+ 
 +>wfsm:n
 -webkit-font-smoothing:none; -webkit-font-smoothing:none;
-wfsm:s, wfsm:sa+ 
 +>wfsm:s, wfsm:sa
 -webkit-font-smoothing:subpixel-antialiased; -webkit-font-smoothing:subpixel-antialiased;
-wm+ 
 +>wm
 writing-mode:lr-tb; writing-mode:lr-tb;
-wm:btl+ 
 +>wm:btl
 writing-mode:bt-lr; writing-mode:bt-lr;
-wm:btr+ 
 +>wm:btr
 writing-mode:bt-rl; writing-mode:bt-rl;
-wm:lrb+ 
 +>wm:lrb
 writing-mode:lr-bt; writing-mode:lr-bt;
-wm:lrt+ 
 +>wm:lrt
 writing-mode:lr-tb; writing-mode:lr-tb;
-wm:rlb+ 
 +>wm:rlb
 writing-mode:rl-bt; writing-mode:rl-bt;
-wm:rlt+ 
 +>wm:rlt
 writing-mode:rl-tb; writing-mode:rl-tb;
-wm:tbl+ 
 +>wm:tbl
 writing-mode:tb-lr; writing-mode:tb-lr;
-wm:tbr+ 
 +>wm:tbr
 writing-mode:tb-rl; writing-mode:tb-rl;
  
 ===== XSL ===== ===== XSL =====
  
-tmatch, tm+>tmatch, tm 
 +<code java>
 <xsl:template match="" mode=""></xsl:template> <xsl:template match="" mode=""></xsl:template>
-tname, tn+</code> 
 + 
 +>tname, tn 
 + <code java>
 <xsl:template name=""></xsl:template> <xsl:template name=""></xsl:template>
-call+</code> 
 + 
 +>call 
 +<code java>
 <xsl:call-template name="" /> <xsl:call-template name="" />
-ap+</code> 
 +>ap 
 +<code java>
 <xsl:apply-templates select="" mode="" /> <xsl:apply-templates select="" mode="" />
-api+</code> 
 + 
 +>api 
 +<code java>
 <xsl:apply-imports /> <xsl:apply-imports />
-imp+</code> 
 + 
 +>imp 
 +<code java>
 <xsl:import href="" /> <xsl:import href="" />
-inc+</code> 
 + 
 +>inc 
 +<code java>
 <xsl:include href="" /> <xsl:include href="" />
-ch+</code> 
 + 
 +>ch 
 +<code java>
 <xsl:choose></xsl:choose> <xsl:choose></xsl:choose>
-xsl:when, wh+</code> 
 + 
 +>xsl:when, wh 
 +<code java>
 <xsl:when test=""></xsl:when> <xsl:when test=""></xsl:when>
-ot+</code> 
 + 
 +>ot 
 +<code java>
 <xsl:otherwise></xsl:otherwise> <xsl:otherwise></xsl:otherwise>
-if+</code> 
 + 
 +>if 
 +<code java>
 <xsl:if test=""></xsl:if> <xsl:if test=""></xsl:if>
-par+</code> 
 + 
 +>par 
 +<code java>
 <xsl:param name=""></xsl:param> <xsl:param name=""></xsl:param>
-pare+</code> 
 + 
 +>pare 
 +<code java>
 <xsl:param name="" select="" /> <xsl:param name="" select="" />
-var+</code> 
 + 
 +>var 
 +<code java>
 <xsl:variable name=""></xsl:variable> <xsl:variable name=""></xsl:variable>
-vare+</code> 
 + 
 +>vare 
 +<code java>
 <xsl:variable name="" select="" /> <xsl:variable name="" select="" />
-wp+</code> 
 + 
 +>wp 
 +<code java>
 <xsl:with-param name="" select="" /> <xsl:with-param name="" select="" />
-key+</code> 
 + 
 +>key 
 +<code java>
 <xsl:key name="" match="" use="" /> <xsl:key name="" match="" use="" />
-elem+</code> 
 + 
 +>elem 
 +<code java>
 <xsl:element name=""></xsl:element> <xsl:element name=""></xsl:element>
-attr+</code> 
 + 
 +>attr 
 +<code java>
 <xsl:attribute name=""></xsl:attribute> <xsl:attribute name=""></xsl:attribute>
-attrs+</code> 
 + 
 +>attrs 
 +<code java>
 <xsl:attribute-set name=""></xsl:attribute-set> <xsl:attribute-set name=""></xsl:attribute-set>
-cp+</code> 
 + 
 +>cp 
 +<code java>
 <xsl:copy select="" /> <xsl:copy select="" />
-co+</code> 
 + 
 +>co 
 +<code java>
 <xsl:copy-of select="" /> <xsl:copy-of select="" />
-val+</code> 
 + 
 +>val 
 +<code java>
 <xsl:value-of select="" /> <xsl:value-of select="" />
-each, for+</code> 
 + 
 +>each, for 
 +<code java>
 <xsl:for-each select=""></xsl:for-each> <xsl:for-each select=""></xsl:for-each>
-tex+</code> 
 + 
 +>tex 
 +<code java>
 <xsl:text></xsl:text> <xsl:text></xsl:text>
-com+</code> 
 + 
 +>com 
 +<code java>
 <xsl:comment></xsl:comment> <xsl:comment></xsl:comment>
-msg+</code> 
 + 
 +>msg 
 +<code java>
 <xsl:message terminate="no"></xsl:message> <xsl:message terminate="no"></xsl:message>
-fall+</code> 
 + 
 +>fall 
 +<code java>
 <xsl:fallback></xsl:fallback> <xsl:fallback></xsl:fallback>
-num+</code> 
 + 
 +>num 
 +<code java>
 <xsl:number value="" /> <xsl:number value="" />
-nam+</code> 
 + 
 +>nam 
 +<code java>
 <namespace-alias stylesheet-prefix="" result-prefix="" /> <namespace-alias stylesheet-prefix="" result-prefix="" />
-pres+</code> 
 + 
 +>pres 
 +<code java>
 <xsl:preserve-space elements="" /> <xsl:preserve-space elements="" />
-strip+</code> 
 + 
 +>strip 
 +<code java>
 <xsl:strip-space elements="" /> <xsl:strip-space elements="" />
-proc+</code> 
 + 
 +>proc 
 +<code java>
 <xsl:processing-instruction name=""></xsl:processing-instruction> <xsl:processing-instruction name=""></xsl:processing-instruction>
-sort+</code> 
 + 
 +>sort 
 +<code java>
 <xsl:sort select="" order="" /> <xsl:sort select="" order="" />
-choose+ +</code>
-Alias of xsl:choose>xsl:when+xsl:otherwise+
  
 +>choose+
 +>Alias of xsl:choose>xsl:when+xsl:otherwise
 +<code java>
 <xsl:choose> <xsl:choose>
     <xsl:when test=""></xsl:when>     <xsl:when test=""></xsl:when>
     <xsl:otherwise></xsl:otherwise>     <xsl:otherwise></xsl:otherwise>
 </xsl:choose> </xsl:choose>
-xsl +</code>
-Alias of !!!+xsl:stylesheet[version=1.0 xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{ +
-|}+
  
 +>xsl
 +>Alias of !!!+xsl:stylesheet[version=1.0 
 +>xmlns:xsl=http://www.w3.org/1999/XSL/Transform]>{
 +>|}
 +<code java>
 <?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"></xsl:stylesheet>
-!!!+</code> 
 + 
 +>!!! 
 +<code java>
 <?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
 +</code>
마지막으로 수정됨: 2025/06/27 15:58
CC Attribution-Share Alike 4.0 International 별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International