Emmet이란
HTML, CSS 코드를 빠르게 작성할 수 있도록 도와주는 코딩 단축키(스니펫) 기능이다.
주로 VS code, Sublime Text, Atom 등의 코드 편집기에서 사용된다.
Emmet의 장점
- 코드 자동 완성
- 짧은 코드(축약어)를 입력하면 자동으로 HTML 태그를 확장해 준다.
- 반복문 기능
- 같은 태그를 여러 번 반복해서 생성할 수 있다.
- 자동 속성 추가
- class, id, href 등의 속성을 쉽게 추가할 수 있다.
- CSS와 연동 가능
- CSS의 속성을 짧게 입력하면 자동으로 확장된다.
HTML Emmet
1. HTML 표준 구조
! 입력 후 Tab 키 : 간단하고 빠르게 HTML 구조를 만들어 준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. 자식 노드
div>ul>li 입력 후 Tab 키 : >를 사용하여 자식 요소를 생성할 수 있다.
<!-- 자식 노드 : > -->
<!-- div>ul>li-->
<div>
<ul>
<li></li>
</ul>
</div>
3. 형제 노드
div>ul+ol+div 입력 후 Tab 키 : +를 사용하여 형제 노드를 생성할 수 있다.
<!-- 형제 노드 : + -->
<!-- div>ul+ol+div-->
<div>
<ul></ul>
<ol></ol>
<div></div>
</div>
4. 반복하기
div>ul>li*3 입력 후 Tab 키 : *num 을 사용하여 태그 생성을 반복할 수 있다.
<!-- 반복하기 *num -->
<!-- div>ul>li*3-->
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5. 아이디 자동 생성
(Tag)#(String) 입력 후 Tab 키 : #(String)을 사용하여 태그 생성 시 아이디를 자동으로 부여해준다.
#item을 입력하면 기본 태그인 div로 생성된다.
<!-- 아이디 자동 생성 : # (기본 태그는 div)-->
<!-- span#item -->
<span id="item"></span
6. 클래스 자동 생성
(Tag).(String) 입력 후 Tab 키 : .(String)을 사용하여 태그 생성 시 클래스를 자동으로 부여해준다.
.item을 입력하면 기본 태그인 div로 생성된다.
<!-- 클래스 자동 생성 : . (기본 태그는 div)-->
<!-- span.item-->
<span class="item"></span>
7. 콘텐츠 자동 생성
(Tag){(String)} 입력 후 Tab 키 : {(String)}을 사용하여 태그 생성 시 콘텐츠를 자동으로 생성해준다.
<!-- 콘텐츠 자동 생성 : {} -->
<!-- p.container{Hello World} -->
<p class="container">Hello World</p>
8. 자동 넘버링
$를 입력 후 Tab 키 : $를 사용하여 자동으로 넘버링을 지정할 수 있다.
반복문을 사용하면 자동으로 숫자가 증가한다.
<!-- 자동 넘버링 : $ -->
<!-- p.container{item$}*5 -->
<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>
<!-- p.number${Test Number}*5-->
<p class="number1">Test Number</p>
<p class="number2">Test Number</p>
<p class="number3">Test Number</p>
<p class="number4">Test Number</p>
<p class="number5">Test Number</p>
'🌠Development > html, css' 카테고리의 다른 글
| [html] List Tag (1) | 2025.01.31 |
|---|---|
| [html] Font Tag (글꼴 태그, <i> vs <em>, <b> vs <strong> 차이) (0) | 2025.01.31 |
| [html] 태그 종류 (0) | 2025.01.29 |
| [html] 기본 구조 (0) | 2025.01.29 |