HTML 코드 자동 생성

Jul 10, 2024 • bamjun

Emmet을 통한 HTML 코드 자동 생성 규칙은 매우 직관적이며, 특정 구문을 사용하여 복잡한 HTML 구조를 빠르게 작성할 수 있습니다. 주요 규칙은 다음과 같습니다.

기본 구조

요소 생성: 요소 이름을 입력하면 해당 요소가 생성됩니다.
```
 div
```
결과:
```
 <div></div>
```
자식 요소 생성: > 기호를 사용하여 자식 요소를 생성할 수 있습니다.
```
 div>p
```
결과:
```
 <div>
     <p></p>
 </div>
```
형제 요소 생성: + 기호를 사용하여 형제 요소를 생성할 수 있습니다.
```
 div+p
```
결과:
```
 <div></div>
 <p></p>
```

중첩된 구조: ()를 사용하여 그룹화할 수 있습니다.

 div>(header>h1)+footer>p

결과:

 <div>
     <header>
         <h1></h1>
     </header>
     <footer>
         <p></p>
     </footer>
 </div>

속성 추가

클래스 추가: .을 사용하여 클래스를 추가할 수 있습니다.
```
 div.classname
```
결과:
```
 <div class="classname"></div>
```
아이디 추가: #을 사용하여 아이디를 추가할 수 있습니다.
```
 div#idname
```
결과:
```
 <div id="idname"></div>
```

속성 추가: [] 안에 속성을 추가할 수 있습니다.

 a[href="http://example.com"]

결과:

 <a href="http://example.com"></a>

다중 요소 생성

반복 생성: * 뒤에 숫자를 사용하여 요소를 반복 생성할 수 있습니다.
```
 li*3
```
결과:
```
 <li></li>
 <li></li>
 <li></li>
```
순차적인 클래스/아이디: $를 사용하여 순차적인 숫자를 포함할 수 있습니다.
```
 p.class$*3
```
결과:
```
 <p class="class1"></p>
 <p class="class2"></p>
 <p class="class3"></p>
```

텍스트 포함

요소 내 텍스트: {}를 사용하여 요소 내 텍스트를 추가할 수 있습니다.
```
 p{Hello World}
```
결과:
```
 <p>Hello World</p>
```

복합 예제

위 규칙들을 조합하여 복합적인 구조를 생성할 수 있습니다.

ul>li.item$*3>a[href="http://example.com"]{Link $}

결과:

<ul>
    <li class="item1"><a href="http://example.com">Link 1</a></li>
    <li class="item2"><a href="http://example.com">Link 2</a></li>
    <li class="item3"><a href="http://example.com">Link 3</a></li>
</ul>

이와 같은 규칙들을 사용하면 Emmet을 통해 HTML 코드를 매우 빠르게 작성할 수 있습니다.

Share on:

AWS 해커톤 후기

워드프레스 인증서