생활코딩 따라하기 01-2. 코딩 실습환경 준비

웹사이트를 만들때 사용되는 프로젝트의 폴더가 될 새폴더(web)를 만들어줍니다.

 

 

 

그 후 에디터(Visual Studio Code) 상단의 [파일]→[폴더열기]를 눌러 아까 만든 web폴더를 선택해 열어주면

위 사진과 같이 탐색기 부분에 WEB이라고 뜨게 됩니다.

 

 

 

왼쪽 탐색기 부분의 WEB에 마우스를 올리면 왼쪽사진과 같은 아이콘들이 나오게 되는게 거기서 새파일 아이콘을 누른 후 파일의 이름을 정해주어 생성합니다.

 

 

 

html 파일 생성

이름은 1.html로 정해주었는데,

여기서 1은 이름, .html은 확장자명입니다. (ex. 워드-docx, 한글-hwp)

이름은 마음대로 변경해도 괜찮으나 확장자명은 마음대로 바꾸어서는 안됩니다.

 

 

 

이제 웹과 연결하기 위해 웹을 열은 후 (Window에서) 단축키 'Ctrl + O'를 눌러주면 창이 하나 뜹니다.

브라우저를 Chrome이나 Explore가 아닌 Edge를 사용한다면 창이 뜨지 않을 수 있습니다.

이제 창에서 아까 만든 html파일을 선택해 열기를 눌러줍니다.

 

 

 

그러면 위와 같은 공백의 웹페이지가 뜹니다.

이제 에디터에서 코드를 작성하면 해당 웹페이지에서 결과가 보여지게 됩니다.

 

 

 

에디터에 'hello web'을 작성한 후 저장한 다음, 웹을 새로고침을 하면 제가 작성한 'hello web'이 창에 뜨게됩니다.

이렇게 나오게 된다면 웹과 연결할 수 있게 된겁니다.

 

---

https://www.youtube.com/playlist?list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb

WEB1- HTML & Internet