html 더 잘 활용하기(Emmet)

셀라문·2022년 3월 15일
0

HTML

목록 보기
17/17

Emmet 사이트

🧐🎈 emmet 사이트

자주 사용하는 Emmet

div 안에 div
div>div
->

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

div 안에 p, a태그 둘다 넣는다
div>p+a

<div>
  <p></p>
  <a href=""></a>
</div>

div안에 p넣고 밖에 div
div>p^div

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

ul태그 안에 li태그 4개 넣기
ul>li*4

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

a태그를 포함한 li태그 4개를 ul에 넣기
ul>(li>a)*4

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

태그 넣으면서 클래스명 바로 넣기
div.division

<div class="division"></div>

클래스명 1234로 한번에 넣고 싶을때
div.item$*4

<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>

태그 넣으면서 id 바로 넣기
div#content

<div id="content"></div>

img 태그 넣을때 alt바로 설정하기
img[alt="이미지설정"]

<img src="" alt="이미지설정">

profile
취미로 하는 공부기록장

0개의 댓글