[html] emmet을 사용하여 빠르게 태그 작성하기

서론

emmet 플러그인을 이용하면 html을 빠르게 작성할수 있다.

보통 우리가 사용하는 왠만한 에디어테에는 emmet이 내장되어 있다.

emmet을 기본 사용법은 키워드를 입력하면 추천에 뜨는 emet을 탭으로 선택해서 완성한다.

앞으로 나오는 모든 키워드를 작성하고 탭을 누르면 자동으로 완성해준다.

e.x) div + tab → <div></div>

html 양식작성

! + tap키

태그에 아이디 or 클래스 넣기

div.클래스명

div#아이디명

<!-- 또는 -->

.클래스명

#아이디명

div는 가장 기본적인 아이이기 때문에 태그를 생략하고 작성하면 div로 생성된다.

부모, 자식 >

부모 > 자식

<!-- 입력 -->
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>

텍스트 입력하기 : {}

<!-- 입력 -->
p{hello}

<!-- 결과 -->
<p>hello</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

lorem은 하나의 태그라고 생각하면서 작성하자.

p{lorem} 이라고 작성하면 안된다.

<!-- 입력 -->
p>lorem

<!-- 결과 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit tempora soluta perspiciatis culpa esse! Nobis pariatur est esse vel similique nihil minus maiores quos, sequi provident illo? Dolores, reiciendis earum.</p>

• 단어의 갯수를 조절할 수 있다

<!-- 입력 -->
p>lorem4

<!-- 결과 -->
<p>Lorem ipsum dolor sit</p>