[HTML 강좌] 2. Visual Studio Code와 HTML
HTML을 작성하기 위한 도구로 선택된 Visual Studio Code의 기본적인 설정을 알아보고 간단한 HTML을을 만들어 확인하면서 HTML을 사용하기 위한 준비를 할 수 있도록 안내합니다.
첨부된 동영상을 확인하시면서 따라하시면 매우 쉽게 알 수 있습니다.
그럼 시작하겠습니다.
처음 프로그램을 실행하게 되면 Visual Studio의 시작 페이지가 뜬다. 아마도 처음 설치하시는 분들은 그림과는 틀리게 영어로 표시될겁니다.
확장 프로그램이란 ?
Visual Studio Code는 사용하는 언어와 용도에 따라서 여러가지 기능을 사용자가 직접 설치하여 활용할 수 있는 확장 프로그램을 제공하여 사용자의 자율성을 보장함과 동시에 프로그램의 무거움을 간결하게 하였습니다.
우리는 HTML을 제작하는 도구로 사용하기에 그에 맞는 확장프로그램을 설치하여 사용합니다.
한글 언어팩 설치
한글 확장 프로그램 Korean Language Pack for Visual Studio Code 을 설치합니다. 확장 프로그램을 설치한 후 Vsual Studio Code를 재시작하면 모든 메뉴가 한글화가 되어 표시됩니다.
주의 : Visual Studio Code에 Korean Language Pack 을 설치하고 난 후 Visual Studio Code를 재시작해야 해당 파일이 적용된다.
HTML 자동 완성 지원을 위한 HTML Snippets 설치
HTML Snippets 확장 프로그램을 설치하면 HTML 의 자동 완성기능을 제공합니다.
HTML Snippets는 작성하고자 하는 파일이 HTML 파일임을 인식해야 작동됩니다.
따라서 HTML Snippets가 작동되기 위해서는 반드시 작성하는 파일의 확장자가 ".html" 또는 "htm"이어야 합니다.
작성된 HTML을 확인합니다. - Live Server
HTML을 작성하게 되면 작성된 HTML이 제대로 작동되는지 확인하여야 합니다.
여기에서는 Visual Studio Code의 Live Server 이라는 확장을 설치하여 HTML파일을 즉시 확인하고자 합니다.
HTML 문서를 수정한신 후 저장(Ctrl + S)를 하시면 웹브라우져에 수정된 내용이 적용됩니다.
주의 : Live Server는 HTML 문서가 존재하는 폴더상에서 작동됩니다. 추후에 서버에 관계된 이야기는 다룰 예정입니다. 이번 글에서는 HTML 문서를 만들고 확인하는데 중점을 두고자 합니다.
이로써 HTML 문서를 만들고 확인하기 위한 기본적인 툴의 설치를 진행하였습니다.
Visual Studio Code는 HTML 문서를 만들기 위한 아주 다양한 확장 프로그램을 제공하고 있습니다.
앞으로 게시되는 글에서 필요한 확장 프로그램은 실습과 함께 소개하여 제공하도록 하겠습니다.
댓글