[HTML] Emmet | 타이핑시간을 겁나 줄여보자
- 프론트
- 2024. 7. 3.
Emmet
에밋은 HTML과 CSS 작성을 빠르게 할 수 있도록 도와주는 도구이다. 현재는 기본적으로 VS Code등 다양한 편집기에서 에밋을 지원하고있다.
HTML 자동 완성
우선 `<html>` 태그를 에밋으로 생성해보자. 2가지 방법으로 생성이 가능한데 ! 혹은 html:5 를 입력하고 `tab` 키나 `enter`를 눌러주면 된다.
HTML 기본 태그 생성하기
자식 태그 >
> 기호로 자식이라는 것을 명시해주기만 하면 하위 태그가 생긴다. (div 하위에 ul 하위에 ui를 만들어라)
형제 태그 +
div>h1+p<div>
<h1></h1>
<p></p>
</div>
다시 올라가기 ^
div>ul>li^ol<div>
<ul>
<li></li>
</ul>
<ol></ol>
</div>
반복 *
ul>li*5<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
그룹화
div>(header>ul>li)+footer>p<div>
<header>
<ul>
<li></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>(header ~ li)까지 그룹으로 묶어주고 footer와 header를 형제 요소로 만들어준다.
HTML 속성 추가하기
.class
div.class<div class="class"></div>
#id
div>#id<div id="id"></div>
{텍스트}
p{hello}<p>hello</p>
{숫자}
p.class$*5<p class="class1"></p>
<p class="class2"></p>
<p class="class3"></p>
<p class="class4"></p>
<p class="class5"></p>class명에 순서대로 숫자가 붙는다.
p.class${hi $}*5<p class="class1">hi 1</p>
<p class="class2">hi 2</p>
<p class="class3">hi 3</p>
<p class="class4">hi 4</p>
<p class="class5">hi 5</p>텍스트에도 적용 가능
[속성]
p[style="color: red"]<p style="color: red"></p>
'프론트' 카테고리의 다른 글
| [Supabase 반환 타입 지정] #TypeScript (0) | 2024.10.18 |
|---|---|
| [img] alt 속성 #SEO (0) | 2024.10.07 |