vscode에서 코드 html을 실행하는 방법
- 百草원래의
- 2024-03-25 15:37:41821검색
HTML은 본질적으로 브라우저에서 직접 구문 분석하고 표시할 수 있는 정적 마크업 언어이기 때문에 Visual Studio Code(VSCode)에서 HTML 코드를 실행하는 것은 매우 쉽습니다. 이 문서에서는 VSCode 설치, HTML 파일 생성, HTML 코드 작성 또는 편집, HTML 페이지 미리보기, JavaScript 코드 디버깅을 포함하여 VSCode에서 HTML 코드를 실행하고 미리 보는 단계를 자세히 설명합니다.
HTML은 본질적으로 브라우저에서 직접 구문 분석하고 표시할 수 있는 정적 마크업 언어이기 때문에 VSCode(Visual Studio Code)에서 HTML 코드를 실행하는 것은 상대적으로 간단합니다. 그러나 "코드 실행"을 언급할 때 HTML 페이지 및 이와 관련된 JavaScript 및 CSS를 미리 보거나 디버깅하는 것을 언급한다고 가정합니다. VSCode에서 HTML 코드를 실행하고 미리 보는 방법에 대한 자세한 단계는 다음과 같습니다.
1단계: Visual Studio Code 설치
먼저 최신 버전의 VSCode가 설치되어 있는지 확인하세요. VSCode 공식 홈페이지(https://code.visualstudio.com/download)에서 다운로드하여 설치하실 수 있습니다.
2단계: HTML 파일 만들기 또는 열기
VSCode에서 새 HTML 파일을 만들거나 기존 HTML 파일을 열 수 있습니다. 새 파일을 생성할 때 사이드바에서 새 파일 아이콘을 클릭하거나 단축키 Ctrl + N(Windows/Linux) 또는 Cmd + N(Mac)을 사용할 수 있습니다. 그런 다음 파일을 저장할 때 index.html과 같은 .html 확장자가 있는지 확인하세요.
3단계: HTML 코드 작성 또는 편집
열린 HTML 파일에서 HTML 코드 작성 또는 편집을 시작할 수 있습니다. 간단한 HTML 페이지는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个 HTML 页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的 HTML 页面示例。</p>
</body>
</html>코드가 완전하고 구문 오류가 없는지 확인하세요. VSCode에 내장된 구문 강조 기능은 코드의 오류를 식별하는 데 도움이 될 수 있습니다.
4단계: HTML 페이지 미리 보기
VSCode는 HTML 페이지를 미리 볼 수 있는 여러 가지 방법을 제공합니다.
방법 1: 내장 브라우저 미리 보기 사용
VSCode에는 브라우저 미리 보기 기능이 내장되어 있습니다. 편집기 오른쪽 상단에 있는 "Go Live" 버튼을 클릭하거나 단축키 Alt + B(Windows/Linux) 또는 Shift + Cmd + P를 사용하고 Live Server: Open with Live Server(Mac)를 입력하여 라이브를 시작할 수 있습니다. 로컬 서버에 접속하고 페이지를 미리 봅니다. 이를 위해서는 "Live Server"라는 플러그인이 필요합니다. 아직 설치하지 않은 경우 다음 단계를 따르세요.
VSCode의 확장 스토어를 엽니다(사이드바의 사각형 아이콘을 클릭하거나 Ctrl + Shift + X / Cmd +Shift+를 눌러). 엑스).
검색창에 "라이브 서버"를 입력하세요.
검색 결과에서 "라이브 서버" 플러그인을 찾아 "설치" 버튼을 클릭하세요.
설치가 완료된 후 위의 방법을 통해 Live Server를 시작하고 HTML 페이지를 미리 볼 수 있습니다. Live Server는 파일을 저장할 때 자동으로 브라우저를 새로 고치므로 코드 변경의 효과를 실시간으로 확인할 수 있습니다.
방법 2: 외부 브라우저에서 열기
HTML 페이지를 미리 보는 또 다른 방법은 외부 브라우저에서 파일을 직접 여는 것입니다. 편집기에서 HTML 파일을 마우스 오른쪽 버튼으로 클릭하고 "브라우저에서 열기"를 선택하거나 단축키 Ctrl + 클릭(Windows/Linux) 또는 Cmd + 클릭(Mac)을 사용하여 파일을 열 수 있습니다. VSCode는 기본 브라우저를 사용하여 파일을 열려고 시도합니다. 그러나 이 접근 방식은 특히 상대 경로를 통해 참조되는 경우 관련 CSS 또는 JavaScript 파일을 로드하지 못할 수 있습니다.
5단계: JavaScript 코드 디버그(선택 사항)
HTML 페이지에 JavaScript 코드가 포함되어 있고 코드를 디버깅하려는 경우 VSCode에 내장된 디버거를 사용할 수 있습니다. 먼저 프로젝트에서 launch.json 구성 파일을 설정하여 디버깅 환경을 정의해야 합니다. VSCode는 이 파일을 생성하기 위한 마법사를 제공합니다. 일반적으로 사이드바에서 실행 및 디버그 아이콘을 클릭하거나 Ctrl + Shift + D / Cmd + Shift + D 단축키를 사용한 다음 "launch.json 파일 만들기"를 클릭하여 이 프로세스를 시작합니다. 디버그 대상으로 사용하는 "Chrome" 또는 다른 브라우저를 선택하고 적절한 옵션을 구성하십시오. 그런 다음 JavaScript 코드에 중단점을 설정하고 디버깅 세션을 시작하여 코드를 단계별로 실행할 수 있습니다.
요약
VSCode에서 HTML 코드를 실행하는 작업에는 주로 HTML 페이지 작성 및 미리보기가 포함됩니다. HTML 자체는 컴파일하거나 실행할 필요가 없지만 Live Server를 사용하거나 브라우저에서 직접 파일을 열면 페이지 렌더링을 쉽게 볼 수 있습니다. JavaScript가 포함된 복잡한 페이지의 경우 VSCode의 디버깅 기능이 코드 디버깅에 도움이 될 수 있습니다. VSCode의 기능과 플러그인을 적절하게 사용하면 HTML 프로젝트를 보다 효율적으로 개발할 수 있습니다.
위 내용은 vscode에서 코드 html을 실행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!