VS code 태그 자동완성 (Emmet)

in_coding·2023년 7월 24일
0

HTML/CSS

목록 보기
2/9

>

자식 요소 생성

ol>li>ul>li

    <ol>
        <li>
            <ul>
                <li></li>
            </ul>
        </li>
    </ol>

+

형제 요소 생성

header+aside+main+footer

<header></header>
<aside></aside>
<main></main>
<footer></footer>

*

동일 요소 중복 생성

div*4

<div></div>
<div></div>
<div></div>
<div></div>

.

클래스명 지정

div.first

<div class="first"></div>

#

id명 지정

div#first

<div id="first"></div>

$

자동 넘버링 생성

div#id$*4

<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
<div id="id4"></div>

[]

속성 설정 생성

img[src="aa$.png" alt="image$"]*5

<img src="aa1.png" alt="image1">
<img src="aa2.png" alt="image2">
<img src="aa3.png" alt="image3">
<img src="aa4.png" alt="image4">
<img src="aa5.png" alt="image5">


section>article*20>div>img[src="img/p$.jpg"]+h2>lorem3^p>lorem7

⇒ section 태그 안에
20개의 article 자식(>) 태그,
안에 div 자식(>) 태그,
안에 p1~p20(p$) 이름의 속성([ ])을 가지는 이미지 태그
그리고 형제요소 h2
내부(>)에 3단어 랜덤문장(lorem3) 그 뒤엔
상위 요소(^)인 p 태그
내부(>)에 7단어 랜덤문장(lorem7)
생성

profile
내가 이해하려고 정리 중

0개의 댓글