Emmet을 이용한 빠른 코드 작성하기

Emmet을 들어보았나요? Emmet은 html 코드를 축약기능을 활용하여 빠르게 작성할 수 있는 매우 유용한 기능입니다. 비주얼스튜디오코드에서는 Emmet이 내장되어 있어 바로 사용할 수 있습니다. 처음 익숙해지는데만 좀 번거롭지, 익숙해지면 엄청 빠른 속도로 코드를 생성할 수 있습니다. 

---

ChatGPT에게 Emmet 물어보기

오늘도 열일하는 ChatGPT에게 물어봅니다. 정말 똑부러지게 설명을 잘 해줍니다. 물론, 틀린 설명도 있습니다. 저는 요새 ChatGPT가 정말 잘 대답해주는지 확인하는 차원에서 활용하고 있습니다. 

ChatGPT에게 emmet를 물어본 모습

 

오픈소스 Emmet 가이드 사이트 살펴보기

다음의 사이트에서 Emmet 에서 대하여 살펴볼 수 있고, 문법도 살펴볼 수 있습니다. 

https://emmet.io/

Emmet  홈페이지

 

비록 영어지만 친절한 설명과 함께 예시코드가 있어 Emmet 사용법을 사례별로 잘 보여주고 있습니다. 

Emmet  사용방법

 

Emmet를 정리한 화면입니다. 다음의 축약코드를 통해 어떻게 빠르게 코드를 작성할 수 있는지 확인해보세요~

Emmet 예시

 

다음과 같이 div>ul>li 코드를 입력하면 아주 쉽게 코드가 완성됩니다. 와우~~~ 나머지는 여러분이 위 그림을 참고하거나, Emmet 사이트를 참고하여 연습해보시기 바랍니다.~~

Emmet 사용 예

 

오늘은 코드를 빠르게 완성하는 Emmet에 대하여 알아보았습니다. ^^