안녕하세요, 본격적인 첫 번째 포스팅은 하드코더의 구원자 Emmet에 대해서 해 볼까 합니다.

Emmet은 예전에 Zen Coding이 이름을 바꿔서 나온 것입니다.

Emmet이 되면서 많은 개선이 이루어져서 예전보다 훨씬 편하더군요.

저같이 텍스트 편집기로 하드코딩 (위지윅 에디터 없이 손으로 페이지나 스크립트를 코딩하는 것)을 하는 하드코더들에게

Emmet은 타이핑 양을 획기적으로 줄여주는 좋은 플러그인 입니다.

[Emmet 웹 페이지]

[Emmet 다운로드 하기]

Emmet이 지원하는 텍스트 편집기 (2013년 8월 기준)

• Sublime Text
• Notepad++
• Eclipse/Aptana
• TextMate
• Coda
• Espresso
• Chocolat
• Komodo Edit
• PSPad
• CodeMirror
• Brackets
• Netbeans
• Adobe Dreamweaver
• SynWrite
• VIM
• HTML-Kit
• HippoEdit
• Web Storm
• PhpStorm
• CodeLobster PHP Edition
• textarea - 이건 HTML 텍스트 편집 창인데...이것도 지원하는군요.

플러그인 설치 방법

Emmet 플러그인의 설치 방법은 각 텍스트 편집기마다 상이하므로 웹 페이지의 문서를 참고하시기 바랍니다.

반드시 자신이 사용하는 텍스트 편집기에 맞는 플러그인을 다운로드하여 설치하셔야 합니다.

Emmet 구문 양식 (2013년 8월 기준)

Emmet의 주요 구문 양식은 다음과 같습니다. 과거에 Zen Coding을 써보신 분이라면 쉽게 적응 가능합니다.

일부 예제 이외에는 대부분 치트 시트에 나온 내용을 번역하였습니다.

원문은 아래의 치트 시트 링크를 클릭하여 보실 수 있습니다.

* 자식 : >

자식 (Child) 구조를 만들 때 사용합니다.

- 예 : nav 태그의 자식 태그로 ul 태그를 넣고, ul 태그의 자식 태그로 li 태그를 넣을 때

→ 입력 : nav>ul>li

→ 결과

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

* 형제 : +

형제 (Sibling) 구조를 만들 때 사용합니다.

- 예 : div 태그 뒤에 p 태그를 붙이고, p 태그 뒤에 blockquote 태그를 붙일 때

→ 입력 : div+p+bq

→ 결과

<div></div>
<p></p>
<blockquote></blockquote>

* 올리기 : ^

위의 형제 구조에서 태그 사이에 다른 태그를 끼워 넣을 때 사용합니다.

- 예 : div 태그의 자식 태그로 p, p 태그의 자식 태그로 span과 em 태그를 넣은 뒤
         div와 p 사이에 blockquote 태그를 끼워 넣을 때

→ 입력 : div>p>span+em^bq

→ 결과

<div>
	<p><span></span><em></em></p>
	<blockquote></blockquote>
</div>

* 그룹 : ( )

태그 축약어를 그룹으로 묶어서 사용할 때 사용합니다.

- 예 : div 태그의 자식 태그로 header 아래 ul, ul 아래 li 안에 a 태그가 포함된 li 태그를 2개 넣은 것을 그룹으로 묶고
        그 뒤에  footer 태그의 자식 태그로 p를 넣을 때

→ 입력 : div>(header>ul>li*2>a)+footer>p

→ 결과

<div>
	<header>
		<ul>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</header>
	<footer>
		<p></p>
	</footer>
</div>

- 예 : div 태그의 자식 태그로 dl을 넣고, dl 의 자식 태그로 dt와 dd를 묶어서 3개 넣은 것을 하나의 그룹으로 묶고
         그 뒤에 footer 태그의 자식 태그로 p를 넣을 때 난 여기서 빠져나가야겠어

→ 입력 : (div>dl>(dt+dd)*3)+footer>p

→ 결과

<div>
	<dl>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
		<dt></dt>
		<dd></dd>
	</dl>
</div>
<footer>
	<p></p>
</footer>

* 곱하기 : *

반복되는 태그를 넣을 때 사용합니다.

- 예 : ul 태그에 자식 태그로 li 태그를 5개 넣을 때

→ 입력 : ul>li*5

→ 결과

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

* 항목 번호 붙이기 : $

반복되는 태그의 name이나 ID, class 등을 숫자 순서대로 넣을 때 사용합니다.

- 예 : ul의 자식 태그로 li 태그를 5개 넣고, item 클래스를 1부터 5까지 순서대로 각각의 li 태그에 지정할 때

→ 입력 : ul>li.item$*5

→ 결과

<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

- 예 : h1~h3 태그를 순서대로 넣고, title 속성에 item을 1~3까지 순서로 넣은 뒤
         heading 태그 내에 Header 1~3 텍스트를 순서대로 넣을 때

→ 입력 : h$[title=item$]{Header $}*3

→ 결과

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

- 예 : ul의 자식 태그로 li 태그를 5개 넣고, item 클래스를 001부터 005까지 순서대로 각각의 li 태그에 지정할 때

→ 입력 : ul>li.item$$$*5

→ 결과

<ul>
	<li class="item001"></li>
	<li class="item002"></li>
	<li class="item003"></li>
	<li class="item004"></li>
	<li class="item005"></li>
</ul>

- 예 : ul의 자식 태그로 li 태그를 5개 넣고, item 클래스를 1부터 5까지 역순으로 각각의 li 태그에 지정할 때

→ 입력 : ul>li.item$@-*5

→ 결과

<ul>
	<li class="item5"></li>
	<li class="item4"></li>
	<li class="item3"></li>
	<li class="item2"></li>
	<li class="item1"></li>
</ul>

- 예 : ul의 자식 태그로 li 태그를 5개 넣고, item 클래스를 3부터 7까지 순서대로 각각의 li 태그에 지정할 때

→ 입력 : ul>li.item$@3*5

→ 결과

<ul>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
	<li class="item6"></li>
	<li class="item7"></li>
</ul>

* 텍스트 : {}

태그 사이에 텍스트를 넣을 때 사용합니다.

- 예 : a 태그에 "여기를 클릭하세요"를 링크 텍스트로 지정할 때

→ 입력 : a{여기를 클릭하세요}

→ 결과

<a href="">여기를 클릭하세요</a>

- 예 : p 태그의 자식 태그로 a를 넣고, p 태그 내의 "계속하려면 여기를 클릭하세요" 에서 "여기" 만 링크 텍스트로 지정할 때

→ 입력 : p>{계속하려면 }+a{여기}+{를 클릭하세요}

→ 결과

<p>계속하려면 <a href="">여기</a>를 클릭하세요</p>

* ID : #

태그에 ID 속성을 줄 때 사용합니다.

- 예 : p 태그에 resultArea라는 ID 속성을 줄 때

→ 입력 : p#resultArea

→ 결과

<p id="resultArea"></p>

- 예 : p 태그에 resultArea라는 ID 속성과 warningText라는 클래스 속성을 동시에 줄 때

→ 입력 : p#resultArea.warningText

→ 결과

<p id="resultArea" class="warningText"></p>

* 클래스 : .

태그에 CSS 클래스 (Class) 속성을 줄 때 사용합니다.

- 예 : div 태그에 container라는 클래스 속성을 줄 때

→ 입력 : div.container

→ 결과

<div class="container"></div>

- 예 : div 태그에 여러 개의 클래스 속성을 줄 때 (부트스트랩 같은 프레임워크 사용 시 유용합니다.)

→ 입력 : div.panel.panel-warning

→ 결과

<div class="panel panel-warning"></div>

* 사용자 정의 : []

태그에 사용자 정의 속성을 줄 때 사용합니다.

- 예 : p 태그에 title 속성을 주고, 속성의 내용을 "Hello world"로 줄 때

→ 입력 : p[title="Hello world"]

→ 결과

<p title="Hello world"></p>

- 예 : td 태그에 rowspan 속성과 2라는 값과 colspan 속성과 3이라는 값, 값이 없는 title 속성을 동시에 줄 때

→ 입력 : td[rowspan=2 colspan=3 title]

→ 결과

<td rowspan="2" colspan="3" title=""></td>

- 예 : div 태그 a 속성에는 value1이란 값을, b 속성에는 value2란 값을 줄 때

→ 입력 : [a='value1' b="value2"]

→ 결과

<div a="value1" b="value2"></div>

* 묵시적 태그명

해당 태그나 클래스에 기본적으로 따라와야 하는 태그 및 그 하위 태그의 클래스를 넣어줍니다.

- 예 : 그냥 class라는 클래스 속성만 입력한 뒤 확장 키를 눌렀을 때는 자동으로 div 태그의 클래스 속성으로 들어감

→ 입력 : .class

→ 결과

<div class="class"></div>

- 예 : em 태그의 자식 구조로 그냥 class라는 속성만 입력한 뒤 확장 키를 누르면 class는
        자동으로 span 태그의 클래스 속성으로 들어감 (ul의 경우에는 자동으로 하위 태그인 li에 들어감)

→ 입력 : em>.class

→ 결과

<em><span class="class"></span></em>

- 예 : table 태그의 자식 구조로 그냥 row 클래스, row 클래스의 자식 구조로 col 클래스만 입력한 뒤
        확장 키를 누르면 자동으로 table 아래 tr 태그의 클래스에 row가 지정되고, tr 태그의 하위 태그인 td 태그에는
        자동으로 col 클래스가 들어감

→ 입력 : table>.row>.col

→ 결과

<table>
	<tr class="row">
		<td class="col"></td>
	</tr>
</table>

HTML 및 CSS 태그 약어

이거는 양이 너무 많아서 따로 이곳에 정리하진 않겠습니다.
아래의 Emmet 치트 시트를 참고하시기 바랍니다. 날로 먹는 포스팅

[Emmet 치트 시트]

* Emmet 팁 : Lorem Ipsum 입력하기

약어로 lorem 또는 lipsum이라 입력한 뒤 확장 키를 누르면 어디서 많이 본 아래의 텍스트가 자동으로 들어갑니다.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi non quis exercitationem
culpa nesciunt nihil aut nostrum explicabo reprehenderit optio amet ab temporibus asperiores
quasi cupiditate. Voluptatum ducimus voluptates voluptas?

Lorem Ipsum은 보통 텍스트 레이아웃 디자인이나, 디자인에 마땅히 넣을만한 글이 없을 때 예제로 많이 사용합니다.

* 개발 팁 : 이미지 공간 채우기 (Image Placeholder)

말이 나온 김에... 레이아웃 디자인 시 텍스트는 위와 같이 Lorem Ipsum으로 채우면 되지만,
이미지는 어떻게 채워넣냐구요? 물론 일일이 해당 사이즈에 맞게 만들어도 되지만...
매우 번거로우니 다음과 같은 방법으로 간단히 해결하시면 됩니다.

img 태그의 src 속성에 다음과 같이 입력합니다.

<img src="http://placehold.it/가로픽셀x세로픽셀">

그러면 태그가 들어간 위치에 이미지 박스가 입력한 사이즈에 맞게 생성되어 자리를 채워 줍니다.
정사각형인 경우에는 그냥 가로 픽셀만 입력하면 됩니다. 아래에 예제를 보여드릴게요.

* 100 픽셀 정사각형

<img src="http://placehold.it/100">

* 200 x 150 이미지

<img src="http://placehold.it/200x150">

기타 내부에 들어가는 텍스트나 상자의 색상 등도 바꿀 수 있는데, 이는 다음에 따로 다뤄보도록 할게요.

지금 당장 궁금하신 분들께서는 [여기]를 클릭하셔서 placehold.it의 사용법을 참고하세요.

*  SyntaxHighlighter 설치해서 코드 하이라이팅 되게 했습니다.