본문으로 바로가기

Emmet(zen-coding) cheat sheet(에밋 단축어 모음)

category Dev Environment/개발 기타 자료 2016. 5. 17. 15:36

Emmet cheat sheet(단축어) 정리

에밋은 젠코딩(zencoding)의 업그레이드 버전으로 마크업 및 css 코드 자동완성을 지원해주는 플러그인입니다.

사용법은 따로 설명하지 않고 에밋에서 사용하는 유용하고 많이 사용하는 마크업 & CSS 단축어를 정리해 보겠습니다.




HTML & CSS Cheat Sheet for Emmet

자주 사용하긴 하지만 잊어버리기 쉬운 것들을 위주로 정리해 보고 유추할 만한 단축어들은 생략하도록 하겠습니다.

마크업 단축어외의 단축어인 css에 관련된 cheat sheet는 css 파일에서 사용가능합니다.


 html:xt

<!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

위와 같은 타입으로 xhtml strict mode 가 정의됩니다.

 html:5

html5 doctype 이 정의됩니다. 

 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"> 

 meta:utf

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

 meta:compat 

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

 script:src

<script src=""></script> 

 a:link

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

 a:mail 

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

 iframe, ifr

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

 map+ 

<map name=""> 

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

</map>

 form:get

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

 form:post

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

 fset

<fieldset></fieldset> 

 leg

<legend></legend> 

 input:h

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

 input:t 

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

 input:email

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

 input:p 

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

 input:c 

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

 input:r 

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

 input:f 

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

 input:s 

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

 input:i

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

 input:b 

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

 select+

<select name="" id="">

    <option value=""></option>

</select>

 cc:ie

<!--[if IE]>

<![endif]-->

 cc:noie 

<!--[if !IE]><!-->

<!--<![endif]-->

 @i (css 파일에서 사용)

 @import url();

 @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;

}

 @m 

@media screen { }

 d:n

display: none; 

 d:ib

display: inline-block 

 d:i 

display: inline; 

 v:h

visibility: hidden; 

 ov:h 

overflow: hidden; 

 ovx:s

overflow-x: scroll 

 @kf

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

}

@-moz-keyframes identifier {

from {  }

to {  }

}

@keyframes identifier {

from {  }

to {  }

}

 anim-

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

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

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

 bg:ie 

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

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

 bxz

-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 

 bxs

-webkit-box-shadow: inset hoff voff blur color;
-moz-box-shadow: inset hoff voff blur color;
box-shadow: inset hoff voff blur color; 

 bxs:r

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

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

 bxs:ra

-webkit-box-shadow: inset hoff voff blur spread rgba(0, 0, 0, .5); 

-moz-box-shadow: inset hoff voff blur spread rgba(0, 0, 0, .5); 

box-shadow: inset hoff voff blur spread rgba(0, 0, 0, .5);

 bdrs

-webkit-border-radius: ;
-moz-border-radius: ;
border-radius: ; 

  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  















저작자표시 변경금지

'Dev Environment > 개발 기타 자료' 카테고리의 다른 글

프레임워크와 라이브러리의 차이점  (25) 2016.07.07
Mobile Gesture(모바일 제스처) 알아보기  (6) 2016.06.16
모바일 접근성 - Mobile accessibility  (0) 2016.05.11
Web Accessibility(웹 접근성)  (0) 2016.04.28
Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법  (1) 2016.03.21
댓글 , 엮인글
Web Club
블로그 이미지 jaiyah 님의 블로그
MENU
CATEGORY
VISITOR 오늘 / 전체

티스토리툴바