Emmet
프로그래밍 언어의 코드를 더 빠르게 작성할 수 있도록 돕는 도구.
HTML뿐만 아니라 CSS에서도 사용할 수 있다.
기본 문법
태그 작성
<div></div>
일반적으로 태그를 작성하려면 위와 같이 작성해야 한다. 하지만 Emmet을 사용하면 아래와 같이 작성할 수 있다.
div
div를 적고 탭을 누르면 위와 같은 태그가 자동으로 생성된다.
만약 태그 안에 내용을 지정하고 싶다면 중괄호를 사용하면 된다.
div{Hello}
<div>Hello</div>
태그 작성 예시
div.container
div.container를 적고 탭을 누르면 위와 같은 태그가 자동으로 생성된다.
<div class="container"></div>
클래스를 여러개 지니고 있는 태그를 작성하려면 다음과 같이 쓰면 된다.
div.container.item
<div class="container item"></div>
클래스뿐만 아니라 아이디도 빠르게 작성할 수 있다.
div#container
<div id="container"></div>
dummy text를 작성하고 싶다면 lorem을 사용하면 된다.
p>lorem
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
에밋으로 빠르게 부모 자식 관계를 표현할 수도 있다.
div.container>div.item
div.container>div.item를 적고 탭을 누르면 아래와 같은 태그가 자동으로 생성된다.
<div class="container">
<div class="item"></div>
</div>
이를 통해 상당히 CSS의 선택자 사용과 유사하다는 것을 알 수 있다.
이를 활용하여 목록 리스트를 상당히 빠르게 작성할 수 있다.
이때, 순서와 괄호를 주의해야한다. 예를 들어, 아래와 같은 태그를 작성하려고 한다.
<ul></ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
그렇다면 에밋으로는 어떻게 작성해야할까?
ul>li>a*5
ul>li>a*5를 적고 탭을 누르면 아래와 같은 태그가 자동으로 생성된다.
<ul>
<li>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</li>
</ul>
즉, li와 a를 괄호로 묶어야 그룹으로 반복이 된다.
ul>(li>a)*5
해당 에밋을 통해 원하는 태그를 작성할 수 있게 된다.
부모 자식 관계 뿐만 아니라 형제 관계도 작성할 수 있다.
ul>li+a
<ul>
<li></li>
<a href=""></a>
</ul>
input태그의 type 지정 또한 에밋으로 빠르게 작성할 수 있다.
input:button
<input type="button" />
head태그 내에서도 메타데이터를 에밋으로 빠르게 작성할 수 있다.
<!-- 파비콘 링크(자동으로 favicon.ico 파일 경로 지정) -->
link:favicon
<!-- 스타일시트 링크(자동으로 style.css 파일 경로 지정) -->
link:css
<!-- 자바스크립트 링크(자동으로 모듈형 script.js 파일 경로 지정) -->
script:module
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" type="module"></script>
심화 문법
span{place$}*3
<span>place1</span>
<span>place2</span>
<span>place3</span>
중괄호 안에 $를 사용한다면 연속되는 값을 집어 넣을 수 있다. 예를 들어, span{place$}\*3이라면, 각각 place1, place2, place3의 내용이 들어가 있는 span태그가 형성된다.
option[value = "$"]{$일}*31
다음과 같이 작성하면 1일부터 31일까지 연속되는 내용이 들어가 있는 option태그를 빠르고 쉽게 작성할 수 있다.
<option value="1">1일</option>
<option value="2">2일</option>
<option value="3">3일</option>
...
<option value="31">31일</option>
$를 2번 쓰면 앞에 0을 채워준다. 예를 들어, option[value = "$"]{$일}\*31이라면, 각각 01일, 02일, 03일, ... , 31일의 내용이 들어가 있는 option태그가 형성된다.
option[value = "$$"]{$일}*31
<option value="01">01일</option>
<option value="02">02일</option>
...
<option value="31">31일</option>
$를 @랑 같이 사용하여 숫자를 텍스트로 자동 생성할 수 있다.
ul>li.item$@*5
<ul>
<li class="item1">1</li>
<li class="item2">2</li>
<li class="item3">3</li>
<li class="item4">4</li>
<li class="item5">5</li>
</ul>
이때, @- 를 사용하면 카운트를 역순으로 셀 수 있다.
ul>li.item$@-*3
<ul>
<li class="item3">3</li>
<li class="item2">2</li>
<li class="item1">1</li>
</ul>
@를 활용하여 특정 숫자부터 카운트되도록 할 수 있다.
ul>li.item$@3*3
<ul>
<li class="item3">3</li>
<li class="item4">4</li>
<li class="item5">5</li>
</ul>
‼️ 모든 글이 정확하지 않을 수 있습니다. 잘못된 정보가 있을 경우 댓글로 알려주시면 감사하겠습니다.