본문 바로가기
Tech Note/IDE

Emmet 으로 HTML UI 개발속도 높이기

by Dev. Jkun 2015. 4. 9.
반응형

출처 : http://codeflow.co.kr/question/393/emmet으로-html과-css-작업-속도-높이기-accelerate-your-html-and-css-production-with-emmet/


Emmet (Zen Coding으로 알려진바 있는) 은 빠른 웹개발을 위한 마크로와 키보드 바로가기 모음집입니다. 무상 다운로드 할수있으,며10여개이상의 에디터의 플러그인으로 설치할수 있이며, 일관성 있게 사용한다면 최대 2배의 생산성을 기대할수 있습니다. 이 포스팅에서 Emmet의 설치, 사용법과 최대의 결과를 얻기위한 커스터마이징 방법들을 설명하겠습니다.

최근에 나온 에디터의 대부분은태그를 자동으로 닫아주거나 늘상 쓰이는 요소들로 미리 포맷을 잡아주거나하는, 이런 저런 종류의 마크로를 내부에 포함하고 있습니다. Emmet은 여러단계 위의 수준입니다. 또한 Emmet은 어플리케이션작업을 옮길때마다 새로 바로가기등을 배워야할 필요없이 모든 플렛폼과 편집기에서 일관적으로 작동한다는 장점이 있습니다. Emmet구문으로 코드를 빨리 짜낼수 있습니다.

설치

Emmet은 14종의 IDE에서 지원됩니다. 각각의 설치 방법들은 약간 다릅니다. 그중 coda한가지만 집중하여 다루겠습니다. 관련파일을 다운로드 하시고, 다른이름으로 저장을 하시고Emmet.codaplugin으로 이름을 바꾸시고 더블클릭하세요 (클릭해도 원도우 팝업은 나타나지 않으니 당황하지마세요)

코딩을 위해 Emmet 사용하기

Emmet이 설치되면 시작할 준비가 된것입니다. 기억하기 쉬운 바로가기 구문(syntax)들외에 염두해야될 점이 두가지 있습니다

Emmet 구문에 스페이스를 넣으면 바로가기가 작동하지 않습니다. 코드를 입력한후 반드시 키보드 바로가기를 올바르게 사용해야 구문이 확장됩니다 (Ctrl-E). 이를테면 템플렛을 사용하여 페이지 작업을 시작한다고 해봅시다. 먼저 네이게이션부터 시작하죠. 보통, 일련의 중첩 태그(nested tag)를 일일히 입력해야합니다; HTML5에서 ,<nav> 요소, <ul> 요소와 링크가 포함되있는 일련의 <li> 태그 요소 등입니다.

Emmet에선 그냥 이렇게 입력하면 됩니다:

nav>ul>li*5

그리고 Ctrl+E 를 누르면, Emmet은 다음과 같은 결과물을 보여줍니다:

<nav>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>

매우 간단하죠? Emmet은 HTML코드안의 CSS 스타일 선택자를 똑똑하게 사용하여 중첩요소들을 반복된 재귀호출(recursion)을 더하여 생성합니다.

같은 방식으로 테이블을 매우 빠르게 생성할수 있습니다:

table>tr*3>td*5

…그러면 3행5열의 태이블을 생성합니다.

잠깐만요 더 잘할수 있습니다! Emmet구문의 요소를 집합화 하여 태그를 함께 중첩화(nest)할수도 있습니다:

nav>ul>(li>a)*5

다음과 같이 확장됩니다:

<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>

이런 것도 할수 있습니다:

table>(thead>tr>th*5)(tbody>tr>td*5)

…그러면 헤더와 data행이 있는 테이블을 생성합니다. 또한 CSS의 인접 형제 선택자(adjacent sibling selector)에 해당하는것을 사용하여 요소들을 차례로 생성할수 있습니다.

header+main+footer

는 다음을 생성합니다.

<header></header>
<main></main>
<footer></footer>

다른 많은 조합들도 가능합니다. 어쨋거나 요점은 페이지의 기본 마크업을 힘들게 일일히 입력하지 않고, 단 몇번의 키입력으로 생성할수 있다는 것입니다

채우기 내용 생성하기

Emmet 으로 안의 내용을 채울수도 있습니다. Lorem이나 ipsum 키워드를 확장하여 로렘 입숨 표준 채우기 텍스트를 생성할수 있습니다. 괄호는 특정 채우기 택스트를 지정합니다. 예를 들면 빈 링크들을 ”Link”라는 단어로 채우려면 :

nav>ul>(li>a[href=#]{Link})*5

는 다음을 생성합니다.

<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>

매우 게으른 사람들을 위한 CSS

스타일시트 작업을 할때 Emmet 은 작업을 매우 쉽게 해줄수 있습니다. 예를 들면 다음을 타이프 하기보다는

margin: 2rem;

Emmet 이 있다면 다음을 타이프 하면 됩니다.

m2r

Emmet 키보드 콤보를 적용하면margin: 2rem; 로 확장이 됩니다.

수백개의 비슷한 단축키 등이 있지만 좋은점은 단축키 하나를 사용하기 전까지 플러그인이 비활성화 상태로 있기때문에 다른 단축키까지 전부를 한꺼번에 사용할 필요는 없다는것입니다.

텍스트가 아니라 테그를 선택한다

보통의 IDE들이 제공하는 셀랙트 방법은 코딩 에디터보다는 워드 프로세서에 가깝습니다. Emmet은 HTML이나 CSS내용을 선택 작업을 쉽게 선택하게 해주는 기능들을 가지고 있습니다. 마우스를 잡고 움직이기보다는 몇개의 키를 누르는 것만으로 코드들을 편집하고 복사하고 지울수 있습니다

Emmet 과 SASS같은 pre-processor 와의 차이점은 무엇인가?

Pre-processors 와 frameworks 둘다 목적하는 언어에 맵핑을 합니다만 중요한 차이점이 있습니다: Pre-processors는 원코드가 유지되다 런타임에 비로서 번역되고 확장됩니다. 달리 말하면 SASS문서를 작업하면 SASS문서로서 존재합니다. 타자를 치자마자 자동으로 CSS로 확장되는것이 아닙니다. 이런점은 장점이 될수 있습니다. 처음으로 돌아가서 약간의 작업을 하면 결과물에 큰 변화을 줄수 있습니다. 이런 장점은 보통 복잡함 증가과 생산성 하락이라는 문제가 있습니다.

Emmet을 pre-processors로 가는 관문으로 생각하면 적당할것입니다. SASS처럼 복잡한 초기과정 없이 마크업과 CSS 작업을 할수 있게 해줍니다.

결론

Emmet으로 얼마간 작업한 후에 어떻게 이것없이 그동안 작업을 해왔는지 알수가 없을 정도입니다. Emmet의 마크로들은 HTML 과 CSS를 배우기 위한 지름길이 아닙니다: 언어와 문법을 배우는 과정은 거쳐야합니다. 그러나 이미 일년정도 코딩을 해온 상태에서 새 툴을 배우기 위한 초기의 어려움 없이 생산성 향상을 원한다면 온라인상의 튜토리얼 한두개를 읽는 정도로 Emmet 의 기초를 쉽게 배울수 있을 것입니. 그 이후로는 새로운 코드를 짜기 위한 시간을 위해 어떻게 단축키등을 이용하는가의 문제입니다.

반응형

댓글