Emmet
- 대부분 편집기에서 제공되는 기능
- CSS 선택자를 사용해서 > HTML/CSS 코드를 빠르게 작성하는 기술
- 생산성 도구
- http://emmet.io
- 태그 생성 + 필수 속성
Emmet 사용법 정리
- 대부분의 편집기에서 지원하는 생산성 도구로 CSS 선택자 문법을 사용해 HTML/CSS 코드를 빠르게 작성하는 기술
기본 태그 생성
div → <div></div>
a → <a href=""></a>
img → <img src="" alt="">
아이디 / 클래스
div#box1 → <div id="box1"></div>
div.item → <div class="item"></div>
div.one.two → <div class="one two"></div>
input#name.txt → <input type="text" id="name" class="txt">
#one → <div id="one"></div>
속성 지정
div[title] → <div title=""></div>
div[title=상자] → <div title="상자"></div>
img[width=500 height=500] → <img src="" alt="" width="500" height="500">
내용물 입력 (PCDATA)
CSS에는 없는 Emmet 전용 기능
div{상자} → <div>상자</div>
div#box1.box[title=상자]{첫번째} → <div id="box1" class="box" title="상자">첫번째</div>
반복 (*)
div*3 → <div></div> 3개
div{상자}*3 → <div>상자</div> 3개
div#box$*3 → id가 box1, box2, box3인 div 3개
div{상자$}*3 → 상자1, 상자2, 상자3
div{상자$$}*10 → 상자01 ~ 상자10 (두 자리 넘버링)
형제 (+)
- 형제 선택자 ~(a~b)는 Emmet에서 지원하지 않음
h1+p → <h1></h1><p></p>
(h1+p)*3 → h1+p 세트 3번 반복
h1{제목}+p.desc{$. 내용}*3 → h1 1개 + p 3개 (1~3 넘버링)
자식 (>)
- 자손 선택자(공백)는 Emmet에서 지원하지 않음
div>span → <div><span></span></div>
ul>li*5 → ul 안에 li 5개
ul#list>li.item{항목}*5 → id 있는 ul 안에 클래스 있는 li 5개
table>tr*3>td*5 → 3행 5열 테이블
Lorem Ipsum (더미 텍스트)
div>lorem → div 안에 Lorem 전체 문장
div>lorem10 → div 안에 단어 10개짜리 Lorem
h1>lorem5 → h1 안에 단어 5개짜리 Lorem
