Visual Studio Code의 HTML

Visual Studio Code는 기본적으로 HTML 프로그래밍을 지원합니다. 구문 강조 표시, IntelliSense를 통한 스마트 완성, 사용자 지정 가능한 서식이 제공됩니다. VS Code에는 훌륭한 Emmet 지원도 포함되어 있습니다.

IntelliSense

HTML을 입력하면 HTML IntelliSense를 통해 제안이 제공됩니다. 아래 이미지에서 </div>와 같이 제안된 HTML 요소 닫기와 함께 상황에 맞는 요소 제안 목록을 볼 수 있습니다.

HTML IntelliSense

HTML에 대한 문서 기호도 사용할 수 있어 id 및 클래스 이름을 통해 DOM 노드로 빠르게 이동할 수 있습니다.

내장 CSS 및 JavaScript를 사용할 수도 있습니다. 그러나 스크립트 및 스타일 포함은 다른 파일을 따르지 않으며, 언어 지원은 HTML 파일의 내용만 확인합니다.

언제든지 ⌃Space (Windows, Linux Ctrl+Space)를 눌러 제안을 트리거할 수 있습니다.

활성 상태인 내장 코드 완성 공급자를 제어할 수도 있습니다. 해당 제안을 보지 않으려면 사용자 또는 작업 영역 설정에서 이를 재정의하십시오.

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true

태그 닫기

여는 태그의 >를 입력하면 태그 요소가 자동으로 닫힙니다.

HTML Close1

닫는 태그의 /를 입력하면 일치하는 닫는 태그가 삽입됩니다.

HTML Close2

다음 설정으로 자동 닫기 태그를 끌 수 있습니다.

"html.autoClosingTags": false

자동 태그 업데이트

태그를 수정하면 연결된 편집 기능이 일치하는 닫는 태그를 자동으로 업데이트합니다. 이 기능은 선택 사항이며 다음을 설정하여 활성화할 수 있습니다.

"editor.linkedEditing": true

색상 선택기

VS Code 색상 선택기 UI가 이제 HTML 스타일 섹션에서 사용할 수 있습니다.

color picker in HTML

편집기에서 가져온 색상의 색조, 채도 및 불투명을 구성할 수 있습니다. 또한 선택기의 상단에 있는 색상 문자열을 클릭하여 다른 색상 모드 간에 전환할 수 있는 기능을 제공합니다. 선택기는 색상 정의 위에 마우스를 올리면 나타납니다.

호버

커서 아래의 기호에 대한 자세한 정보를 얻으려면 HTML 태그 또는 내장 스타일 및 JavaScript 위로 마우스를 이동하십시오.

HTML Hover

유효성 검사

HTML 언어 지원은 모든 내장 JavaScript 및 CSS에 대한 유효성 검사를 수행합니다.

다음 설정을 통해 해당 유효성 검사를 끌 수 있습니다.

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

폴딩

줄 번호와 줄 시작 사이의 여백에 있는 접기 아이콘을 사용하여 소스 코드 영역을 접을 수 있습니다. 여러 줄 주석의 모든 HTML 요소에 대해 접기 영역을 사용할 수 있습니다.

추가로 다음 영역 표시기를 사용하여 접기 영역을 정의할 수 있습니다:  및 

HTML에 들여쓰기 기반 접기로 전환하려면 다음을 사용하십시오.

"[html]": {
    "editor.foldingStrategy": "indentation"
},

서식

HTML 소스 코드의 서식을 개선하려면 전체 파일을 서식 지정하려면 문서 서식 명령 ⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)을 사용하거나 선택한 텍스트만 서식 지정하려면 선택 영역 서식 ⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)을 사용하십시오.

HTML 포맷터는 js-beautify를 기반으로 합니다. 해당 라이브러리에서 제공하는 서식 옵션은 VS Code 설정에 노출됩니다.

html.format.wrapLineLength: 줄당 최대 문자 수.
html.format.unformatted: 서식을 다시 지정하지 않을 태그 목록.
html.format.contentUnformatted: 서식을 다시 지정하지 않을 태그 목록(쉼표로 구분).
html.format.extraLiners: 앞에 추가 줄 바꿈이 있어야 하는 태그 목록.
html.format.preserveNewLines: 요소 앞에 있는 기존 줄 바꿈을 유지할지 여부.
html.format.maxPreserveNewLines: 한 청크에서 유지할 최대 줄 바꿈 수.
html.format.indentInnerHtml: <head> 및 <body> 섹션을 들여씁니다.
html.format.wrapAttributes: 특성에 대한 줄 바꿈 전략.
- auto: 줄 길이가 초과되면 줄 바꿈
- force: 첫 번째 특성을 제외한 모든 특성 줄 바꿈
- force-aligned: 첫 번째 특성을 제외한 모든 특성을 줄 바꿈하고 특성을 정렬합니다.
- force-expand-multiline: 모든 특성 줄 바꿈
- aligned-multiple: 줄 길이가 초과되면 줄 바꿈하고 특성을 세로로 정렬합니다.
- preserve: 특성 줄 바꿈 보존
- preserve-aligned: 특성 줄 바꿈을 보존하지만 정렬합니다.
html.format.wrapAttributesIndentSize: html.format.wrapAttributes에서 force aligned 및 aligned multiple을 사용할 때 정렬 크기 또는 기본 들여쓰기 크기를 사용하려면 null.
html.format.templating: django, erb, handlebars 및 php 템플릿 언어 태그를 존중합니다.
html.format.unformattedContentDelimiter: 이 문자열 사이의 텍스트 콘텐츠를 함께 유지합니다.

팁: 포맷터는 html.format.unformatted 및 html.format.contentUnformatted 설정에 나열된 태그는 서식을 지정하지 않습니다. 'script' 태그가 제외되지 않는 한 내장 JavaScript는 서식이 지정됩니다.

Marketplace에는 선택할 수 있는 여러 대체 포맷터가 있습니다. 다른 포맷터를 사용하려면 설정에서 "html.format.enable": false를 정의하여 내장 포맷터를 끕니다.

Emmet 스니펫

VS Code는 Emmet 스니펫 확장을 지원합니다. Emmet 약어는 편집기 자동 완성 목록의 다른 제안 및 스니펫과 함께 나열됩니다.

Emmet HTML support built-in

팁: 유효한 약어는 Emmet 치트 시트의 HTML 섹션을 참조하십시오.

다른 언어에서 HTML Emmet 약어를 사용하려면 emmet.includeLanguages 설정을 사용하여 Emmet 모드(예: css, html) 중 하나를 다른 언어와 연결할 수 있습니다. 이 설정은 언어 식별자를 가져와 Emmet 지원 모드의 언어 ID와 연결합니다.

예를 들어 JavaScript 내에서 Emmet HTML 약어를 사용하려면

{
  "emmet.includeLanguages": {
    "javascript": "html"
  }
}

사용자 지정 스니펫도 지원합니다.

HTML 사용자 지정 데이터

선언적인 사용자 지정 데이터 형식을 통해 VS Code의 HTML 지원을 확장할 수 있습니다. html.customData를 사용자 지정 데이터 형식을 따르는 JSON 파일 목록으로 설정하여 새로운 HTML 태그, 특성 및 특성 값에 대한 VS Code의 이해도를 높일 수 있습니다. VS Code는 제공된 태그, 특성 및 특성 값에 대한 완성 및 호버 정보와 같은 언어 지원을 제공합니다.

사용자 지정 데이터를 사용하는 방법에 대한 자세한 내용은 vscode-custom-data 리포지토리에서 확인할 수 있습니다.

HTML 확장

확장을 설치하여 더 많은 기능을 추가하십시오. **확장** 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))로 이동하여 'html'을 입력하면 HTML 생성 및 편집에 도움이 되는 관련 확장 목록을 볼 수 있습니다.

팁: 위의 확장 타일을 클릭하여 설명과 리뷰를 읽고 자신에게 가장 적합한 확장을 결정하십시오. Marketplace에서 더 많은 정보를 확인하십시오.

다음 단계

자세한 내용은 계속 읽어보세요.

CSS, SCSS 및 Less - VS Code는 Less 및 SCSS를 포함한 CSS를 완벽하게 지원합니다.
Emmet - VS Code의 강력한 내장 Emmet 지원에 대해 알아보십시오.
Emmet 공식 문서 - 웹 개발자를 위한 필수 도구인 Emmet.

자주 묻는 질문

VS Code에 HTML 미리 보기가 있습니까?

아니요, VS Code에는 내장된 HTML 미리 보기 지원이 없지만 VS Code Marketplace에서 사용할 수 있는 확장이 있습니다. **확장** 보기(⇧⌘X (Windows, Linux Ctrl+Shift+X))를 열고 'live preview' 또는 'html preview'를 검색하여 사용 가능한 HTML 미리 보기 확장 목록을 확인하십시오.

12/10/2025