Emmet
HTML 문서는 우리가 출력하고자 하는 문장들을 태그로 감싸져 있습니다. 코드를 작성할때 태그와 문장을 같이 타이핑하여 입력하는 것은 약간 불편합니다.
우리는 코드 편집기의 도움을 통하여 보다 쉽게 HTML 코드를 작성할 수 있는 emmet 기능에 대해서 알아 봅니다.
Emmet 이란?
html 코드를 쉽게 작성할 수 있도록 emmit을 알아 봅니다. 에밋 이라고 읽습니다.
Emmet은 개발자가 코드를 더 빠르고 효율적으로 작성할 수 있도록 HTML, CSS 및 기타 웹 코드를 작성하기 위한 속기 구문입니다. 일반 HTML 또는 CSS 코드 패턴에 대한 약어 또는 바로 가기를 사용하며 키 입력 한 번으로 전체 코드로 확장할 수 있습니다.
예를 들어 웹 페이지의 전체 HTML 구조를 입력하는 대신 Emmet을 사용하면 개발자가 html>head>title+body와 같은 짧은 약어를 작성할 수 있으며 이는 기본 웹 페이지의 전체 HTML 코드로 확장될 수 있습니다.
Emmet은 Visual Studio Code, Sublime Text 및 Atom을 포함하여 널리 사용되는 많은 텍스트 편집기 및 IDE(통합 개발 환경)에서 지원됩니다. 웹 개발자와 디자이너가 작업 속도를 높이고 웹 코드를 작성하고 편집하는 데 필요한 시간과 노력을 줄이기 위해 널리 사용됩니다.
zencode
스타일 시스틀 빠르게 작서을 할 수 있는 zen coding 방법이 있습니다.
vscode에서 지원을 합니다.
붙여쓰기
코드를 작성할때에는 뛰어쓰기 없이 작성을 합니다.
VSCode의 확장기능
우리가 코드 편집기로 VScode를 선택하는 이유는 기본적으로 emmet 기능이 지원되기 때문입니다.
emmet 기능로 html 코드를 쉽게고 빠르게 작성을 할 수 있습니다.
emmet 실습
vscode에서 비어있는 파일에서 html을 입력합니다.
다음과 같이 vscode에서 html에 대한 emmet에 대한 표시가 나타나는 것을 확인 할 수 있습니다.
html5를 선택하고 키보드의 엔터를 입력합니다.
기본적인 html5의 구조 코드를 자동으로 작성을 해주게 됩니다.
html 표준 구조 작성
문서 상단에서 !+tab 을 선택합니다.
자식노드 >
자식의 노드를 같이 작성할 때에는 >를 이어서 작성을 합니다.
형제노드
형제노드를 같이 작성을 할때에는 + 기호를 같이 사용합니다.
반복설정
*를 통하여 여러 테그를 반복하여 작성
id 테그
클래스 테그
.을 이용합니다.