Emmet?
Emmet은 HTML과 CSS의 작성의 시간을 아주 빠르게 단축 시켜주는 확장기능이다.
향후 오래 코딩할 나의 미래 손목건강🤲과 효율적인 마크업를 위해 Emmet을 사용하자.
사용법은 입력하고 키보드 Tab키를 누르면 끝!
HTML
HTML 표준DTD문서 !
! 입력 후 Tab키
간단하고 빠르게 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>자식노드 >
div>ul>li 입력 후 Tab키
>를 사용하여 자식 요소를 생성할 수 있다
<div>
<ul>
<li></li>
</ul>
</div>형제노드 +
div>ul+ol+div 입력 후 Tab키
+를 사용하여 한 요소와 같은 단계에 위치한 요소를 생성할 수 있다
<div>
<ul></ul>
<ol></ol>
<div></div>
</div>반복하기 *
div>li*3 입력 후 Tab키
>를 사용하여 한 단계 위에 요소를 배치할 수 있다.
<div>
<li></li>
<li></li>
<li></li>
</div>그룹화 ()
div>(header>ul>li*2>a)+footer 입력 후 Tab키
()를 사용하여 괄호안에 있는 코드를 묶어 그룹화를 시켜준다.
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer></footer>
</div>div>header>ul>li*2>a+footer 입력 후 Tab키
그룹화 하지 않았을때 와는 다른 코드가 되니 주의하자.
<div>
<header>
<ul>
<li>
<a href=""></a>
<footer></footer>
</li>
<li>
<a href=""></a>
<footer></footer>
</li>
</ul>
</header>
</div>클래스 부여 .
.item 입력 후 Tab키
CSS의 클래스 선택자를 사용한다고 하면 간단하다.
기본 default값은 div라서 div.item이 아닌 .item으로 생략이 가능하다
<div class="item"></div>p.item 입력 후 Tab키
만약 p태그에 클래스를 주고 싶다면 이렇게 하면된다.
<p class="item"></p> 아이디
#item 입력 후 Tab키
동일하게 CSS의 아이디 선택자를 줄때 사용 가능하다.
<div id="item"></div>텍스트 입력 {}
p.container{item} 입력 후 Tab키
p태그안에 item이라는 텍스트가 입력된다.
<p class="container">item</p>자동 넘버링 부여 $
p.container{item$}*5 입력 후 Tab키
$값에 숫자가 입력된다.
<p class="container">item1</p>
<p class="container">item2</p>
<p class="container">item3</p>
<p class="container">item4</p>
<p class="container">item5</p>#page>#nav>ul>li.item{hello$}*5+dl^dd 입력 후 Tab키
<div id="page">
<div id="nav">
<ul>
<li class="item">hello1</li>
<li class="item">hello2</li>
<li class="item">hello3</li>
<li class="item">hello4</li>
<li class="item">hello5</li>
<dl></dl>
</ul>
<dd></dd>
</div>
</div>응용하자면 이렇게 손쉽고 빠르게 마크업이 가능하다.
CSS
width,heigt
.item{h100+w100} 입력 후 Tab
.item{ height: 100px;
width: 100px; }기본값은 px단위이며 단위를 교체하는것도 가능하다.
- 기본값 → px
p → %
e → em
x → ex
r → rem
margin, padding
.item{m100p+p100e} 입력 후 Tab
.item{ margin: 100%;
padding: 100em; }등등..
.item {c#111111} 입력 후 Tab
.item { color: #111111;} .item {fsz13} 입력 후 Tab
.item { font-size: 13px;}폰트색상과 사이즈등 다양한 기능이 많으니, 공식사이트에 예제들을 보면서 익히면 유용하게 사용 가능하다.
감사합니다~!