[CSS3] emmet을 통해 효율적으로 CSS를 작성해보자

Emmet?

Emmet이란 editor plugin으로써 단축키를 이용해 HTML, XML, XSL 코딩 속도를 비약적으로 향상시켜주는 툴입니다.

가령 긴 테이블을 코딩할 때, 손으로 입력하는 건 누가봐도 바보같은 짓이고 줄줄이 복사해 붙이는 것도 별반 나을 게 없어 보입니다. 물론 테이블 만드는 툴을 쓰는 게 가장 일반적인 방법이긴 합니다. 근데 언뜻 봐도 같은 태그의 반복임을 알 수 있는데요. 

아래와 같이 자동완성을 해보면 어떨까요? 

table>tr*5>td*5 

table 태그로 열고 그 아래 tr 태그 5개 열고 그 아래 td 태그 5개 열라는 뜻입니다. 

Emmet은 대부분 코딩을 하는 사람이라면 다른 툴과 달리 기본은 금세 배울 수 있습니다. 기본적으로 Emmet의 약어는 단어의 첫 글자를 따서 사용하기 때문에 간단한 흐름만 파악해도 손쉽게 적응할 수 있습니다. 무엇보다 Emmet의 최대 장점은 일일이 코드를 쓰지 않아도 빠른 속도로 코딩을 할 수 있는 것입니다.

Emmet plugin 설치

일단 Emmet을 사용하려면 Emmet을 설치해야겠죠?

1. 서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러옵니다.
2. install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누릅니다.
3. emmet을 입력하여 Emmet가 검색되면 선택한 후, 엔터를 눌러 설치합니다.

sublime text(서브라임 텍스트)를 재실행하면 설치됐음을 확인할 수 있습니다.

Emmet 축약어

축약어는 Emmet의 핵심입니다. CSS 선택자와 닮은 표현식을 확장하는데 아래의 예를 볼까요?

이렇게 코드를 작성하면, 어떻게 될까요?

Emmet 메타 문자

Emmet 이 사용하는 메타문자는 코딩하는 사람들에게 익숙하고 직관적이고 상식적인 것들뿐이니 어렵지 않게 이해할 수 있습니다.

> : 해당 태그를 열고 들여쓰기를 한다.

+ : 줄바꿈을 하고 다음 태그를 추가한다.

. : class를 지정한다.

# : id를 지정한다.

[] : 커스텀 속성을 지정한다.

^ : 한 수준 올라간다.

() : 그룹을 지정한다.

* : 곱하기로 정해진 수만큼 태그를 반복한다.

Emmet 반복 태그 

간단한 수식으로 반복 태그를 지정할 수도 있다. * 로 곱하기를 하면 됩니다. 또한 $를 이용하면 숫자를 증가시킬 수 있습니다.

Emmet 콘텐츠 및 커스텀 

속성 지정 태그로 둘러쌀 콘텐츠를 {} 로 감싸주면 알아서 태그 안에 들어갑니다.

그룹 지정 

태그 쌍을 그룹으로 지정하려면 () 를 사용하거나 그룹에 포함시키지 않고 한 수준 위로 올라와야 하는 태그에 캐럿(^)을 붙여줍니다. 가령 다음처럼 하면 p 태그 아래 img 태그와 p 태그가 같이 안기는 형태가 됩니다.

텍스트 채우기 

페이지 디자인 할때 임의 콘텐츠로 채워두면 한결 작업이 수월해집니다. 흔히 lorem ipsum 이란 엉터리 라틴어 텍스트틱~한 콘텐츠를 사용하는데 Emmet 에 기본 내장돼 있습니다. 그냥 lorem 이라고 쳐주면 되는데요. 단어 수를 지정하려면 lorem10 식으로 숫자를 붙여주고, 단락 수를 지정하려면 lorem*3 식으로 * 표와 함께 숫자를 지정해주면 됩니다. 다음처럼 하면 10단어 짜리 문장 3개를 만들어 줍니다. 특정 태그를 채울 수도 있습니다.

간단한 산수

 – $ 와 @ 간단한 산수도 가능합니다. 번호붙이기에 가장 많이 활용되는데요. 가령 특정 태그 항목에 번호를 줄줄이 붙이고 싶으면 $*5 식으로 입력합니다. 그럼 1-5 까지 숫자를 붙여줍니다. $ 문자를 겹쳐 사용하면 0으로 빈자리를 채워줍니다(zero-fill). 가령 $$$ 이면 001, 002, 003 식으로 채웁니다. 또 @ 문자로 시작하는 숫자를 지정할 수도 있고, – 문자로 방향을 바꿀 수도 있습니다. @은 이메일 주소로도 알 수 있듯이 영어로 at 이라 읽는다. 그러니 @3 이면 at 3 라고 위치를 지정해준다고 이해하면 됩니다.

emmet에는 이외에도 정말 많은 기능들이 탑재되어 있습니다.

아래는 emmet의 cheat sheet입니다. 까먹을 때마다 한번씩 보면서 손에 익혀놓으세요!

http://docs.emmet.io/cheat-sheet/

분명 Emmet이 지원하는 기능도 많고 더 편리한 부분도 많이 있어서 Emmet은 단축어를 활용하여 빠르고 정확하게 코딩할 수 있는 부분에 있어 최고의 선택이라고 생각합니다.