에밋 (소프트웨어)

(젠코딩에서 넘어옴)

에밋(Emmet)은 HTML, XML, XSL 문서 등을 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래 젠코딩(Zen Coding)으로 부르다가 에밋(Emmet)으로 이름을 변경했다.[1] 매우 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 준다.

설명 편집

이 프로젝트는 2008년 바딤 마키브(Vadim Makeev)에 의해 시작되었고, 2009년 Sergey Chikuyonok와 에밋(Emmet) 사용자들에 의해 지속적으로 활발하게 개발되고 있다. 에밋은 여러 텍스트 에디터에 플러그인 방식으로 삽입되어 독립적으로 작동한다. 에밋은 특정 텍스트 에디터의 엔진이나 소프트웨어와 무관하며, 텍스트 상태에서 직접적으로 작동한다. 에밋은 MIT 라이선스를 따르는 오픈 소스이다.

사용 예제 1 편집

에밋으로 다음과 같이 간략한 코드를 입력하면, 다음과 같이 완전한 HTML 코드가 생성된다.[1]

에밋 코드 편집

html:5

완전한 HTML 코드 편집

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

사용 예제 2 편집

에밋으로 다음과 같이 간략한 코드를 입력하면, 다음과 같이 완전한 HTML 코드가 생성된다.

에밋 코드 편집

div#page>div.logo+ul#navigation>li*5>a

에밋 코드 설명 편집

  • div#page : <div id="page"></div>를 생성해 준다.
  • div.logo : <div class="logo"></div>를 생성해 준다.
  • ul#navigation : <ul id="navigation"></ul>를 생성해 준다.
  • li*5 : <li></li>를 5번 반복해서 생성해 준다.
  • a : <a href=""></a>를 생성해 준다.

완전한 HTML 코드 편집

<div id="page">
	<div class="logo"></div>
	<ul id="navigation">
		<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>
</div>

플랫폼별 사용가능한 문서 편집기 편집

윈도
맥OS
  • TextMate
  • Coda
  • Espresso
  • BBEdit/TextWrangler
크로스 플랫폼

각주 편집

  1. Rocha, Zeno (March 26, 2013). "Goodbye, Zen Coding. Hello, Emmet!". Smashing Magazine. Smashing Magazine GmbH.

외부 링크 편집