Visual Studio Code - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • Visual Studio Code
    02 개발 환경 설정
    Visual Studio Code

    VS Code(Visual Studio Code)는 마이크로소프트사에서 제작한 코드 에디터입니다. VS Code 공식 페이지에서 무료로 다운로드해서 사용할 수 있으며, 윈도우, 리눅스, macOS 모두를 지원하니 각 운영체제(OS)에 맞게 설치하여 쉽게 사용할 수 있습니다.


    웹 개발을 위한 Extension 소개 및 설치


    VS Code는 처음 설치했을 때 기본 개발 도구를 제공합니다. 그 때문에 프로그램이 매우 가볍지만, 편의를 목적으로 하는 프로그램인 점을 고려했을 때 도구가 다소 부족하다고 생각할 수 있습니다. 이를 위해 VS Code에서는 Extension이라는 확장 기능을 제공합니다. VS Code를 사용하는 유저들이 직접 제작한 도구들을 쉽게 가져다 쓸 수 있습니다. 구글 크롬 브라우저의 애드블록과 같은 크롬 익스텐션이라고 생각하시면 됩니다.

    가장 먼저 살펴볼 익스텐션은 Live Server입니다. Live Server는 HTML 코드를 저장한 그대로 live 반영합니다. 원래대로라면 저장하더라도 브라우저 리프레쉬가 필요한데, 라이브 서버 익스텐션이 있으면 쉽게 즉각적으로 반영할 수 있습니다.

    그다음은 HTML Snippets입니다. VS code에서 기본으로 제공되지만, 익스텐션을 통해 좀 더 강력한 기능을 제공합니다. HTML 태그를 자동 완성하며 태그별 기본적으로 갖고 있는 속성(Attribute)까지 제공합니다.

    마지막으로 HTML CSS Support입니다. HTML에서 CSS를 지원하여 깔끔한 문법 하이라이팅과 코드 제안을 제공합니다.

    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)