Emmet을 이용한 CSS, HTML 태그 손쉽게 작성하기

자동완성 가이드에 보이는 Emmet

Publising 연습시 HTML, css 작성할 일이 많은데요, 이때 Emmet 기능을 통해 빠르게 자동완성 할 수 있습니다.

Visual Studio Code에서는 Emmet이 내장되어 있습니다.

긴 설명없이 간략하게 필요한 부분만 보여드리겠습니다.

 

CSS

약어를 통한 자동완성

 

Emmet 자동완성

기본적으로 정의되는 속성값이 들어가며 여러 값이 존재하는 경우 탭으로 이동해서 편집하시면 됩니다.

'-'이 포함된 속성

'-'으로 구분된 속성

보통은 '-'으로 구분된 단어의 첫 글자를 조합해서 약어를 사용합니다.

font-size는 fz를 사용하는 군요.

또한 크기 속성은 숫자를 적으면 px이 붙여서 완성됩니다.

 

HTML 태그

HTML 시작

html:5

클래스 자동완성

class 포함 태그

자식 요소 추가

자식 요소 추가

이상으로 설명은 마치겠습니다. 어떤가요? 편할것 같나요?

Emmet을 활용하여 편리하게 코딩하시기 바랍니다.

 

ps.

Emmet에 약어들을 모아놓은 Cheet Sheet 사이트가 있는데요. 여러 활용방법을 볼 수 있습니다.

https://docs.emmet.io/cheat-sheet/

Cheat Sheet