VS코드 에밋(Emmet) 치트 정리

노래방에서 노래 검색할 때 전체 다 타이핑하는 것 보다 자음검색이 더 빠르듯이 태그도 빠른 타이핑법이 있다. 손에 익으면 개발 속도가 굉장히 빨라진다고 한다. 에밋의 기본 사용법을 정리해보고자 한다.
영상만 보고 정리하기엔 무리가 있어 다른 사람의 블로그 또한 참고했다.

1. !를 탭하면 바로 html템플릿이 완성된다.

• ! or html:5 : Basic HTML structure

2. CSS - Layout

• pos or pos:r : position:relative
• pos:a : position:absolute
• pos:f : posiont:fixed
• pos:s : posiotn:static
  
  
• fl : float:left
• fl:n : float:none
• fl:r : float:right
• cl : clear:both
  
  
• dn or d:n : display:none
• db or d:b : display : block
• dib or d:ib : display:inline-block
• di or d:i : display:inline

3. CSS - Font

• fw:n : font-weight: normal;
• fw:b : font-weight:bold;
  
  
• ta of ta:l : text-weight:normal;
• ta:c : text-align:left;
• ta:r : text-align:right;
• ta:j : text-align:justify;
  
  
• td:n : text-decoration:none;
• td:u : text-decoration:underline;
• td:o : text-decoration:overline;
• td:l : text-decoration:line-through;

4. CSS - 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;
• bg:cv : background-size:cover;

5. CSS - Border

• bd+ : border:1px solid #000;
• bd:n : border:none
• bdrs:50 : border-radius:50px;

6. CSS - Marfing, Padding, Box Model

• m:a : margin:auto;
  
  
• bxz : box-sizing : border-box;
  
  
• w:a : width:auto;
• h:a : height:auto;

7. CSS - Min & Max Width, Height

• maw:50 : max-width:50px;
• mah:50 : max-height:50px;
• miw:50 : min-width:50px;
• mih:50 : min-height:50px;

8. CSS - Vertical Align

• va:m : vertical-align:middle
• va:t : vertical-align:top
• va:b : vertical-align:bottom

9. CSS - Other

cur : cursor:pointer;
bg:cv! : background-size:cover!important;
@! or @import : @import url()
@m or @media : @media screen {}