HTML Emmet

Flex·2022년 2월 27일
0

HTML 모음

목록 보기
12/13
post-thumbnail

HTML Emmet 에 대해 정리해봤습니다.
개인적으로 자주 쓰이는 것들에 한해 작성되었습니다.

🖋 HTML Emmet

HTML 문서를 작성할 때 자동완성 기능으로 문서 작성 속도를 크게 향상시켜줍니다.

  1. 자동완성 : Tab ⭐️
  2. 텍스트 : {} ⭐️
  3. 자식(하위)요소 : > ⭐️
  4. 형제 요소 : +
  5. 올라가기 : ^
  6. 반복하기 : * ⭐️
  7. 그룹화 : ()
  8. 클래스 : . ⭐️
  9. 아이디 : # ⭐️
  10. 속성 : [attr]
  11. 넘버링 : $ ⭐️

( ⭐️ 표시는 실제로 개발시 많이 사용되는 Emmet입니다. )

직접 VSCode 등의 에디터에서 테스트해보는 것을 추천드립니다!
처음에는 익숙하지 않아도, 자연스럽게 코드량이 늘다보면 금방 적응되실거에요.


< 사용 예시 >

사용 예시

< 응용 예시 >

  • <div></div> 사이에 "안녕하세요" 를 넣고싶으면 div{안녕하세요} > 엔터
  • ul>li*4 에 순서대로 "Box 숫자" 를 넣고싶으면 ul>li{Box $}*4 > 엔터
  • <img> 에 alt 속성을 부여하려면 img[alt="Image"] > 엔터

참고 사이트

🖨 Emmet Documentation - Cheat Sheet

profile
💵 오늘을 살자

0개의 댓글