1초만에 Emmet으로 HTML 기본 구조 생성하기!

안녕하세요. WooJi입니다.
무더운 날씨에 쉽게 지치는 요즘입니다.

오늘은 마크업 언어 작성을 획기적으로 개선해 주는 도구, 에밋(Emmet)에 대해 알아보겠습니다.

에밋의 정의

• 에밋은 코드 편집기에서 사용할 수 있는 강력한 도구로, HTML, CSS 등의 마크업 언어 코드를 빠르게 작성할 수 있게 해 줍니다.
• 에밋은 약어와 축약어를 사용하여 복잡한 코드를 간단한 문법으로 표현할 수 있게 해주는 플러그인 또는 확장 기능입니다.

에밋의 작동 원리

• 에밋은 약어와 축약어를 사용하여 복잡한 코드를 간단한 문법으로 표현할 수 있게 해 줍니다. 에밋 문법을 통해 입력한 내용은 실제 HTML/CSS 코드로 변환되어 적용됩니다.

에밋의 장점

에밋을 사용하면 다음과 같은 장점을 누릴 수 있습니다:

1. 생산성 향상: 반복적인 코드 작성 작업을 크게 줄일 수 있어 개발 속도가 빨라집니다.
2. 코드 가독성 향상: 간단한 약어로 복잡한 코드를 표현할 수 있어 코드 가독성이 높아집니다.
3. 편의성: 코드 편집기에 기본 탑재되어 쉽게 활용할 수 있습니다.

에밋의 확장성

에밋은 다양한 코드 편집기에서 사용 가능하며, 사용자 정의 약어 및 스니펫 생성도 가능합니다.

비주얼 스튜디오 코드에서의 에밋

비주얼 스튜디오 코드에서는 기본적으로 에밋이 지원됩니다.
새로운 HTML 파일을 생성하고! 탭을 누르면 에밋이 자동으로 기본 HTML 구조를 생성해 줍니다.

너무 편하죠!!

html:5 작성하고 엔터 눌러도 똑같이 만들어진다고 하네요.

이를 통해 빠르게 HTML 기본 구조를 만들 수 있습니다. 이후에도 에밋 약어를 사용하여 다양한 태그와 속성을 쉽게 추가할 수 있습니다.

 

사실 자료 조사를 하다 보니 HTML 기본 구조를 만들어주는 것 하나는 에밋의 기능의 맛도 본 게 아닌 것 같습니다.

더 많은 약어와 문법이 존재하지만 HTML을 공부해 나가면서 배우리라 생각합니다. 

 

아직 HTML 초보다 보니 틀린 부분이 있을 수 있습니다. 잘못되었다고 생각되는 부분이 있으면 일러주시면 다시 수정하겠습니다!

 

다음 글부터는 본격적으로 HTML을 시작해보려 합니다. 텍스트 관련 태그부터 해보려 합니다. 많은 관심 부탁드리겠습니다!