본문 바로가기
Python notes/Others

VSCode) html 기본코드 띄우기, 코딩 창 아래 위로 분할 하기, 터미널 창 내부에 띄우기

by 성실한 나무 2021. 11. 21.

#0. 한동안 파이썬으로 데이터 분석만 하다가 최근에 Vue를 공부하기 시작했다.

 서너달 전 속성으로 웹 프로그래밍을 배우고, 웹페이지를 만들어 본 후, 오랜만에 비쥬얼 스튜디오 코드(VS Code)를 켰다. 파이썬은 대부분 쥬피터 랩 환경에서 코딩했기 때문이다.

여튼, 오랜만에 자바스크립트와 html, CSS를 왔다갔다 하면서 코딩하려니 손에 안 익고, 기능이 잘 생각이 안 나서 애를 먹었다. 해서 몇가지 자주 사용할 만한 기본 기능들을 메모해 놓으려고 한다.

 

 

#1. HTML 기본코드 띄우기: html:5

 .html 파일을 작성할 때마다 메타 데이터, head, body, title 등 기본 태그를 일일이 입력하는 것은 시간을 많이 잡아먹는다. 다행히 비쥬얼 스튜디오 코드에는 기본 코드를 가지고 올 수 있는 기능이 있다. 파일을 .html로 저장한 후, html:5를 입력하면 아래 왼쪽과 같이 옵션 드롭목록이 뜬다. 이런 상태에서 엔터를 치면, 아래 오른쪽과 같이 기본 코드들이 입력된다. 여기에서 <body> 태그 안으로 진입해서 html 코드를 작성해 나가면 된다.

VS code, html5 기본코드 띄우기

 

 

#2. 코딩 창 아래 위로 분할 하기

 웹 프로그래밍을 하면서 주로 열어 놓는 창은 html, javascript, css 파일이다. 왔다갔다 하며 코딩하는 일이 많기 때문에 창들을 동시에 열어 놓고 코딩하는 일이 잦다. 다행히 VS code에서는 여러 창들을 다양한 방식으로 열어 놓고 코딩할 수 있는 기능이 있다. 왼쪽 오른쪽으로 창을 열어 놓을 수도 있고, 아래 위로도 가능하다. 아래 (1)번의 버튼을 누르면 기본적으로는 오른쪽으로 새로운 창들이 붙는다. 그런데 내 경우에는 아래 위로 창을 놓고 보는 게 편해서 아래 위로 놓고 싶어서 한참 헤맸다 ^^;

 아래 위로 코딩창을 분할하기 위해서는 아래 (2)번 버튼을 누르면 되는데, 아래 OPEN EDITORS에 뜨는 기능 버튼들은 마우스 커서를 대야 생기는 동적인 버튼들이기 때문에 주의해야 한다. 여튼 그 근처로 마우스 커서를 갖다 대고 세로 가로로 코딩 창이 그려져 있는 버튼을 클릭하면 코드 창이 아래 위로 배열되는 것을 볼 수 있다.

코딩 창 아래 위로 분할하기

 

 

#3. VS code 내부에서 터미널 여러 개 띄우기

 웹 프로그래밍할 때 개발 서버에 결과물을 띄우고 다시 수정하고 서비스 서버에 결과물을 연결하고 하는 작업을 하려면, 터미널 접속이 필요하다. (윈도우의 경우, 명령 프롬프트, 맥의 경우, 터미널이라고 한다) 이 과정에서 여러 터미널을 띄워놓고 하는게 편하게 느껴지는 경우가 있는데 이럴 때 VS code 내부에 코딩창 바로 아래에 여러개의 터미널을 띄우는 방법이 있다. 바로 맨 위 메뉴 표시줄에서 [터미널]을 선택하고 [뉴터미널]을 클릭하는 방법이다. 그러면 터미널 창이 코딩창 아래에 한개 뜨는데 그 뒤에 터미널을 몇개 더 열려면 아래 왼쪽에 보듯이 + 버튼을 누르면 된다. 그러면 아래 오른쪽 그림과 같이 여러 터미널이 뜨고 터미널 명이 목록으로 뜬다. 휴지통 버튼을 누르면 해당 터미널을 종료할 수도 있다. zsh이외에도 bash shell 등 여러가지 옵션을 선택할 수 있다.

VS code 내부에서 터미널 여러 개 띄우기

댓글