본문 바로가기
프론트엔드/생활코딩

[생활코딩] HTML 1. Visual Studio Code 사용법

by cejin 2023. 11. 7.

HTML 목차

 

 

1. 설치

https://code.visualstudio.com
 
 

2. 기본 템플릿

1. html 문서에 ! 입력
2. [tab]키 누르기
 
 

3. 나만의 템플릿 만들기

- file - preferences - configure User Snippets 클릭
- New Global Snippets file 선택
- 원하는 이름 설정

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>$1</title>
</head>
<body>
    $2
</body>
</html>

myhtml.code-snippets
0.00MB

 
Q. $1, $2은?
탭키 누르면 커서 이동 위치
 
 

4. 한글이 깨지면?

<meta charset="utf-8">

- 코드 삽입
- 아예 템플릿 만들 때 넣기
 
 

5. 코드가 한 줄로 길게 나온다면?

- [View] - [Word Wrap]
- 단축키 : [Alt]+[Z]
 
 

6. 부등호를 문자로 표현하고 싶다면?

- &lt : < (less than)
- &gt :  > (greater than)
 
 

7. Hello world

1. 폴더 만들고 VSC로 열기
2. 파일 이름은 1.html
3. 코드 입력: Hello World
4. 웹 브라우저로 실행
- 단축키: Ctrl + O
- 또는 Ctrl + F5 (구글 크롬으로 확인)