VS 코드를 사용하여 HTML 항목 설정하는 방법

VS 코드를 사용하여 HTML 항목 설정하는 방법

2022-06-01 last update

5 minutes reading HTML Spin Up
실천에서 HTML을 탐색하고 HTML 사이트를 구축하려면 텍스트 편집기를 사용하여 새로운 항목을 설정해야 합니다.이 강좌 시리즈는 Mac, Windows 또는 Linux에 적용되는 무료 코드 편집기Visual Studio Code를 사용하지만, 원하는 코드 편집기를 사용할 수 있습니다.
기본 설정 텍스트 편집기를 연 후 새 프로젝트 폴더를 열고 이름html-practice을 지정합니다.우리는 이 폴더를 사용하여 이 시리즈 강좌에서 만든 모든 파일과 폴더를 저장할 것입니다.
Visual Studio 코드에서 새 프로젝트 폴더를 만들려면 맨 위 메뉴의 파일 메뉴 항목으로 이동하여 작업공간에 폴더 추가 를 선택합니다.[새로 만들기] 창에서 [새 폴더] 버튼을 클릭하고 다음 gif와 같이 html-practice 라는 새 폴더를 만듭니다.

다음으로 index.html 폴더에 html-practice 라는 새 파일을 만듭니다.우리는 튜토리얼 시리즈에서 이 파일을 사용하여 HTML을 시험할 것이다.Visual Studio 코드를 사용하는 경우 Right Click 폴더의 CTRL + Left Click (Windows에서) 또는 html-practice (Mac에서) 새 파일을 만들고 "새 파일"을 선택한 다음 파일 index.html 을 만들 수 있습니다. 아래의 gif와 같습니다.

현재 HTML을 탐색하는 데 사용할 항목 폴더와 파일이 있습니다.우리는 앞의 강좌에서 이 파일을 되돌릴 것이다.

CSS 및 HTML 디버깅 및 문제 해결


HTML 연습을 시작하기 전에 HTML을 작성할 때 정밀도가 매우 중요하다는 것을 주의하십시오.추가 공백이나 잘못된 문자를 입력하더라도 코드가 예상대로 작동하지 않습니다.
만약 HTML 코드가 브라우저에 예상대로 나타나지 않는다면, 작성한 코드가 정확한지 확인하십시오.오류를 해결하려면 공백, 누락 또는 맞춤법 오류 표시, 누락 또는 부정확한 문장부호나 문자가 있는지 확인하십시오.코드를 변경할 때마다 파일을 저장한 다음 브라우저에 다시 불러와서 결과를 확인하십시오.

자동 HTML 지원 기능에 대한 간략한 설명


이 시리즈에서 사용하는 일부 코드 편집기(예를 들어 Visual Studio 코드 편집기)는 HTML 코드를 작성하는 데 자동으로 지원됩니다.Visual Studio 코드의 경우that support includes smart suggestions and auto completions.이러한 지원은 일반적으로 매우 유용하지만, 이러한 지원 기능을 사용하는 데 익숙하지 않으면 추가 코드가 생성되어 오류가 발생할 수 있음을 주의하십시오.이러한 특성이 주의력을 분산시키는 것을 발견하면 코드 편집기의 기본 설정에서 닫을 수 있습니다.
우리는 지금 CSS 언어의 작업 원리를 배우기 시작할 준비를 하고 있다.다음 강좌에서 웹 페이지의 HTML 내용의 스타일과 레이아웃을 제어하기 위해 CSS 규칙을 사용하는 방법을 탐색할 것입니다.