확장 패키지 - emmet

처음 emmet을 접했을 때,

엔터치고 element를 쓰지 않고 한 줄로 쓸 수 있다는게 나름 싱기방기했는데

한번 써보고 크게 와닿지 않으면 바로바로 삭제해버리는 나로서

서브라임에 깔아놓은 몇 개 없는 패키지 중 하나!

[ Emmet ] 젠코딩(예전엔 zencoding으로 불리었다고한다)

이 플러그인의 핵심은 CSS 선택자와 비슷한 표현식을 HTML 코드로 확장할 수 있는 강력한 약어 엔진이라는데

이렇게 글로보면 헷갈리니 

간단하게 동영상으로 보자면 (https://docs.emmet.io/ 이 곳으로 이동!)

위의 링크 (동영상)을 보고 알 수 있듯이

ul#nav>li.item$*4>a{item $}

라는 코드를 한 줄로 적고 [tab]키, 혹은 [enter]를 쳤을 때 

	
item 1
	
item 2
	
item 3
	
item 4

라는 코드가 쫙 생성!

젠코딩에 익숙하신 분이라면 정말 코드를 쭉쭉쭉 한 줄로 작성하실텐데

나는 아직 ... > <// 

1. 아래는 콘솔창을 열어서 한 줄로 작성 (콘솔창을 열으려면 control + option + enter)

2. 아래는 창에 바로 작성

>> [tab]키 누르면 아래처럼 변경 >>

위의 내용을 보면 또 알수 있는 것이

#은 아이디

.은 클래스라는 것을 짐작할 수 있는데

맨 위에 "CSS 선택자와 비슷한 표현식을 HTML 코드로 확장" 라고 쓴 것이 이해가 갈 것이당

이렇게 emmet에서 사용할 수 있는 단축어를 리스트업 해보려고 한다

#	아이디 값
.	클래스 값
>	자식요소 생성
+	형제요소 생성
^	부모요소와 동일한 위치에 요소 생성 (한 단계 위에 요소생성)
*	요소 곱하기 ( ex. div*2 )  /  곱한 숫자 만큼 요소생성
:	속성 (ex. input:c 는 <input type="checkbox" name="" id="">)
input:t	<input type="text" name="" id="">
input:c	<input type="checkbox" name="" id="">
input:r	<input type="radio" name="" id="">
input:s	<input type="submit" value="">
input:b	<input type="button" value="">
input:f	<input type="file" name="" id="">
input:h	<input type="hidden" name="">
input:i	<input type="image" src="" alt="">
input:p	<input type="password" name="" id="">
a:link	<a href="http://"></a>
a:mail	<a href="mailto:"></a>

.. 더 쓰고싶은데 살짝 귀찮..