HTML, CSS 개발 환경 구축, VS Code, Extensions

1. Visual Studio Code

---

Microsoft에서 제공하는 통합 개발 환경 소프트웨어입니다.

 

• HTML, CSS, JS에 국한된 것이 아닌 C#, Python, Docker 등 다양한 방면으로 통합 개발 환경을 구축할 수 있습니다.

---

2. 개발 환경 구축의 필요성

HTML 코드는 단순히 메모장으로만 작성을 해도 구현이 가능합니다.

Window 메모장(왼쪽), Mac 텍스트 편집기(오른쪽)에서 첫 실습이네요 작성 후 .HTML로 저장 시

 

 

 

 

 

 

또한 Window에서는 메모장으로 HTML 태그 규격을 맞추어 HTML 문서를 작성했을 때 제대로 표현이 되지만, 
Mac에서는 왼쪽 사진과 같이 규격을 맞추어 작성해도 오른쪽과 같이 태그로 인식하지 않고, 모두 p 태그로 인식합니다.

 

이처럼 운영체제와 환경에 따라 같은 프로그래밍을 해도 결과가 달라지기 때문에, 통합 개발 환경이 필요하고 VS Code를 사용합니다.

 

3.  VS Code 설치

설치는 https://code.visualstudio.com/에서 간단하게, 운영체제에 맞게 하면 됩니다.

 

4. Extensions

VS Code는 기본적으로 HTML 코드 등의 자동완성은 지원하지만 추가적인 더 편리한 기능들을 확장(Extensions)을 통해 사용할 수 있습니다.

 

4-1. Korean Language Pack

VS Code를 한글화해줍니다.

 

4-2. Prettier - Cord formatter

코드 작성과 관련된 편리한 기능들이나, 문법적 오류를 알려줍니다.

 

확장 설정 클릭.

 

 

 

세미콜론을 자동으로 추가해 줍니다.

 

들여 쓰기의 기준을 2칸으로 잡습니다.

 

Default Formatter을 검색하여 Prettier을 기본 Formatter으로 설정합니다.

 

코드 작성(변경) 후 저장 시, Formatter가 동작하도록 설정해 줍니다.

 

이제 기존에 왼쪽과 같은 코드가 있을 경우, 저장 시 Tab Width: 2로 인해 2칸 띄어쓰기로 변경됩니다.

 

또한 왼쪽과 같이 문법적 오류(p 태그 자식 요소로 p 태그)가 있는 경우 저장 시 조금 전처럼 코드 포맷팅(4칸 띄어쓰기 -> 2칸 띄어쓰기)이 되지 않고, Prettier에 경고 메시지가 나오게 됩니다.

 

4-3. Indentation Level Movement

라인 이동을 편리하게 해주는 Extension

• Mac 기준 HTML 태그에 선택되어 있는 경우 option 위, 아래 누를 시 태그별로 라인 이동이 됨
• 코드가 없는 빈 공간에 선택되어 있는 경우 코드를 건너뛰고 다음 공백으로 라인 이동이 됨

4-4. Live Server

프로그래밍 중인, HTML 페이지 확인을 브라우저의 새로고침 없이 코드 저장 시 바로바로 적용되게 해줍니다.

 

오른쪽 아래 Go Live 클릭 시, 새로운 브라우저 창이 뜨게 됩니다.

 

이 창은, 하나의 서버로서, 5500번의 포트를 가지고 있습니다.

내용을 작성 후, 저장만 하면?

 

내용이 바로바로 변경됩니다.

5. 기타

VS Code에서는 효율적인 창 관리를 위해, 편집기에서 처음 클릭하여 오픈된 파일은 임시적으로 열리게 되며, 글자가 이탤릭 체(기울임꼴)로 나오게 됩니다. 이때 다른 파일을 클릭한다면 prac01.html이 없어지고 prac02.html로 교체됩니다.

 

창을 고정적으로 열고 싶다면 편집기에서 해당 파일을 더블클릭 하면 됩니다.

 

다만 prac01.html이 이미 고정적으로 열려있는 상태에서, 편집기에서 prac01.html을 클릭한다면 이미 고정적으로 열려있는 prac01.html을 응답합니다.