1. Emmet이란?
Emmet은 HTML과 CSS의 자동완성 기능을 제공하여, 작성 시간을 아주 빠르게 단축시켜주는 확장 기능입니다.
2. HTML Emmet
2-1. 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>2-2. 자식노드
- > 사용
- div>ul>li 입력 후 Tab키 : > 를 사용하여 자식 요소를 생성할 수 있습니다.
<div>
<ul>
<li></li>
</ul>
</div>2-3. 형제노드
- + 사용
- div>ul+ol+div 입력 후 Tab키 : + 를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있습니다.
<div>
<ul></ul>
<ol></ol>
<div></div>
</div>2-4. 반복하기
- * 사용
- div>ul>li * 3 입력 후 Tab키 : * 를 사용하여 요소를 반복해서 생성할 수 있습니다.
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>2-5. 클래스 부여
- . 사용
- span.title 입력 후 Tab키 : CSS 클래스를 갖는 요소를 생성할 수 있습니다.
- 기본이 div이기 때문에 생략 가능
<div class="title"></div>
<span class="title"></span>2-6. 아이디
- # 사용
- span#item 입력 후 Tab키 : id를 갖는 요소를 생성할 수 있습니다.
- 기본이 div이기 때문에 생략 가능
<div id="item"></div>
<span id="item"></span>2-7. 컨텐츠 입력
- { } 사용
- p.container{Hello World~!} 입력 후 Tab키 : { } 를 사용하여 요소 안에 내용을 갖는 요소를 생성합니다.
<p class="container">Hello World~!</p>2-8. 자동 넘버링 부여
- $ 사용
- p container{item$}*5 입력 후 Tab키 : $ 를 사용하여 넘버링을 부여합니다.
<p class="container">item1</p>
<p class="container">item2</p>
<p class="container">item3</p>
<p class="container">item4</p>
<p class="container">item5</p>3. CSS Emmet
3-1. width, height
- .item{h100+w100} 입력 후 Tab키 : width, height를 지정할 수 있습니다.
- 기본 값은 px 단위이며 단위를 교체하는 것도 가능합니다.
- 기본값 -> px
- p -> %
- e -> em
- x -> ex
- r -> rem
반응형
'Study > HTML' 카테고리의 다른 글
| [HTML] Form (0) | 2025.01.10 |
|---|---|
| [HTML] 이미지 태그 & 멀티미디어 (0) | 2025.01.09 |
| [HTML] Inline VS Block Element (0) | 2025.01.09 |
| [HTML] Semantic (2) | 2025.01.09 |
| [HTML] HTML 정의와 기본 태그 (1) | 2025.01.08 |