1. VSCode에서 프로젝트 생성하기
HTML 파일을 생성하여 HTML 코드를 작성해보겠습니다.
VSCode에서는 파일 단위가 아닌 프로젝트 단위로 파일을 관리합니다.
프로젝트의 기준은 '폴더'입니다.
기준 폴더를 설정해주면
그 폴더 안의 모든 파일과 폴더를 한 개의 프로젝트로 관리합니다.
그 기준 폴더 안에 html파일, css파일, js파일, img파일들을 넣어주면 됩니다.
아래와 같이 VSCode를 켜시고, 좌측 '파일' 메뉴에서 '폴더열기'를 눌러줍니다.
저는 C:\JoWeb\html-test 라는 폴더를 만들었습니다.
앞으로 제가 만드는 모든 web관련 프로젝트는 'JoWeb'폴더에 담을 예정입니다.
저는 조씨라서 폴더 이름을 이렇게 정했고, 여러분은 원하시는 곳에 원하는 이름의 폴더를 만드시면 됩니다.
JoWeb 폴더안에 html를 공부하기 위한 프로젝트를 담을 'html-test'라는 폴더도 만들었습니다.
아래와 같이 해당 폴더 안에서 '폴더 선택'을 누르면 됩니다.
html-test라는 폴더를 열면, html-test 폴더가 이 프로젝트에서의 root(최상위 폴더)가 됩니다.
만약 다른 프로젝트를 만들고 싶다면
JoWeb 폴더 안에 새로운 폴더를 만들거나, 기타 다른 곳에 폴더를 만들어서 '폴더 열기'를 하시면 됩니다.
저는 아래와 같이 파일 탐색기에서 폴더를 만들어서 vscode를 엽니다.
폴더의 빈 곳에 마우스 오른쪽 클릭을 하면 나오는 컨텍스트 메뉴에서 'code로 열기'를 누르면 됩니다.
2. VSCode에서 index.html 파일 생성하기
프로젝트가 열리면 아래와 같이 좌측 사이드바 HTML-TEST라고 적혀 있는 부분의 오른쪽에 새파일 만들기 버튼을 누르고,
index.html 이라고 쓰고, 엔터를 눌러 파일을 생성해줍니다.
웹사이트의 시작은 항상 index.html이고, 이 시작 파일의 이름은 바꿀 수 없습니다.
만약 https://www.naver.com와 같이 html 파일 이름을 명시하지 않고 사이트에 접속하면
https://www.naver.com/index.html 파일을 열게 됩니다.
다음에는 !를 이용하여 html 기본 코드를 작성해보겠습니다.