CODING[기초]/visual stdio 설치 및 간단 작동법
코드를 작성할 수 있는 프로그램은 여러가지가 존재하고있다.
나는 현재 퍼블리셔로 근무하고 있으며, 내가 사용하는 비쥬얼 스튜디오에 관해 간단히 설명하려고 한다.
내가 주로 사용하는 코드는 html, css, javascript, js를 이용하고 있으며,
많은 퍼블리셔 및 프론트앤드들이 비쥬얼 스튜디오를 이용하여 작업하는 것으로 알고있다.
우선 설치방법부터 알아보자.
비쥬얼 스튜디오는 우선 무료프로그램에 무료 확장앱들이 많아 많은 사람들이 사용을 하고있다.
또한, 맥이 아닌 윈도우에서도 사용이 가능하다는 장점이 있다.
https://visualstudio.microsoft.com/ko/free-developer-offers/
우선 아래의 사이트로 들어와 우측 파란색의 비쥬얼 스튜디오를 자신의 컴퓨터 사양에 맞추어 다운로드 해주자.
간단하게 설치를 끝마쳤으며 바로 작동 방법부터 알아보겠다.
나는 작업물이 있어서 아래 많은 파일들이 있지만, 처음 연 경우 아무것도 없는 상태에 열려있는 편집기만 있을것이다.
간단하게 설명을 하기위해 모두 열려있는 상태를 가지고 왔다.
우선 왼쪽의 아이콘 메뉴들은 대지, 앱, 설정 등 다양한 환경을 구축할 수 있다.
자세한 사항은 아래에서 설명하겠다.
그 다음으로 탐색기쪽으로 넘어오자.
내가 작업하고있는 프로그램들의 목차(카테고리)라고 생각하자.
한번 띄워놓으면 없어지지않고 계속 나타나있으니, 필요할때마다 이곳에서 꺼내어 작업이 가능한다.
위쪽에는 웹사이트처럼 열려있는 코드들이다.
처음에는 html에 모두 작업하지만 용량이 많아질수록 html,css,js를 분리하여 구성해두고
동시에 작업을 해야하는 경우가 많아질것이다.
너무 많을 경우 찾기가 힘드니 작업이 끝난 파일들은 빠르게 닫아주자.
추후 사용이 필요하면 왼쪽 탐색기에서 꺼내어 사용하면 된다.
우측 상단의 아이콘들은 비쥬얼 스튜디오를 커스텀(분할)하여 작업이 가능하다.
현 코드 상황을 실시간으로 분석도 가능하고, 터미널을 켜서 코드를 디버깅하거나 작동이 잘 되는지 확인이 가능하다.
아래쪽에도 아이콘들이 있는데 html에서 go live를 클릭하면 사용하는 웹(크롬/웨일/사파리 등)에서
현재 내가 작업한 작업물들을 실시간으로 볼 수 있다.
위에서 말한 실시간 분석보다 정확도가 높은편이라 나는 주로 go live를 사용하여
현 사이트의 코드를 확인하고 반응형, 모바일용까지 한번에 체크하는 편이다.
이제 간단히 카테고리를 생성해보자.
나는 지금 맥을 이용하고 있으므로 상단의 파일 > 폴더열기를 이용하여 폴더를 열어준다.
처음 작업하는 경우 폴더가 없으므로 그냥 원하는 위치(배경화면 등)에 폴더를 만들어주자.
나는 테스트용 폴더를 하나 생성하려고 한다.
혹은 기존의 폴더를 클릭하여 아래 열기버튼을 눌러주자.
이렇게 테스트 화면의 폴더 속으로 우리는 진입을 했다.
확인 방법은 왼쪽 카테고리에 열려있는 편집기 아래에 폴더명이 나온다면 잘 열려있는 것이다.
그 폴더명에 마우스를 가져다대면 옆에 아이콘들이 나온다.
우선 제일 첫번째 아이콘인 파일을 하나 만들어보자.
나는 테스트.html을 만들었다.
파일은 명칭.html, 명칭.css, 명칭,js등 사용하고싶은 명칭.코드 로 작성을 해주어야 잘 작동을 한다.
그럼 간단히 기본 코드도 작성해보자.
!를 입력 후 텝을 눌러주면 자동으로 페이지 생성이 완료된다.
<html lang="en">은 이 페이지의 언어를 설정하는 부분이다.
이부분을 ko로 바꿔주자.
또한, title은 사이트(해당 페이지)의 명칭이다.
원하는 텍스트로 바꿔주자.
그럼 간단히 여기까지 작동을 하였으면 기초적인 비쥬얼 스튜디오 작동법은 모두 알고있다.
이제 코드 공부를 열심히 해서 응용만 하면 된다!