Emmet 사용 자습서

선택기> 하위 선택기

div>ul>li

<div>
    <ul>
        <li>li>
    ul>
div>

+형제선택기

div+p+bq

<div>div>
<p>p>
<blockquote>blockquote>

^ 승급 선택기

div+div>p>span+em 

<div>div>
<div>
    <p><span>span><em>em>p>
div>

N 무게를 입력하면 N 무게를 증가할 수 있습니다

div+div>p>span+em^^^bq

<div>div>
<div>
    <p><span>span><em>em>p>
div>
<blockquote>blockquote>

연산자* 연산자

ul>li*5

<ul>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
    <li>li>
ul>

() 연산자, 대체 가능^ 선택기

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>

{} 텍스트 연산자

a{Click me}

<a href="">Click mea>

속성 조작부호CSS : ID+Class 선택기

div#header+div.page+div#footer.class1.class2.class3

<div id="header">div>
<div class="page">div>
<div id="footer" class="class1 class2 class3">div>

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3">td>

ul>li.item$*5

<ul>
    <li class="item1">li>
    <li class="item2">li>
    <li class="item3">li>
    <li class="item4">li>
    <li class="item5">li>
ul>

ul>li.item$$$*5

<ul>
    <li class="item001">li>
    <li class="item002">li>
    <li class="item003">li>
    <li class="item004">li>
    <li class="item005">li>
ul>

<--    -->
ul>li.item$@-*5

<ul>
    <li class="item5">li>
    <li class="item4">li>
    <li class="item3">li>
    <li class="item2">li>
    <li class="item1">li>
ul>
    
<-- 3    -->
ul>li.item$@3*5

<ul>
    <li class="item3">li>
    <li class="item4">li>
    <li class="item5">li>
    <li class="item6">li>
    <li class="item7">li>
ul>
    
<-- 3      -->
ul>li.item$@-3*5

<ul>
    <li class="item7">li>
    <li class="item6">li>
    <li class="item5">li>
    <li class="item4">li>
    <li class="item3">li>
ul>