Emmet Magic Frontend 개발자가 알아야 할 일부

마크업 생성 속도를 크게 높여주는 유용한 Emmet 명령의 몇 가지 예를 공유하고 싶습니다.

이전에 Emmet에 대해 들어본 적이 없다면 의 이것을 참조하십시오. Emmet은 기본적으로 대부분의 코드 편집기에 통합되어 있으므로 내부적으로는 Emmet인지 모른 채 지금 사용하고 있을 수 있습니다 😅. VS 코드에서 예를 들어. Emmet 약어를 입력하고 TAB을 눌러 마크업을 생성하기만 하면 됩니다.

문서 작성

doc

전체 doctype을 직접 작성할 필요가 없습니다. 각 HTML 파일은 간단히 doc를 입력하고 TAB 키를 눌러 시작할 수 있습니다.

테이블 생성

table>#row$*3>[colspan=2]

Emmet은 여기에 암시적 태그 이름(예: tr 및 td )을 삽입하고 단순히 요소를 곱하고 현재 반복 번호를 적용할 수 있습니다. $ 기호가 있는 요소 ID.

양식 작성

form:post>(select>opt[value=$]{#$$}*4)+btn:s

또한 입력해야 하는 문자의 수를 크게 줄이는 많은 별칭이 있습니다. btn:s 대신 button[type=submit] . 또한 여러 개의 기호$로 선행 0을 강제로 표시할 수 있습니다.

일반 콘텐츠

ul.generic>lorem6.item*5

HTML 레이아웃 데모를 만든 경우에는 lorem 약어와 문장을 구성해야 하는 단어 수가 뒤에 오는 것이 매우 편리합니다.

보너스: VS Code의 줄바꿈

처음부터 새로 만들지 않고 기존 마크업을 변경하는 경우(거의 항상 그럴 수 있음) VS Code의 Emmet: Wrap with Abbreviation 명령을 사용할 수 있습니다. 여기에서 일부 콘텐츠를 선택하고 Emmet 구문을 사용하여 원하는 태그로 래핑할 수 있습니다.



추가: 이 기능에 대한 키보드 단축키를 설정하면 많은 시간이 절약됩니다! 내 Windows 컴퓨터에서 CTRL+ALT+E를 구성했습니다.

마무리

우리는 마크업 생성 프로세스를 가속화하는 많은 약어가 있음을 확인했습니다. 이것은 손으로 많은 마크업을 생성할 때 특히 유용합니다.

자세한 내용은 Emmet Cheat Sheet을 확인하십시오. 즐거운 코딩하세요!


게시일: 2020년 7월 20일