简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

vscode를 사용하여 HTML 프로젝트를 만드는 방법

百草
풀어 주다： 2024-03-25 14:39:46
원래의
824명이 탐색했습니다.

vscode를 사용하여 HTML 프로젝트를 생성하는 단계: 1. Visual Studio Code를 설치합니다. 3. 프로젝트 디렉터리로 새 폴더를 생성합니다. 4. VSCode에서 프로젝트 폴더를 엽니다. 6. HTML 코드를 작성합니다. 7. HTML 파일을 저장하고 미리 봅니다. 8. 다른 리소스 파일을 추가합니다. 9. 확장된 향상 기능을 사용합니다.

vscode를 사용하여 HTML 프로젝트를 만드는 방법

Visual Studio Code(VSCode)를 사용하여 HTML 프로젝트를 만드는 것은 비교적 간단한 프로세스입니다.

1단계: Visual Studio Code 설치

아직 VSCode를 설치하지 않았다면 공식 웹사이트(https://code.visualstudio.com/download)를 방문하여 사용자에게 적합한 버전을 다운로드하여 설치할 수 있습니다. 운영 체제.

2단계: VSCode 열기

설치가 완료된 후 VSCode를 엽니다. 간단한 편집기 인터페이스가 표시됩니다.

3단계: 프로젝트 디렉터리로 새 폴더 만들기

컴퓨터에서 위치를 선택하고 HTML 프로젝트의 루트 디렉터리 역할을 할 새 폴더를 만듭니다. 예를 들어 데스크탑이나 문서 폴더에 my-html-project라는 폴더를 만들 수 있습니다.

4단계: VSCode에서 프로젝트 폴더 열기

VSCode의 메뉴 표시줄에서 파일 -> 폴더 열기를 선택한 다음 프로젝트 폴더(my -html-project)를 찾아 선택하고 열기를 클릭하세요.

5단계: HTML 파일 생성

프로젝트 폴더에서 HTML 파일을 직접 생성할 수 있습니다. VSCode의 사이드바에 프로젝트 폴더 구조가 표시됩니다. 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 파일을 선택한 후 파일 이름을 index.html로 지정합니다. 이는 프로젝트의 기본 HTML 파일입니다.

6단계: HTML 코드 작성

이제 HTML 코드 작성을 시작할 수 있습니다. index.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>欢迎来到我的 HTML 项目</h1>  
    <p>这是一个简单的 HTML 页面。</p>  
</body>  
</html>
로그인 후 복사

이 예제 코드는 제목(

)과 단락(

)이 있는 간단한 HTML 페이지를 만듭니다.

7단계: HTML 파일 저장 및 미리보기

HTML 코드를 작성한 후 파일을 저장하는 것을 잊지 마세요. 단축키 Ctrl + S(Windows/Linux) 또는 Cmd + S(Mac)를 사용하여 파일을 저장할 수 있습니다.

HTML 페이지를 미리 보려면 VSCode에서 직접 내장된 브라우저 미리 보기 기능을 사용할 수 있습니다. 사이드바에서 index.html 파일을 클릭한 다음 열리는 편집기 창에서 마우스 오른쪽 버튼을 클릭하고 브라우저에서 열기를 선택합니다. VSCode는 기본 브라우저를 사용하여 이 HTML 페이지를 자동으로 엽니다.

8단계: 다른 리소스 파일 추가(선택 사항)

HTML 파일 외에도 CSS 스타일 시트, JavaScript 스크립트, 이미지 등과 같은 다른 리소스 파일을 프로젝트에 추가할 수도 있습니다. 이러한 파일은 HTML 파일과 동일한 디렉토리나 하위 디렉토리에 배치할 수 있습니다. 예를 들어 모든 CSS 파일을 보관할 css 폴더, JavaScript 파일을 보관할 js 폴더, 이미지를 보관할 이미지 폴더를 만들 수 있습니다.

9단계: 확장 기능을 사용하여 기능 향상(선택 사항)

VSCode는 강력한 확장 생태계를 갖추고 있으며 확장 기능을 설치하여 편집기의 기능을 향상시킬 수 있습니다. HTML 프로젝트의 경우 HTML, CSS 및 JavaScript와 관련된 일부 확장을 설치하여 더 나은 코드 강조 표시, 자동 완성, 서식 지정 등을 얻을 수 있습니다. VSCode 확장 스토어에서 필요에 맞는 확장을 검색하고 설치할 수 있습니다.

Summary

위는 VSCode에서 HTML 프로젝트를 생성하는 기본 단계입니다. 다음 단계를 따르면 HTML 페이지 작성과 미리보기를 쉽게 시작할 수 있습니다. HTML, CSS 및 JavaScript에 대해 더 많이 배우면서 점차적으로 더 많은 기능과 스타일을 추가하여 프로젝트를 더욱 풍부하게 만들 수 있습니다.

위 내용은 vscode를 사용하여 HTML 프로젝트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vscode html
원천：php.cn
이전 기사：프론트엔드 엔지니어의 일상 업무 살펴보기 다음 기사：프론트엔드 개발의 핵심 스킬: 놓칠 수 없는 콘텐츠 학습!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
스도쿠 검사기가 작동하지 않나요? 오류를 식별하는 데 도움을 줄 수 있는 사람이 있나요? 온라인 편집기에서 모든 것을 시도했지만 여전히 오류가 발생합니다. 하지만 내 컴퓨터의 VSCode에서 이 작업을 수행하면 제대로 작동합니다. 혼란스러워서 버그를 ...
에서 2024-04-06 21:21:07
0
1
474
내 페이지의 HTML에 제목이 있지만 표시되지 않습니다. 그래서 방금 코딩을 시작했으니 저를 판단하지 마세요. vscode를 사용하여 웹사이트를 만들려고 하는데 html과 css를 사용하고 있는데 코드 왼쪽 상단에 넣으...
에서 2024-04-01 18:24:53
0
1
364
VSCode ID 속성을 사용자 정의하는 방법은 무엇입니까? 저는 최근에 Atom에서 VSCode로 옮겼으며 대부분의 편집기를 원하는 대로 사용자 정의했지만 여전히 제가 좋아하는 Atom 기능 중 일부가 누락되었습니다. 그...
에서 2024-03-31 14:13:45
0
1
373
/bin/sh: 1: C:xamppphpphp.exe: 찾을 수 없음 저는 WSL2, Ubuntu20.04를 사용하고 있으며 VSCode를 실행하고 있습니다. Windows의 VSCode 및 XAMPP에서 CodeRunner 확장을...
에서 2024-03-31 09:10:37
0
1
333
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！