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'