Code wave

에디터에서 html 파일을 새로 생성하는 경우, 매번 html 기본 양식을 타이핑하는 건 정말 귀찮은 일이다. 물론 이 전에 작업했던 html 파일에서 복사해올 수도 있지만, 이 전 작업 파일이 없는 경우도 있고 있어도 작업된 부분은 지워야 해서 어차피 손이 가야 한다. 이럴 때 자동으로 html 기본 양식을 세팅해주는 기능이 있다.

1. html 기본 양식 세팅 방법 1

1) 새 html 파일을 생성한다.

2) 하단에서 언어모드가 'HTML'인지 확인한다.

3) 빈 html에 !(느낌표)를 입력한다.

3) Tab 키를 눌러주면 html 기본 양식이 세팅된다.

2. html 기본 양식 세팅 방법 2

1) 빈 html 화면에 'html'이라고 입력한 후, 아래와 같은 말풍선이 뜨면 'html:5'를 클릭한다.

2) html 기본 양식 세팅 완료

에디터를 사용할 때 라이브 서버를 사용할 경우 코드가 수정될 때마다 바로바로 업데이트된 화면으로 확인할 수 있다. 작업 시 굉장히 편하기 때문에 기본적으로 설정하는 기능 중 하나이다. VS Code 라이브 서버 설정을 위해 extensions 설치하는 방법에 대해 알아보자.

1. VS Code 라이브 서버 설치하기

1) VS Code를 실행해준다.

2) MAC: 상단 메뉴> Code> 기본 설정> 확장 (WIN: 메뉴> 파일> 기본 설정)으로 들어간다.
또는, 단축키 MAC: shift+command+x, (WIN: Ctrl+Shift+x)를 사용하여 들어간다.

3) 검색창에 'live server'를 검색한 후 설치한다.

2. VS Code 라이브 서버 실행하기

1) 라이브 서버를 실행할 html 파일을 열어둔다.

2) 해당 html 파일을 마우스 우클릭한다.

3) 브라우저 창이 뜨면 실시간으로 코드를 반영되는 것을 확인한다.

비주얼 스튜디오 코드(vscode)는 기본적으로 터미널 기능을 제공한다. 우리는 여기에 코드를 입력하여 원하는 것을 실행한다. 그런데 코드 입력이 실행으로 이어지기 위해서는 우선적으로 기능 설치가 필요하다. 아래 방법을 참고하여 터미널을 정상적으로 실행해보자.

vscode에서 터미널 실행하기

1. vscode를 실행한다.

2. View-Command Palette를 실행한다.

3. 'shell'을 입력하면 나오는 'Shell Command: Install 'code' command in PATH'를 클릭한다.

4. 셸(Shell)을 설치하기 위해 관리자 권한을 물을 것이라고 알림 창이 뜨면 'OK' 버튼을 클릭한다.

5. 맥 관리자 암호를 입력한다. (맥 부팅 시 사용하는 암호)

6. 성공적으로 설치되었다고 알림 창이 뜬다.

7. 단축키[control+`]를 눌러 터미널 창을 열고, 코드를 입력하여 사용해본다.