코딩 시간을 줄여주는 에밋(emmet)

에밋(emmet)은  여러개의 코드를 기호로 연결지어 한 줄로 생성하게 해주는 기능을 말한다.

 

에밋(Emmet)

• HTML & CSS 코등 입력을 지원하는 에디터용 확장 기능을 뜻한다.
• 기존 코드가 생략되어 효율적인 코드 작성이 가능하게 됨.
• 예) margin-bottom:100px; ⇒mb100; 입력 후 [tab] 을 누르면 자동 완성 되는 것을 볼 수있다.

에밋(Emmet)이 탑재된 에디터

• VScode (비주얼 스튜디오 코드)
• Adobe Dreamweaver(어도비 드림위버)

확장기능으로 에밋(emmet) 추가가 가능한 에디터

• Atom(아톰)
• Brackets(브래킷)
• Sublime Text(서브라임 텍스트)

 

HTML 에밋(emmet) 사용법

emmet 사용설명서

기호는 "div ." 또는 "div   >" 와 같이 띄어쓰면 안되며 무조건 붙여 써주어야 한다.

 

반응형

 

예시) 오른쪽의 Emmet Abbreviation 박스는 생성시 만들어지는 모습을 미리 보여준다.

emmet으로 ul 리스트 생성

 

CSS 에밋(emmet) 사용법

HTML보다 에밋을 사용하기 살짝 번거롭지만 자주 사용하는 것들만 기억해 둔다면 매우 편하다.

 

자주쓰는 css 에밋 예시

css 에밋 예시

몇 가지 예를 들자면

w100 -> width:100px; 로 자동완성을, df - > display:flex; 가 된다.

 

단위를 써야하는 경우 (width나 height 작성시)

css 에밋 적용시 단위

 

그 외 emmet에 대해 자세히 알고 싶다면 아래 emmet 사이트 참고하시면 됩니다.

 

Cheat Sheet

 

자주쓰는 HTML 양식 저장해서 시간 절약하는 방법

 

VScode 기본 셋팅(2) - HTML snippets 설정