내숭이

이번 시간에는 Visual Studio Code(이하 VS Code)에서 HTML 문서를 작성하는 방법에 대해 살펴보도록 하겠습니다. 이전글을 진행 한 후 따라오시면 더 원활히 진행 될 수 있습니다.

1. VS Code 실행

2. 작업할 폴더 열기

3. New File 메뉴 선택 > 파일명.html 입력

4. 코드 작성하기

 - VS Code는 코드 입력의 편의를 돕기 위해 자동 완성 기능을 제공합니다.

 - 지정된 이름이나 태그 이름을 입력하면 선택 가능한 단어들을 제시하고 태그를 선택하면 태그의 기본 형태가 자동완성됩니다.

 - 예시 화면

Visual Studio Code(현재 1.34.0버전, 이후 VS Code로 표기)에서 라이브 서버를 설정하는 방법에 대해 살펴보자.

라이브 서버를 이용하면 파일 수정 후 저장하면 수정된 내용이 바로 저장된다.

1. 라이브 서버 설치하기

2. 라이브서버 테스트하기

1. 라이브 서버 설치하기

• VS Code 실행 후 파일 > 기본설정 > 확장 메뉴를 클릭한다.

• 또는 단축키로 Ctrl + Shift + X를 같이 누른다.

• 검색창에서 live server를 검색 후 설치버튼을 클릭한다.

2. 라이브 서버 테스트하기

• 왼쪽 상단에 탐색기 아이콘 클릭하여 확장 메뉴 제거한다.

• 탐색기에서 폴더 열기를 클릭하여 열 폴더를 지정한다.

• 새파일 아이콘을 클릭 후 파일명에 test.html을 입력하여 html 파일을 생성한다.

• 좌측 코드 탭에서 html:5를 입력하면 자동완성이 되는데 엔터를 쳐서 기본 코드를 생성한다.

• 좌측 코드 탭을 우클릭한 후 Open with Live Server 메뉴를 클릭한다.

• 또는 단축키로 Alt + L 입력 후 Alt + O를 누른다.

• 실행결과

도움이 되셨다면 광고 클릭!

 Visual Studio Code(현재 1.34.0버전)에서 파일의 탭 간격 설정하는 방법에 대해 살펴보자. 

1. 이미 생성된 파일에서 탭 간격 설정하기
2. Visual Studio Code 기본 탭간격 설정 및 파일 들여쓰기를 Tab Size로 변경하기

 1. 이미 생성된 파일에서 탭 간격 설정하기

 Visual Studio Code로 파일을 연 후 우측 하단에 Spaces:숫자 또는 Tab Size:숫자로 된 부분(아래 이미지의 빨간 부분)을 클릭한다.

 다음 화면에서 들여쓰기를 탭으로 처리할지 공백으로 처리할 지 선택한다.(Indent Using Spaces 또는 Indent Using Tabs 선택)

 선택한 들여쓰기의 간격을 선택한다. 기본 4로 되어 있다.

 선택이 완료되면 처음 Spaces:4로 되어 있던 부분이 Tab Size:2로 변경된 것을 확인 할 수 있다.

2. Visual Studio Code 기본 탭간격 설정 및 파일 들여쓰기를 Tab Size로 변경하기

 메뉴에서 File > Preferences > Settings 클릭한다.

 Editor: Tab Size에서 원하는 크기 입력한다.

 기본 들여쓰기를 공백으로 한다면 Editor: Insert Spaces 부분을 체크, 탭으로 한다면 체크를 해제한다. Settings 파일이 수정되면 자동 저장이 된다.

 Settings를 종료하고 파일을 생성 후 확인하면 들여쓰기가 설정한 값으로 변경된 것을 확인 할 수 있다.

도움이 되셨다면 광고 클릭!