HTML 간단한 웹사이트 만들기

Visual Studio Code를 잘 다운로드 받았나요? 이제 본격적으로 HTML을 공부해봅시다!

 

아직 다운로드를 못받으셨다면 이전글을 참고해주세요! 👉

---

 

설치가 완료됐다면 처음으로 웹사이트를 만들어 봅시다!

 

1.VSC에 폴더 추가하기

-우리가 만든 HTML파일을 저장하고 관리하기 위해서 폴더를 하나 만들어 주겠습니다. 경로는 편하신곳에 저장해주세요!

-폴더를 만들으셨다면 VSC를 열어 폴더를 추가합니다!(Open Folder...)

Open Folder... 클릭!

 

만들어둔 폴더를 찾아 폴더 선택 클릭!

 

왼쪽에 자신이 만든 폴더이름으로 등록되면 성공!

여기까지 따라오셨다면 작업할수있는 환경셋팅이 완료된겁니다!

이제 우리가 만들어보려 했던 HTML파일을 만들고 나만의 웹사이트를 만들어 봅시다!

 

2.VSC에서 HTML만들기

New File버튼을 이용해서 html파일을 만들어 줍니다.

원하는 이름의 파일로 뒤에 확장자명만 .html을 붙여주면 완성!

 

3.HTML작성하기

웹사이트에 보여줄 원하는 내용을 작성해보세요!

 

자 이렇게 하면 나만의 웹사이트가 간단하게 완성됐습니다!

잘 만들어졌는지 확인해볼까요?

확인하기 전에 꼭 저장을 해야겠죠? 다른 문서를 작업하고 저장을 안하면 작성한 내용이 안보이는 것처럼 꼭! 저장합시다!

 

4.저장하기

위에 하얀 점이 보이시나요? 저장이 아직 안됐다는 표시입니다! Save클릭!

 

저장을 완료하면 위에 하얀점이 사라질꺼에요! 그럼 저장 완료!

자 그럼 확인해 봅시다!

 

5.확인하기

만든 HTML파일에 오마클!(오른쪽 마우스 클릭) -> 연결프로그램 -> 원하는 브라우저 선택!

이전글에서 설명했듯 HTML은 브라우저가 이해할수 있는 언어로 번역(?)해준다고 했죠?

그래서 연결 프로그램을 브라우저로 선택해서 열어보면?!

저는 네이버 웨일로 열어보았습니다!

나만의 웹사이트 완성!ㅋㅋ

처음으로 만들어본 웹사이트네요! 달랑 글한줄있는 웹사이트지만 시작이 반이겠죠?ㅋㅋ

---

다음 글에서는 조금더 편하게 작업하기 위한 환경을 만들어 보겠습니다!

 

문제가 되는 부분은 언제든지 알려주시면 수정하겠습니다😅