Visual Studio Code💻

Physical Coach 2022. 5. 3. 14:00

Visual Studio Code 사용법
비주얼스튜디오 사용법

홈페이지
https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

첫 화면에 뜨는 Download for Windows 클릭하면 됩니다.
(Mac인 경우, Windows 대신 Mac이라고 뜹니다.)

설치후, 처음 열면 오른쪽 아래에,

(i) 언어 팩을 설치하여 표시 언어를 한국어(으)로 변경합니다. (install language pack to change the display language to Korean.)

설치 및 다시 시작 (Install and Restart)

라고 메세지가 뜹니다.
한국어 버전 사용을 희망한다면 설치하면 됩니다.

Visual Studio Code 속 기능

1. 파일 만들기

왼쪽 상단의 파일 -> 새 파일

2. 파일 저장

파일 -> 저장
*저장은 자주 쓰이므로 단축키를 기억해둡시다. windows 기준: ctrl+s

3. HTML파일로 저장하기

2번의 과정을 거쳐 저장 후, 파일 이름뒤에 .html 을 붙이면 됩니다.
*이 파일을 열면 오른쪽 하단에 여러가지 상태창중 하나(언어모드)에 HTML이라고 표시 된것을 확인 가능.
*다른 언어를 사용하고 싶다면 해당 상태창을 클릭해서 바꿀 수 있음.

4. tag 간편하게 입력하기

head+body 입력 후, Tab 누르면. 자동으로

<head></head>
<body>

</body>

생성 됨.

위와 같이 + 하면 태그 추가 가능하고,
>하면 바로 밑에 태그 추가,
*n 하면 n개만큼 갯수 추가.

ex: h1+ol>li*3 입력 후, Tab 누르면. 자동으로

<h1></h1>
<ol>
<li></li>
<li></li>
<li></li>
</ol>

생성 됨.

visual studio code가 이 파일을 html로 인식하고 있기 때문에 이런 여러가지 똑똑한 지원을 해준다.

5. 샘플 텍스트 만들기

lorem 입력 후, Tab 누르면. 자동으로

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora fugiat unde maxime, cumque ab voluptatum hic architecto necessitatibus, quisquam aut rerum totam obcaecati beatae natus similique itaque odio qui deserunt!

라는 샘플 text가 생성된다.

6. 들여쓰기

들여쓰기 하고 싶은 text 드래그 선택후, Tab누르면.
오른쪽 하단 "공백: n"이라고 표시된 상태창의 n만큼 들여쓰기 된다.
(보통 "공백:4"로 설정되어 있음)

Shift+Tab 하면 n만큼 내어쓰기 된다.

7. 주석으로 만들기

주석처리하여, 해당 부분을 컴퓨터가 해석하지 않도록 하고 싶다면,
오른쪽 상단 편집 -> 줄 주석 설정 클릭
*자주 쓰이므로 단축키를 외우자. windows 기준: ctrl+/
*다시 단축키를 실행하면 다시 돌아옵니다.

8. 찾기

오른쪽 상단 편집 -> 찾기 클릭
박스 뜨면, 그 안에 찾고싶은 문자 쓰면 된다.
해당 박스에서 왼쪽에 위치한 > 클릭하면,
바꾸기가 뜬다. 바꾸기에 입력 후,
입력창 오른쪽의 바꾸기 클릭하면 해당 위치 문자만 바뀜.
그 다음의 모두바꾸기를 클릭하면 모든 위치 문자가 바뀜.
*자주 쓰이므로 단축키를 외우자. windows 기준: ctrl+f