💡Emmet 이란?
Emmet은 HTML과 CSS의 자동완성 기능을 제공하여, 작성 시간을 아주 빠르게 단축 시켜주는 확장 기능이다.
✍ HTML Emmet
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️⃣ 자식노드 >
div>ul>li 입력 후 Tab키 : >를 사용하여 자식 요소를 생성할 수 있다.
<div>
<ul>
<li></li>
</ul>
</div>
3️⃣ 형제노드 +
div>ul+ol+div 입력 후 Tab키 : +를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다.
<div>
<ul></ul>
<ol></ol>
<div></div>
</div>
4️⃣ 반복하기 *
div>ul>li*3 입력 후 Tab키 : *를 사용하여 요소를 반복해서 생성할 수 있다.
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5️⃣ 클래스 부여 .
div.title 입력 후 Tab키 : CSS 클래스를 갖을 요소를 생성할 수 있다. (기본이 div 이기 때문에 생략가능)
<div class="title"></div>
<span class="title"></span>
6️⃣ 아이디 #
#item 입력 후 Tab키 : id를 갖는 요소를 생성할 수 있다. (기본이 div 이기 때문에 생략가능)
<div id="item"></div>
<span id="item"></span>
7️⃣ 텍스트 입력 {}
p.container{Hello World~!} 입력 후 Tab키 : {}를 사용하여 요소안에 내용을 갖는 요소를 생성한다.
<p class="container">Hello World~!</p>
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>
Emmet 공식 사이트
Abbreviations Syntax
Abbreviations Syntax Emmet uses syntax similar to CSS selectors for describing elements’ positions inside generated tree and elements’ attributes. Elements You can use elements’ names like div or p to generate HTML tags. Emmet doesn’t have a predef
docs.emmet.io
본 내용은 유튜버 짐코딩님의 웹 개발 강의를 정리한 것 입니다. 하단 링크 참고해주세요!
짐코딩 - 웹 개발 입문부터 실무까지
【실전코딩 짐코딩 클럽 💪🏋️♀️】 👉 https://gymcoding.co (짐코딩 사이트, 강의교안 등등) 【짐코딩 클럽 온라인 강의 🎉】 👉 https://edu.gymcoding.co 👉 모든 유료강의 구독자 할인 쿠폰코드
www.youtube.com
'HTML' 카테고리의 다른 글
| [HTML] 🖼️ 이미지 & 멀티미디어 (0) | 2024.08.12 |
|---|---|
| [HTML] Inline VS Block Element (0) | 2024.08.09 |
| [HTML] Sementic Tag 란? (0) | 2024.08.08 |
| [HTML] HTML 기본 태그 (0) | 2024.08.08 |
| [HTML] HTML 이란? (0) | 2024.08.01 |
