🥴 생활코딩 HTML (3)

💛 HTML&CSS Vs JavaScript

• HTML&CSS: 정적인 웹을 제작할 수 있다.
• JavaScript: 동적인 웹을 제작할 수 있다.

💛 웹을 만들어서 배포하기 위해서는 웹에 대해서 잘 알아야 한다~!

📌 인터넷을 여는 열쇠: 서버와 클라이언트

• 서버: 클라이언트의 요청에 응답한다.
• 클라이언트: 서버에게 원하는 정보를 요청한다.
  
  서버를 업체에 맡긴 후에 쓰는 경우가 있고, 직접 까는 경우가 있다.
• web server: 직접 깔기.
• web hosting: 업체에 맡기기.

📌 Web hosting

hosting=cloud와 거의 비슷하다고 바라보면 된다.
클라우드 업체가 서버를 빌려주는 업체라고 생각하면 된다.
대표적으로, Github이 있다.

필자의 깃허브 블로그 주소

repositary를 만든 이후에 파일을 upload하면 된다.
2가지 경우가 있다.

• create new file
• upload files

1. github page > main > save: 웹서버가 활성화된다.
   
2. action > pages build and deployment: 웹서버가 어떤 단계에 놓여있는지 보여주는 페이지이며, 수정사항은 build와 deploy가 끝나면 갱신된다.
   

📌 Web server

우리는 web server for chrome을 이용할 것이다.

web server for chrome

웹서버를 거치는 것과 그냥 파일을 여는 것은 엄청나게 다르다.
이 그림은 웹서버를 거친 후에 원하는 정보를 전달하는 과정이다~!

같은 컴퓨터인 경우는 localhost, 즉 127.0.0.1이라는 IP Address를 갖는다.
하지만 우리는 항상 다른 컴퓨터에게 요청하고, 응답받아야 한다.

📌 수업을 마치며...

현업으로 가고 싶은 사람은~!

1. 배운 것을 잘 이용해서 어떤 지식을 잘 사용할 것인지 정리를 해보자.
2. 💛 그 과정에서 나만의 프로젝트를 꼭 만들어보기.

📌 부록-코드의 힘

💛 반드시 웹서버를 통해서 열어야 코드가 돌아간다. 왜냐하면 보안 상 문제 때문이다.
💛 제대로된 웹사이트를 만들었을 때, 계정을 생성하고 github에서 가져온 링크를 붙여주자~!

1. 동영상 삽입하기.

   YouTube IFrame Player API
   YouTube 고객센터: 동영상 및 재생목록 퍼가기

2. 댓글 기능 추가하기.

   Discus
   LiveRe

3. 채팅 기능 추가하기.

   Tawk

4. 방문자 분석기.
   근데 이 부분은 나중에 제대로된 웹사이트를 만들었을 때, 분석하는 용도로 이용하기.

   Google Analytics

😀 마무리...

많이 찾아보고, 많이 만들어보면서 실력키워나가기~! 내가 만들어보고 싶었던 것을 기획해보고 할 수 있을 때까지 끝내보기~!