본문 바로가기
coding/editor

[vs code] 비주얼 스튜디오 코드 html 자동완성 해보자

by 씸플레이 2020. 11. 21.
728x90
반응형

안녕하세요. 개자이너 씸플레이입니다.

html 기본 구조를 자동완성으로 불러와보겠습니다.


1. 새 index.html 파일

vs code 화면

여기 아무것도 안 쓴 index.html 파일이 있습니다. 이제 본격적으로 코딩을 시작해 볼까 하는데 초보자라면 아직은 어색한 기본 구조가 갑자기 잘 떠오르지 않을 것이고, 경험자라면 사실 매번 같은 코드를 적는 것도 귀찮습니다. 이럴 때 에디터 프로그램의 유용함이 빛을 발휘합니다. html 자동완성을 이용해 봅시다.


2. ! + Tab

!를 입력했을 때 화면

!(느낌표)를 누르면 아래로 뭔가 잔뜩 뜨는데 신경 쓰지 마시고 Tab키를 눌러줍니다.

 

html 자동완성

html5 기본 구조가 자동완성으로 입력되는 것을 볼 수 있습니다. 얼마나 편한지 감동이 다 몰려옵니다. 반응형 작업에 필요한 뷰포트(viewport)도 잊지 않고 챙겨줘서 좋습니다.


3. 수정할 부분

언어 설정

그대로 사용해도 좋긴 하지만 기본 언어가 en. 즉, 영어로 되어있습니다. 여기를 ko로 바꿔서 한국어로 바꿔주시고 사용하시면 오류를 조금 덜 수 있습니다.

 

320x100

 

한글로 바꾼 모습

ko를 입력해 언어를 한글로 바꿔준 다음 <body> 태그 안쪽에서 본격적인 코딩을 시작하면 됩니다. 코딩을 하다가 나중에 필요한 부분을 하나씩 추가해주시면 됩니다.


그럼 이만.

총총.

반응형

댓글14