새 파일을 만들 폴더 선택 후 '새 파일' 아이콘 클릭
파일명 입력
※ 반드시 .html 확장자를 붙여야 비주얼 스튜디오 코드에서 웹 문서를 작성할 때 편리한 기능할 사용할 수 있다.
작업중인 탭 위에 마우스 포인터를 올려 경로 확인
자동 완성 기능 활용하기
코드의 첫 번째 줄에 '<'를 입력하면 '<'다음에 입력할 수 있는 여러 내용이 자동으로 표시된다.
이 상태에서 그대로 'enter' 혹은 'teb' 키를 누르면 첫 번째 항목에 있는 소스를 자동으로 입력해준다.
만약 첫 번째 항목이 아니라 다른 항목을 선택하려면 키보드의 위아래 방향 화살표를 눌러서 선택할 수 있다.
※ 자동 완성 기능이 실행되지 않을 경우 파일 확장자가 .html 인지 확인해보자
※ 작업중인 탭의 파일명 옆에있는 ●표시는 아직 해당 파일을 저장하지 않았다는 뜻으로, 파일 저장시 사라진다.
<html>의 마지막 '>'를 입력 시 그와 동시에 닫아주는 태그인 </html>이 자동으로 입력되고 두 태그 사이에 입력 커서가 놓여진다.
<html> 태그 안쪽에 한 칸 여백을 만들고 'lan'을 입력하면 자동 완성 목록에 lang이 나온다. 해당 상태에서 'enter' 키를 누르면 lang=""가 입력되면서 입력 커서가 따옴표 안에 놓여진다.
같은 방법으로 <html>태그 다음 줄에 <head>태그 생성후 <meta>태그와 <title>태그 생성
<meta> : 문자 세트를 지정
<title> : 웹 문서의 제목
같은 방법으로 </head>태그 다음 줄에 <body>태그 생성 후 <h1>태그 생성
<h1> : 제목
※ <h1>, <h2>, <h3>, <h4>, <h5>, <h6>모두 제목을 쓰는 태그로 숫자가 커질수록 글자 크기가 작아진다.
'웹 개발' 카테고리의 다른 글
| [HTML] HTML의 기본 구조 자동으로 만들기 (0) | 2021.12.15 |
|---|---|
| [HTML] 비주얼 스튜디오 라이브 서버 설치 및 사용방법 (0) | 2021.12.15 |
| HTML (HtperText Markup Language) (0) | 2021.12.08 |
| HTML5를 왜 HTML로 부르게 되었을까? (0) | 2021.12.08 |
| 비주얼 스튜디오 코드의 글꼴, 탭(들여쓰기) 크기 변경하기 (0) | 2021.12.03 |