VS Code에서 HTML을 작성하는 방법은 매우 간단하며, 몇 가지 기본적인 설정과 확장 프로그램을 통해 효율적으로 작업할 수 있습니다. 아래에 VS Code로 HTML을 작성하는 방법과 간단한 코드 예제를 소개하겠습니다.
1. VS Code 설치 및 설정
- VS Code 설치: Visual Studio Code 공식 웹사이트에서 VS Code를 다운로드하여 설치합니다.
- HTML 확장 프로그램 설치: HTML 작업을 더 효율적으로 하기 위해 HTML Snippets, Auto Close Tag, Live Server 같은 확장 프로그램을 설치할 수 있습니다. 이 확장 프로그램들은 코드 자동 완성, 자동 태그 닫기, 실시간 미리보기 기능 등을 제공합니다.
2. HTML 파일 생성 및 작성
- 프로젝트 폴더 열기: VS Code에서 새로운 폴더를 열거나 만들고, 해당 폴더를 작업 폴더로 설정합니다.
- HTML 파일 생성: index.html과 같은 파일명을 사용하여 새로운 HTML 파일을 생성합니다.
- HTML 기본 템플릿 작성: index.html 파일을 열고, ! 키워드를 입력한 뒤 Tab 키를 누르면 HTML의 기본 템플릿이 자동으로 생성됩니다.
3. 간단한 HTML 코드 예제
아래는 간단한 HTML 코드 예제입니다. 이 코드는 웹 페이지의 제목, 헤더, 단락, 링크 등을 포함합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>간단한 HTML 예제</title> </head> <body> <h1>환영합니다!</h1> <p>이것은 VS Code를 사용하여 작성된 간단한 HTML 페이지입니다.</p> <a href="https://gptonline.ai/ko/" target="_blank">GPT Online 방문하기</a> </body> </html> | cs |
4. HTML 파일 실행 (Live Server 사용)
- Live Server 설치: Live Server 확장 프로그램을 설치합니다. 이 확장 프로그램을 사용하면 HTML 파일을 브라우저에서 실시간으로 미리볼 수 있습니다.
- HTML 파일 실행: index.html 파일을 열고, 우클릭한 후 Open with Live Server를 선택하면 브라우저에서 HTML 페이지가 열립니다. 이 상태에서 코드를 수정하면 브라우저가 자동으로 변경 내용을 반영합니다.
이 방법을 사용하면 VS Code에서 쉽게 HTML 파일을 작성하고, 실시간으로 결과를 확인할 수 있습니다.
'UI 공부' 카테고리의 다른 글
| CSS 스타일 (0) | 2024.08.14 |
|---|---|
| CSS 속성, 선택자 (0) | 2024.08.14 |
| CSS (0) | 2024.08.14 |
| HTML 태그 (0) | 2024.08.13 |
| vs code 설치 및 사용 (0) | 2024.08.13 |