정리해보자~~~~~~~><ㅋ
Emmet이란 ?
HTML과 CSS의 작성시간을 줄여주는 에디터 확장기능이다 :)
1. ! + tab키
html5기본 템플릿을 생성해준다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>2. 자식노드 > + tab키
자식노드로 설정해주고 싶으면 > 로 연결해준다.
<!-- div>ul>li -->
<div>
<ul>
<li></li>
</ul>
</div>3. 형제노드: + tab키
형제노드들은 +로 연결해준다
<!-- div>ul>li+p -->
<div>
<ul>
<li></li>
<p></p>
</ul>
</div>4.그룹: ()
그룹할 태그들을 () 괄호로 묶어준다.
<!-- div>(header>p)+footer -->
<div>
<header>
<p></p>
</header>
<footer></footer>
</div>5. 반복: *
반복하고싶은 태그에 * 횟수 를 붙여준다
<!-- div>ul>li*3 -->
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>6. 넘버링: $
<!-- ul>li.$$$*5 -->
<ul>
<li class="001"></li>
<li class="002"></li>
<li class="003"></li>
<li class="004"></li>
<li class="005"></li>
</ul>
<!-- ul>li.$*5 -->
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
</ul>7. 텍스트: {}
<!-- div{hello world} -->
<div>hello world</div>
<!-- div>{here's a }+a{link}+{!} -->
<div>here's a <a href="">link</a>!</div>
출처:
'Frontend > HTML' 카테고리의 다른 글
| calc()를 inline style로 쓰고싶을때 (0) | 2023.02.02 |
|---|---|
| <input> tags always return string value / input 태그는 항상 string을 리턴한다. (0) | 2023.01.29 |