[day-31] emmet 문법

emmet 문법?

HTML, CSS, XML, XSL 등의 마크업 언어 작업을 빠르게 진행하도록 도와주는 플러그인(단축어)이다. CSS 선택자와 유사하며, 복잡한 HTML 구조를 간단한 표현으로 작성할 수 있다.

기호

> : 자식 요소를 생성합니다.
+ : 형제 요소를 생성합니다.
# : id 속성을 지정합니다.
. : class 속성을 지정합니다.
* : 요소를 반복합니다.
{} : 요소의 텍스트를 지정합니다.
$ : 반복되는 항목의 번호를 삽입합니다.

자주 사용되는 문법

• h1 : <h1></h1>
• h1{hello} : <h1>hello</h1>
• h1{hello}+p{world}

<h1>hello</h1>
<p>world</p>

• table>tr>td+td+td^tr>td*3 == table>(tr>td*3)*2 == table>tr>td*3^tr>td*3

        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>

• div>div>div+p^code

        <div>
            <div>
                <div></div>
                <p></p>
            </div>
            <code></code>
        </div>

• lorem : 더미 텍스트 생성
• lorem10 : 10개 단어 더미 생성
• lorem*10 : 10개 문장 더미 생성
• .class1 : <div class="class1"></div>
• .class1.class2.class3

<div class="class1 class2 class3"></div>

• #one.class1.class2

<div id="one" class="class1 class2"></div>

빈도가 약함

• p[data='1']

<p data="1"></p>

• h${hello}*6

        <h1>hello</h1>
        <h2>hello</h2>
        <h3>hello</h3>
        <h4>hello</h4>
        <h5>hello</h5>
        <h6>hello</h6>

• p.className${hello}*6

        <p class="className1">hello</p>
        <p class="className2">hello</p>
        <p class="className3">hello</p>
        <p class="className4">hello</p>
        <p class="className5">hello</p>
        <p class="className6">hello</p>

• input:time

<input type="time" name="" id="">

• bq : <blockquote></blockquote>