Written by
Tina
on
on
emmet 문법으로 태그 자동완성하기
emmet 문법 기본 사용법
기본적으로 자동완성하고 싶은 태그 이름을 쓰고 tab을 누르면 태그가 자동완성된다
- h1 +
tab입력
<h1></h1>Syntax
요소에 텍스트 넣기
- h1{hello world}
<h1>hello world</h1>태그에 id 부여
- h1#one
<h1 id="one"></h1>태그에 class 부여
- h1.one
<h1 class="one"></h1>태그에 id, class 여러개 동시 부여
- h1#one.two.three
<h1 id="one" class="two three"></h1>여러 종류의 태그 동시 생성
- h1+p
<h1></h1>
<p></p>동일한 태그 여러개 생성
- h1{hello}*5
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>numbering
- h$*6{hello world}
- $에 1부터6까지 숫자가 차례로 들어간다. h1~h6 태그를 차례로 자동완성
<h1>hello world</h1>
<h2>hello world</h2>
<h3>hello world</h3>
<h4>hello world</h4>
<h5>hello world</h5>
<h6>hello world</h6>자식요소가 있는 태그 생성
- ul>li
<ul>
<li></li>
</ul>table 태그 생성
- table>(tr>(td*4))*3
<!-- 4개의 td태그를 자식태그로 가지는 tr태그 3개를 가지는 table 태그 생성. 즉, 3행 4열 테이블을 생성한다-->
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>lorem ipsum 텍스트 생성
- lorem
- 기본 lorem ipsum 텍스트 생성
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quisquam qui temporibus quod cum modi dignissimos consequuntur consequatur deserunt explicabo unde quo quos, similique optio molestias voluptatibus recusandae itaque quibusdam?- lorem*3
- lorem 문단 3개 생성
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste officia unde minima suscipit saepe adipisci explicabo voluptates veniam quae velit, ea similique inventore vitae temporibus? Voluptas id amet explicabo quo.
Repellat perspiciatis hic beatae deleniti assumenda libero error officia facere reiciendis laudantium! Provident ab voluptatem natus, amet nulla sed, et ipsa error iste, ratione aperiam fugit quia modi nostrum voluptate.
Voluptates sunt perspiciatis quisquam ex maxime fugit? Delectus, neque. Quibusdam quas iure asperiores voluptatibus sequi! Commodi corrupti, explicabo delectus veniam facilis aliquam, similique odio possimus harum nostrum laborum ullam dignissimos.- lorem3
- lorem ipsum 단어 3개 생성
Lorem, ipsum dolor.img 태그 생성
- img
<img src="" alt="">alt, sizes, srcset 속성이 있는 img 태그
- img:z
<img src="" alt="" sizes="" srcset="">a 태그 자동완성
- a[href=”www.naver.com”]
<a href="www.naver.com"></a>여러 attribute가 있는 a 태그
- a[attr1=”value1” attr2=”value2” attr3=”value3”]
<a href="" attr1="value1" attr2="value2" attr3="value3"></a>