Notice
Recent Posts
Recent Comments
Link
«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Tags
more
Archives
Today
Total
관리 메뉴

ssjeu_

[HTML] Emmet Abbreviation 사용법 본문

HTML · CSS

[HTML] Emmet Abbreviation 사용법

ssjeu 2023. 4. 20. 13:05

Emmet 이란?

강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인

Emmet 문법

1. 요소(Elements) 생성

- 생성하려는 요소의 이름 입력 후 Tab을 누르면 태그가 자동 생성된다.

html:5[tab]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

- Emmet에는 미리 정해진 태그 이름이 없기에 아무 이름으로나 태그를 생성 가능

helloworld[tab]
<helloworld></helloworld>

2. 구조화 하기 (Nesting operators)

- 요소들의 구조를 간편히 생성 가능하다.

  • 자식 요소: > 를 사용하여 생성
div>ul>li
<div>
    <ul>
        <li></li>
    <ul>
<div>
  • 형제 요소: + 를 사용하여 생성
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>

3.한 단계 올리기

- ^ 를 사용하여 한 단계 위에 요소 배치

div+div>p>span+em^bq
<div></div>
<div>
    <p>
        <span></span>
        <em></em>
    </p>
    <blockquote></blockquote>
</div>

4. 반복하기

- * 를 사용하여 원하는 만큼 출력

ul>li*5

 

Emmet Documents 공식 문서

https://docs.emmet.io/abbreviations/

저작자표시 비영리 동일조건

'HTML · CSS' 카테고리의 다른 글

[CSS] 반응형 웹 레이아웃 분류 (Responsive Web Classification)  (0) 2023.04.17
'HTML · CSS' Related Articles more