(VS Code)HTML 준비과정 - 02. 파일 저장하기 & 폴더 구성방법_비주얼 스튜디오 코드(Visual Studio Code)

(VS Code)HTML 준비과정 - 02. 파일 저장하기 & 폴더 구성방법_비주얼 스튜디오 코드(Visual Studio Code)

HTML 준비과정 - 02. 파일 저장하기 + 폴더 만들기

Tip! Visual Studio Code 단축키도 같이 알려드릴께요!

 

[ STEP1. 비주얼스튜디오코드에서 html 파일을 새로 만드는 방법 ]

✔️ 1. 첫 화면에서 New File을 눌러 만들기

→ 단축키 : Ctrl + N

 

✔️ 2. 저장하고 싶은 폴더에 html 문서 만들기

🔸순서 > 

1) html 문서를 저장할 폴더를 만들기 → 2) Open Folder를 클릭해 폴더를 열기 → 3) 폴더 선택

→ 4) VS Code왼쪽에서 저장하려는 파일 위치에서 옆에 첫 번째 아이콘을 눌러서 파일을 만들어주세요!

→ 5)★파일 저장시 파일명.html로 작성 후, enter을 눌러주면 새파일 생성 완료!

 

🔸단축키 > 

Open Folder : 단축키 : Ctrl + O

2. Open Folder를 클릭해 폴더를 열기 

3) 폴더 선택

4) VS Code왼쪽에서 저장하려는 파일 위치에서 옆에 첫 번째 아이콘을 눌러서 파일을 만들어주세요

5)★파일 저장시 파일명.html로 작성 후, enter을 눌러주면 새파일 생성 완료!

 

 

 

[ STEP2. html 저장할 폴더 만들기 ]

✔️ html 문서를 저장할 폴더 만들기

🔸순서 > 

1) 새폴더 만들기(저는 tstory_html이라는 폴더명으로 만들었어요) → 2) 폴더 안에 CSS, fonts, imaged, js 폴더를 각각 만들어주기 → 3) VS Code에서 저장하는 html 문서는 폴더안에 넣지 마시고 반드시 첫번째 화면에 위치해야 해요!★(html저장 위치가 매우 중요!!)★

ㄴ→ 즉, tstory_html 폴더를 누르면 나오는 첫 번째 화면에 html 문서가 있어야합니다!

 

😄 위의 이미지처럼 폴더와 문서까지 다 만들어지셨나요?
"그럼 다음 글에서는 html 작성을 다 한 후, 실행해서 볼 수 있는 방법을 알려드릴께요!"

 

😊궁금한 내용이나 질문이 있으시다면
댓글로 남겨주시면 답변 남겨드릴께요ㅎㅎ
자세한 설명이 필요한 경우 글쓰기를 통해
자세히 알려드릴께요~😄