카테고리 정보를 불러오는 중입니다.

HTML

[HTML] html 코드 작성 시 사용되는 Emmet 문법 몇가지

작성일 2026-08-27조회수 3
#html#emmet#html자동완성#자동완성
← HTML 목록

HTML 작성 시 작성 속도를 올려주는 문법이 바로 'Emmet 문법' 입니다.

주로 쓰이는 Emmet 문법은 아래의 표와 같습니다.

 

 

  . > $ + # [ ]  { }  *
예시 div.sub ul>li {sub $} div+div div#sub a[href="#"] div{sub} div*4
설명

div의class는 sub

ul의자식인 li

sub 1 ~ sub 3

div의 형제인 div

div의 id는 sub

a의 속성은 href="#"

div의 텍스트는 sub

div를 4개 만든다

위의 표에 있는 Emmet 문법 외에도 다양한 문법들이 존재하는 것으로 알고 있습니다.

Emmet 문법을 쓸 때는 띄어쓰기를 사용하지 않고 모든 문장을 다 붙여줘야 합니다!!! 또 사용하는 에디터의 설정에 따라 적용이 안될수도 있습니다.

(공백 금지!)

 

<div id="main">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="sub">
            <ul>
                <li>
                    <a href="#">menu 1</a>
                    <ul>
                        <li><a href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">menu 2</a>
                    <ul>
                        <li><a href="#"></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
 
 
만약 위와같은 html코드를 작성한다고 했을 때 코드를 입력하고 복사/붙여넣기를 통해 작성하는 게 아닌

  div#main>span*6div.sub>ul>li*2>a[href="#"]{menu $}+ul>li>a[href="#"]  

이렇게 에디터에서 입력을 통해 위와같은 코드를 빠르게 작성할 수 있습니다.
요즘에는 AI를 통해 코드를 작성하다보니 많이 사용하는 사람이 없을 것 같지만... ㅠㅠ
 
잘못된 부분이나 조금 더 나은 개선점에 대한 댓글은 언제나 환영입니다.!

댓글

0개

댓글을 불러오는 중입니다.