[HTML] 웹사이트 빨리 만드는 방법 : Emmet

1. 부모,자식,형제 노드

<!-- 부모, 자식, 형제 노드 -->

<!-- > : 부모 노드 -->
<!-- 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 : li의 부모태그인 ul에 +하고 싶을 떄 -->
<div>
    <ul>
        <li></li>
    </ul>
    <ol></ol>
</div>

 

2. 그룹화 하기

<!-- () : 그룹화하기 -->
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</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>

 

3. 텍스트 입력하기

<!--  {} : 텍스트 입력하기 -->
<!-- p{hello} -->
<p>hello</p>

 

4. 자동 번호 넣기

<!--{$}-->
<!--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>

 

5. 더미용 텍스트 생성

<!--p>lorem-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur assumenda aut beatae ea earum facere fugiat id
  incidunt labore minima molestias nihil nisi officia officiis, quia repudiandae unde veritatis vero?</p>

<!--p>lorem4 : 4단어만 생성해라-->
<p>Lorem ipsum dolor sit.</p>