Emmet HTML/CSS 약어 치트시트

Emmet은 CSS 선택자 스타일의 동적 축약 표현 확장을 통해 HTML, XML, CSS 코드를 신속하게 작성할 수 있도록 돕는 필수 도구 모음입니다.

계층 구조 문법

자식 요소 (>)

nav>ul>li 확장 결과:

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

형제 요소 (+)

div+p+bq 확장 결과:

<div></div>
<p></p>
<blockquote></blockquote>

상위 레벨로 이동 (^)

div+div>p>span+em^^bq 확장 결과:

<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

요소 반복 생성 (*)

ul>li*3 확장 결과:

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

그룹화 (())

div>(header>ul>li*2)+footer>p 확장 결과:

<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

속성 및 텍스트 문법

클래스 및 ID (. 및 #)

header#main-header.navbar.fixed 확장 결과:

<header id="main-header" class="navbar fixed"></header>

사용자 정의 HTML 속성 ([])

a[title="Home" target="_blank"] 확장 결과:

<a href="" title="Home" target="_blank"></a>

자동 번호 매기기 ($)

ul>li.item$*3 확장 결과:

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>

여러 개의 $ 문자를 사용하면 0으로 채워진 자릿수가 생성됩니다 (예: item$$ → item01, item02).

텍스트 노드 ({})

a{Click Here} 확장 결과:

<a href="">Click Here</a>

p>{Click }+a{here}+{ to continue} 확장 결과:

<p>Click <a href="">here</a> to continue</p>

표준 HTML5 기본 템플릿

! 또는 html:5 입력 후 Tab 키를 누릅니다:

<!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>