HTML Emmet 정리
자주 사용하는 html emmet을 정리하였다.
이 외의 다른 Emmet이나 자세한 정보는 https://emmet.io/ 에서 확인할 수 있다.
Emmet은 예전에는 Zen Coding이라고 불려졌고 플러그인 형태로 설치를 하여 사용하였지만
지금은 대부분의 텍스트 에디터에 기본적으로 탑재되어있다.
jsbin.com과 같은 테스트용 사이트에서도 사용 가능하다.
본 내용은 Youtube 드림코딩엘리님의 강의를 토대로 정리하였다.
목차
- HTML 양식
- !
- 기본 태그
- div.
- div.classname 혹은 .classname
- div#
- div#idname 혹은 #idname
- 노드
- > 부모자식 노드
- + 형제 노드
- * 노드 여러개
- ^ 노드 작성 중 노드 수정하고 싶을 때
- ( ) 그룹화 하기
- 기타
- { } 태그 안에 텍스트 입력
- { } 태그 안에 텍스트 넣기
- $ 자동 숫자 할당
- lorem 더미용 텍스트
- lorem 단어 네개
1. HTML 양식
- !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>2. 기본 태그
- div.
div닷 이다... 그냥 div 아님 ㅋㅋ
<div class=""></div>- div.classname 혹은 .classname
<div class="classname"></div> - div#
<div id=""></div>- div#idname 혹은 #idname
<div id="idname"></div>.~~~ 또는 #~~~ 로 하면 기본적으로 div 태크 안에서 설정해준다.
3. 노드
- > 부모자식 노드
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>- + 형제 노드
div>ul+ol
<div>
<ul></ul>
<ol></ol>
</div>- * 노드 여러개
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>- ^ 노드 작성 중 노드 수정하고 싶을 때
div>ul>li^ol
<div>
<ul>
<li></li>
</ul>
<ol></ol>
</div>- ( ) 그룹화 하기
div>(header>ul>li*2>a)+footer>p
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>4. 기타
- { } 태그 안에 텍스트 입력
p{text}
<p>text</p>- { } 태그 안에 텍스트 넣기
p{text}
<p>text</p>- $ 자동 숫자 할당
p.class${item $}*5
<p class="class1">item 1</p>
<p class="class2">item 2</p>
<p class="class3">item 3</p>
<p class="class4">item 4</p>
<p class="class5">item 5</p>- lorem 더미용 텍스트
p>lorem
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique aliquid quae ut possimus ipsam fugiat debitis molestias consequatur eos nam excepturi, perferendis dignissimos earum adipisci beatae quibusdam esse, perspiciatis eius.</p>- lorem 단어 네개
p>lorem4
<p>Lorem ipsum dolor sit.</p>참고자료: 드림코딩 엘리 https://youtu.be/m7wsrVQsVjI
Elegant Dev