본문 바로가기
카테고리 없음

vs code 에서 html5 기본코드 에멧기능 자동코드완성 방법

by 홀릭쇼 2022. 11. 22.
728x90
반응형

vs code 에서 html5 기본코드 엣밋기능 자동코드완성 사용방법

 

vs code 에서 자동으로 코드를 입력해주는 기능이 있습니다. 

Emmet 기능으로 에멧이라고 부를께요. 

 

이 기능을 이용하면 

반복되는 코드 입력을 줄이고 시간을 절약 할 수 있어요. 

 

그럼 순서대로 html5을 만들고, 

에멧 기능으로 기본 코드를 입력해 볼까요?

 

간단하게 3단계만 거치면 된답니다. 

 


첫번째 단계 

1. vs code 에서 탐색기 - 폴더를 하나 열어요. (없으면 폴더를 만드세요)

2. 새파일을 누르고 파일명과 확장자 .html 을 입력하세요. 

 

그럼 파일이 자동 생성되고, 오른쪽 화면에 파일이 자동으로 열립니다. 

vs code 에서 html5 기본코드 엣밋기능 자동코드완성 방법


두번째 단계 

1. 오른쪽에 열린 html 파일에 커서를 올려 두세요. 

2. 느낌표를 입력합니다. 

3. 하단에 표시되는 느낌표 하나 - Emmet Abbreviation 을 선택합니다. 

 

vs code 에서 html5 기본코드 엣밋기능 자동코드완성 방법


세번째 단계 

1. 이제 끝 입니다. 기본 코드가 완성 되었죠?

2. 필요한 부분만 바꾸시면 됩니다. 

 

예를 들면 메타태그- 푸터를 삽입한다던지 하는 거요.  

 

vs code 에서 html5 기본코드 엣밋기능 자동코드완성 방법

 

vs code 에서 html5 기본코드 엣밋기능 자동입력 방법

어떠셨냐요? 아주 간단하죠? 

 

vs code 는 이런 에멧 기능으로 

반복되는 코드 입력을 간략하게 줄일 수 있습니다. 

덕분에 시간도 절약되고 파일 작업도 간단해지죠. 

 

저도 공부를 해가면서 유용하게 사용하고 있습니다. 

 

오늘도 좋은 되세요! 

다음에는 또다른 에멧 기능을 살펴볼께요. 

728x90
반응형