드림코딩 by 엘리_HTML 빠르게 마크업하기 위한 지름길 Emmet.

---

HTML 빠르게 마크업하기 위한 지름길 Emmet.

---

빠른 마크업이 중요한 이유?

개발시간을 단축 시켜주고, 손목건강에도 도움이 된다.

 

HTML을 빠르게 작성할 수 있는 plug-ins이 있는데 바로 Emmet 이다.

Emmet은 Zen Coding 이라고 불렸다.

예전에는 plug-ins 형태로 통해서 text editors에서 설치해서 쓸 수 있었지만 이제는 많은 text editors에서 기본적으로 들어가 있기도 한다.

 

 

Emmet의 문법

1. HTML 양식 작성 - ! + tab

2. div 태그 작성 - div + tab

 - div.ray

 - div#ray

 - .ray 만 작성해도 자동으로 div의 class가 된다.

 - #ray 만 작성해도 자동으로 div의 id가 된다.

3. 부모, 자식, 형재 노드

 - div>ul>li : 부모

 - div>ul+ol : 형제

 - ul>li*5

 - div>ul>li^ol : ^를 이용하면 li의 부모인 ul옆에 형제 노드를 만들어 주는 것이다.

4. 그룹화 하기

 - div>(header>ul>li*2>a)+footer>p

5. 텍스트 입력하기

 - p{Ray} : tag안에 text 입력

6. 자동으로 번호 넣기

 - 자동으로 숫자 할당 

 - p.class${item $}*5

7. 더미용 텍스트 생성

 - p>lorem

 - p>lorem4 (4개의 단어만 입력)

 

Emmet을 잘 활용하면 마크업을 금방 할 수 있다.