Emmet
HTML 문서는 우리가 출력하고자 하는 문장들을 태그로 감싸져 있습니다. 코드를 작성할때 태그와 문장을 같이 타이핑하여 입력하는 것은 약간 불편합니다. 우리는 코드 편집기의 도움을 통하여 보다 쉽게 HTML 코드를 작성할 수 있는 emmet 기능에 대해서 알아 봅니다.
Emmet 이란?
html 코드를 쉽게 작성할 수 있도록 emmit
을 알아 봅니다. 에밋
이라고 읽습니다.
zencode
스타일 시스틀 빠르게 작서을 할 수 있는 zen coding
방법이 있습니다.
vscode에서 지원을 합니다.
붙여쓰기
코드를 작성할때에는 뛰어쓰기 없이 작성을 합니다.
VSCode의 확장기능
우리가 코드 편집기로 VScode
를 선택하는 이유는 기본적으로 emmet 기능이 지원되기 때문입니다.
emmet 기능로 html 코드를 쉽게고 빠르게 작성을 할 수 있습니다.
emmet 실습
vscode에서 비어있는 파일에서 html
을 입력합니다.
다음과 같이 vscode에서 html에 대한 emmet에 대한 표시가 나타나는 것을 확인 할 수 있습니다.
html5를 선택하고 키보드의 엔터
를 입력합니다.
기본적인 html5의 구조 코드를 자동으로 작성을 해주게 됩니다.
html 표준 구조 작성
문서 상단에서 !
+tab
을 선택합니다.
자식노드 >
자식의 노드를 같이 작성할 때에는 >
를 이어서 작성을 합니다.
형제노드
형제노드를 같이 작성을 할때에는 +
기호를 같이 사용합니다.
div>ul>li+ol
반복설정
*
를 통하여 여러 테그를 반복하여 작성
id 테그
이름+# +tab
클래스 테그
.
을 이용합니다.
p.container + 'tab'