[HTML] Emmet으로 태그 편하게 작성하기

Emmet

HTML과 CSS를 더 빠르고 효율적으로 작성할 수 있도록 도와주는 약어 기반의 확장 기능으로 다양한 코드 에디터와 IDE에서 지원된다. 간단한 구문을 사용하여 복잡한 HTML 및 CSS 코드를 생성하는 데 도움을 준다.

! // tab => html 기본 틀

클래스

• div.class // tab

ID

• div#id // tab

div

• div는 생략해도 된다 (ex : .class//tab)

자식

• div>ul>li // tab

형제

• div>ul+ol // tab
  ul, ol 형제로 들어감

여러 개 만들기

• div>ul>li*5 // tab
  li가 5개 생김

자식 후 형제

• div>ul>li^ol // tab
  ul, ol 형제로 들어감

그룹화
-div>(header>ul>li*2>a)+footer>p // tab

태그안에 텍스트 넣기

• p{hello} // tab

자동 번호 넣기

• p.class${item $}*5 // tab

더미용 텍스트 형성

• p>lorem

4개의 단어만 형성

• p>lorem4