[HTML 시맨틱] emmet 사용하기

Emmet은 HTML, CSS 코드를 빠르게 작성하기 위해 사용하는 도구로, 축약형(syntax)을 사용해 코드 구조를 단순화할 수 있다.

emmet syntax

Child: >

> 로 여러 태그를 이어 붙여 부모-자식 관계를 한 번에 생성할 수 있다.

div>ul>li

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

• div는 최상위 부모 태그
• ul은 div의 자식 태그
• li는 ul의 자식 태그

Sibling: +

+를 사용하면 형제 요소를 한 번에 생성할 수 있다. 형제 요소란 동일한 부모 아래 나란히 위치하는 태그를 말한다.

h1+h2+p

<h1></h1>
<h2></h2>
<p></p>

• h1, h2, p는 모두 같은 계층(형제 관계)에 있는 태그이다.

Multiplication: *

*을 사용해 반복 작업을 한 번에 처리할 수 있다. 주로 리스트나 반복되는 태그를 생성할 때 사용한다.

ul>li*5

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

• <ul> 태그 안에 <li> 태그 5개가 생성되었다.

Item numbering: $

$를 사용하면 요소에 숫자를 자동으로 추가할 수 있다. 숫자는 기본적으로 1부터 시작한다.

ul>li.item$*5

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

• <li> 태그에 자동으로 class="item1", class="item2"와 같은 번호가 부여된다.

Text {}

{}를 사용하면 태그 내부에 텍스트를 삽입할 수 있다.

a{Click me}

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

• <a> 태그 안에 Click me라는 텍스트가 삽입되었다.