Emmet 참고자료

Emmet의 경우는 HTML 이나 CSS 소스코드를 매우 빠른 속도로 작성을 가능할 수 있도록 하는 플러그인이다.

Atom 에디터의 경우에는 기본적으로 제공하고 있는 것으로 알고 있으며, Sublime Text의 경우에는 패키지를 제공하고 있다.

Emmet의 큰 장점은 많이 반복되는 소스코드 부분을 몇 자를 입력하지 않더라도 한 번에 생성이 가능하다는 점이다. 예를 들어서 li 태그에 동일한 class 이름을 가지도록 해서 10개를 생성한다는 경우 li.line*10을 입력하는 것만으로 바로 생성이 가능하다.(물론 복사 붙여 넣기로도 가능하지만 더 오래걸린다...)

"."의 경우에는 클래스를 나타내고, "#"의 경우에는 id를 타타내며, "{}"안에 값을 넣으면 태그의 속성을 생성할 수 있다. "*"는 반복을 의미하고, "$"는 아이템에 숫자를 추가할 수 있다.

">"는 child로 생성한다는 것이고, "+"는 sibling을 생성한다는 것이며, "^"는 parent로 이동한다는 것을 의미한다.

더 단축 명령어의 경우 아래의 cheat sheet를 참조하도록 한다.

http://docs.emmet.io/cheat-sheet/