VSC (Visual Studio Code) 준비하기
1. 코딩을 편하게 해주는 확장 기능
-
Korean : VSC의 문자들을 한국어로 보여줌.
-
Auto Rename Tag : 시작태그와 종료태그중 하나만 바꿔도 나머지 한쪽도 바꿔줌.
-
Live Server : 로컬호스트 포트를 할당해 HTML로 작성된 파일을 실시간으로 볼 수 있게 해줌. 단, HTML 파일에서만 사용 가능.
-
Prettier : 저장 버튼을 누를 때마다 들여쓰기, 따옴표, 세미콜론 등을 자동으로 관리해 코드를 깔끔하게 해줌.
2. 작업을 빠르게 할 수 있는 단축키
-
ctrl + s : 단일 파일 저장
-
ctrl + alt + s : 모든 파일 저장
-
ctrl + b : 탐색기 열기/닫기
-
ctrl + p : 원하는 파일 찾기
-
ctrl + shift + p : 모든 명령 찾기
-
ctrl + f : 문서 내에 검색해서 찾기
-
alt + 방향키 : 해당 행을 위/아래 로 이동시키기
-
alt + shift + 방향키 : 해당 행을 위/아래 로 복제하기
-
tap : 들여쓰기
-
shift + tap : 내어쓰기
HTML 파일 만들기
.html 확장자로 파일을 만든 후, !를 입력하면 기본 뼈대가 만들어진다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="#" />
<script src="#"></script>
<title>Document</title>
</head>
<body>
</body>
</html>-
<!DOCTYPE html>: HTML의 버전을 지정해줌. -
<head></head>: 문서의 정보를 작성하는 곳으로 브라우저에는 보이지 않음. -
<body></body>: 문서의 구조를 작성하는 곳.
<head> 내부 구성
-
meta: 문서의 제작자, 내용, 키워드 등의 정보를 브라우저에 제공-
charset: 문자 인코딩 방식을 결정 (UTF-8이 기본) -
name="viewport": 모바일버전 표시영역 설정
-
-
link: 외부 문서를 HTML과 연결시켜주는 태그-
rel: 가져올 문서와의 관계 -
href: 가져올 문서의 경로
-
-
script: script 파일을 HTML과 연결시켜주는 태그, HTML 내부에 직접 작성 가능src: 가져올 문서의 경로
-
title: 브라우저 탭에 표시되는 HTML 문서의 제목 -
style: HTML 내부에서 스타일 작성이 가능한 태그
