반응형
Emmet (에밋)
빠른 코딩을 위해 사용하는 플러그인으로 간단한 몇 가지 코드만 입력하면, 자동으로 완전한 HTML 코드를 생성해 줍니다.
HTML 표준 구조
! 입력 후 Tab키 : 간단하고 빠르게 HTML 기본구조를 만들어 줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
자식노드
div>ul>li 입력 후 Tab키 : >를 사용하여 자식 요소를 생성할 수 있습니다.
<div>
<ul>
<li></li>
</ul>
</div>
형제노드
div>ul+ol+div 입력 후 Tab키 : +를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있습니다.
<div>
<ul></ul>
<ol></ol>
<div></div>
</div>
반복하기
div>ul>li*3 입력 후 Tab키 : *를 사용하여 요소를 반복해서 생성할 수 있습니다.
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
클래스 부여
div.title 입력 후 Tab키 : .을 사용하여 클래스를 갖는 요소를 생성할 수 있습니다.
<div class="title"></div>
아이디
div#item 입력 후 Tab키 : id를 갖는 요소를 생성할 수 있습니다.
<div id="item"></div>
텍스트 입력
p{Hello World~!} 입력 후 Tab키 : {}를 사용하여 요소안에 내용을 갖는 요소를 생성합니다.
<p>Hello World~!</p>
자동 넘버링 부여
p{item$}*5 입력 후 Tab키 : $를 사용하여 넘버링을 부여합니다.
<p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
<p>item5</p>
반응형
'HTML' 카테고리의 다른 글
| 6. 이미지 & 멀티미디어 태그 (0) | 2024.04.11 |
|---|---|
| 5. Block & Inline Element 영역 (0) | 2024.04.11 |
| 4. 목록 태그 (0) | 2024.04.11 |
| 3. 글꼴 태그 (0) | 2024.04.11 |
| 2. HTML이란? (0) | 2024.04.09 |
