[201231] emmet 사용법 2. CSS 약어(CSS Abbreviations)

web

[201231] emmet 사용법 2. CSS 약어(CSS Abbreviations)

hjk927 2020. 12. 31. 10:53

2. CSS Abbreviations

docs.emmet.io/css-abbreviations/ 를 참고해서 글을 작성하였다. 열심히 공부해보려고 했지만 이해가 잘 되지 않은 부분이 많기 때문에, 이 글을 참고하시려는 분들께는 위 docs 링크를 함께 봐주신다면 좋을 것 같습니다.

Emmet은 기본적으로 css에 대해 단축 속성을 지정할 수 있게 해준다. 여기에 snippet이나 autocomplete 기능을 사용해서 더 강력하게 emmet을 사용할 수 있다는 듯 하다. 솔직히 잘 모르겠다…

css 구문에 대해서, Emmet은 많은 snippet과 property를 미리 정의해두고 있다. 예를 들어서, m을 입력하고 tab을 누르면 margin: ; 스니펫을 얻을 수 있다.

ex)

h1{
      /* + 연산자를 사용해서 m+m10+m10-20+m-10--20 로 작성해도 같은 결과 */
      /* 가독성을 위해 들여쓰기 하였습니다. */
      m
      m10
      m10-20
      m-10--20
    }

h1{
    margin: ;
    margin: 10px;
    margin: 10px 20px;
    margin: -10px -20px;
}

여기서 스니펫이란? 프로그램이나 웹 페이지의 코드에 삽입할 수 있는 텍스트 또는 소스 코드의 일부분을 말한다. 약어의 형태로 스니펫을 저장해두고 필요할 때마다 사용하면서, 반복 작업을 피할 수 있다. !를 작성하고 tab을 눌렀을 때 html의 기본 틀이 자동완성 되는 것을 생각하면 쉬을 것 같다.

- 단위

Emmet에서 제공하는 value 값의 단위는 다음과 같이 적용된다.

기본적인 정수 값 → px
float 값 → em
p → %
e → em
x → ex

값 뒤에 바로 알파벳 문자를 붙여서 단위 이름을 명시적으로 제공할 수 있다. 단위를 명시적으로 제공할 경우에는, 값을 구분하기 위해서 하이픈(-)을 붙일 필요가 없다.

ex1)

.test-class{
      w80
      w8.0
      w80px
      w80x
      w80p
      m80px100px
      m10p30e5x
    }

.test-class{
      width: 80px;
      width: 8.0em;
      width: 80px;
      width: 80ex;
      width: 80%;
      margin: 80px 100px;
      margin: 10% 30em 5ex;  
    }

물론, line-height나 font-weight 같은 단위가 필요없는 속성은 단위가 출력되지 않도록 설정되어 있다.

ex2)

.test-class{
      lh2
      fw300
    }

.test-class{
      line-height: 2;
      font-weight: 300;
    }

- 색상 값

'c#색상코드'의 형태로 정의한다. 1자리, 2자리, 3자리, 6자리 수로 색상 값을 지정할 수 있다. 예제를 보면 빠르게 이해할 수 있을 것이다.

ex)

.test-class{
      c#3
      c#a3
      c#abc
      c#132f41
    }

.test-class{
      color: #333;
      color: #a3a3a3;
      color: #abc;
      color: #132f41;
    }

- important

css 약어 끝에 '!'를 붙여서, 해당 속성을 important 값으로 설정할 수 있다.

ex)

.test-class{
      p!
      m10e!
    }

.test-class{
      padding:  !important;
      margin: 10em !important;
    }

2.1. Vendor Prefixes

여기서 Vendor Prefixes(밴더 프리픽스) 란, 웹 브라우저의 공급자가 새로운 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해서 사용하는 접두사(prefix)를 의미한다.

css3는 더 적은 라인의 코드로 많은 일을 할 수 있게 해준다. 하지만, 각각의 브라우저에 맞춰서 속성을 코딩해야하는 문제점이 발생한다. Emmet에서는 css 속성이나 그 약어에 하이픈(-)을 함께 사용했을 때, 자동으로 그 속성에 대한 밴더 프리픽스 코드를 생성해준다.

ex)

.test-class{
      -bsdr
    }

.test-class{
      -webkit-border-right: ;
      -moz-border-right: ;
      -ms-border-right: ;
      -o-border-right: ;
      border-right: ;
    }

그리고, 사용 시 커서가 다음처럼 모든 값을 한 번에 초기화 할 수 있도록 표시됨을 알 수 있다.

사용자가 원하는 밴더 프리픽스 속성만 지정할 수도 있다.

w: webkit
m: moz
s: ms
o: o

ex2)

.test-class{
      -wm-trf
    }

.test-class{
      -webkit-transform: ;
      -moz-transform: ;
      transform: ;
    }

2.2. Gradients

css3의 gradient 기능에 대해서, 브라우저당 다른 밴더 프리픽스를 gradient에서 적용해야 하는 불편함을 Emmet으로 대신할 수 있게 되었다. 일반적인 gradient 정의를 lg( ... ) 혹은 liner-gradient( ... )로 작성한뒤 tab 키를 누르면 밴더 프리픽스 값을 적용할 수 있다.

ex)

.test-class{
      lg(left, #feb 30%, red )
    }

.test-class{
      background-image: -webkit-linear-gradient(left, #feb 30%, red);
      background-image: -o-linear-gradient(left, #feb 30%, red);
      background-image: linear-gradient(to right, #feb 30%, red);
    }

2.3. Fuzzy search

위에서 알아봤듯이, Emmet은 매우 많은 스니펫을 제공한다. 다 외워서 사용할 수 없을 정도다. 이를 위해서, Emmet은 사용자가 입력한 스니펫과 유사한 스니펫을 찾아주는 퍼지 로직을 제공한다. 예를 들어서, overflow: hidden; 을 ovh라고 작성하는 대신, ovfh나, oh로 작성해도 동일한 결과가 나오도록 하였다는 것이다. 실습 결과는 아래와 같다.

ex)

.test-class{
      ovfh
      oh
      pl4
      fs2
      fsize0.7
      fst2
    }

.test-class{
      overflow: hidden;
      overflow: hidden;
      padding-left: 4px;
      font-style: 2px;
      font-size: 0.7em;
      font-stretch: 2px;
    }

fuzzy search가 미리 정의된 스니펫 이름에 대해서 수행되기 때문에, 더욱 정확한 예측값을 제공한다고 한다.

참고

docs.emmet.io/css-abbreviations/

developer.mozilla.org/ko/docs/Web/CSS/Shorthand_properties

www.tcpschool.com/css/css3_module_vendorPrefix

techterms.com/definition/snippet

musma.github.io/2019/08/12/vscode-code-snippets.html