웹 문서를 작성하다 보면 HTML 마크업과 CSS 소스가 수십, 수백줄이 되는데, 소스 코딩을 조금이라도 쉽게 도와주는 도구가 “에밋(Emmet, 흔히, 젠코딩 zen coding)”, 입니다.
대부분의 에디터에 플러그인 형태로 추가한 후 사용할 수 있는데 간단한 사용법을 살펴보겠습니다.
젠코딩 차트 : https://docs.emmet.io/cheat-sheet/
홈페이지 : https://code.google.com/archive/p/zen-coding/
젠코딩 이용 방법: 생략어 확장
10가지 작업 중에서, 가장 자주 이용되는 것은 “생략어 확장” 작업 입니다. CSS 선별 양식이 작동하는 법과 비슷한 이 작업은 전체 HTML 코드에 있는 입력된 약어를 확장시킵니다. 이 바로가기 키는 F12입니다. 생략을 확장시키기 위해서 그 생략어를 입력한 다음 F12를 누르십시오. 예를 들어, 다음을 입력
div#name
한 후에 F12를 누르면 생략을 다음으로 확장됩니다.
<div id="name"></div>
#은 HTML의 ID요소를 구체화하는데 사용되어 집니다. 분류를 더 세분화 하기 위해서는 # 대신에 . 을 사용해 주세요. 예를 들어, 다음
div.name
을 입력한 후에 F12를 눌러 주세요.
<div class="name"></div>
. 대신에 >을 이용하면 하위 요소를 더 세분화 시킬 수 있습니다. 예를 들어서:
table>tr>td
은 다음으로 확장됩니다.
<table> <tr> <td></td> </tr> </table>
만일 +를 사용하면, 하나 이상의 요소가 확장됩니다. 예를 들어,
p.one+p.two
은 다음으로 됩니다.
<p class="one"></p> <p class="two"></p>
속성을 지정하기 위해 [ ]를 사용해 주세요 예를 들어,
p[title]
은 다음으로 확장됩니다.
<p title=""></p>
더욱이, 젠코딩은 필터 기능을 포함하고 있습니다. 필터를 세분화 하기 위해서는 | 을 사용해 주세요. 다음
p.title|e
을 입력하면 다음으로 확장됩니다.
<p class="title"></p>
e 필터는 다음의 세 문자를 인코딩합니다: >, <, 그리고 &, 이것은 SML문자들로써 사용되어질 수 없습니다. 더 많은 필터들을 사용할 수 있습니다.
만일 반복되는 요소들을 설명하고자 한다면, *와 숫자를 사용해서 반복을 지정할 수 있습니다. 예를 들어,
p*3
은 다음으로 확장됩니다.
<p></p> <p></p> <p></p>
더욱이, $를 사용함으로써, 클라스의 ID 이름에서 연속적인 숫자를 포함할 수 있습니다. 예를들어 다음 내용을 입력할 수 있습니다.
p.name-$*3
다음 내용을 사용하기 위해서
<p class="name-1"></p> <p class="name-2"></p> <p class="name-3"></p>
ul+, table+ 그리고 dl+와 같은 특별한 생략어는 입력 시간을 크게 줄여줍니다. 예를 들어,
ul+
는 다음으로 확장됩니다.
<ul> <li></li> </ul>
더 자세한 사항을 위해서, 여기를 참조해 주세요.
더욱이, 많은 코드 조각들이 젠코딩에서 사용 가능 합니다. 예를 들어, HTML 속성은 엠에디터에서 선택되어 집니다.
html:4t
은 다음으로 확장됩니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title></title> </head> <body> </body> </html>
그리고 CSS 구성이 선택되어 졌을때, F12를 누르면 다음으로 확장이 됩니다.
@i
가
@import url();
으로 됩니다.
가능한 코드 조각의 목록은 다음으로 설명되어 집니다.
편리한 미리보기를 여기에서 보실 수 있습니다.
다른 기능
생략을 확장하는 것은 많은 젠코딩 기능들 중 하나입니다. 모든 작업의 자세한 사항으로써, 다음을 참조해 주세요:
1) .와 #를 이용해 클래스 선택자와 id 선택자를 함께 표시할 수 있습니다.
|
1
2
3
|
div.container
<div class=“container”></div>
|
2) 요소>요소 를 사용하면 부모 요소와 자식 요소로 표시할 수 있습니다.
|
1
2
3
4
5
6
7
8
9
|
div>table>tr>td
<div>
<table>
<tr>
<td></td>
</tr>
</table>
</div>
|
3) 요소*숫자 를 사용하면 반복하는 요소를 표시할 수 있습니다.
|
1
2
3
4
5
6
7
|
ul>li*3
<ul>
<il></li>
<li></li>
<li></li>
</ul>
|
4) 요소+요소 를 사용하면 형제 요소로 표시할 수 있습니다.
|
1
2
3
4
5
6
7
|
div>h1+p*2
<div>
<h1></h1>
<p></p>
<p></p>
</div>
|
5) [속성=”값”] 을 이용하면 속성과 값을 함께 지정할 수 있습니다.
|
1
2
3
|
meta[chartset=“utf-8”]
<meta charset=“utf-8”>
|
6) { }을 이용하면 텍스트를 지정할 수 있습니다.
|
1
2
3
|
p{텍스트 내용}
<p>텍스트 내용</p>
|
[참조]젠코딩 공식 홈페이지, 생활코딩의 젠코딩 설명, 스매싱매거진의 젠코딩 설명