HTML코딩 - 생활코딩 16강 ~ 19강

주제  : HTML

 

교재 : 생활코딩

 

내용

 

1.웹크라우저와 웹서버는 고객과 사업(서비스제공)자의 관계

1)웹브라우저(web browser)는 웹서버(web server)에게 특정 정보를 요청하는 고객(client)

2)웹서버(web server)는 웹브라우저(web browser)가 요청한 정보에 응답하는 서비스제공자(sever)

-ex1)만약 게임시스템을 만들고 있다면, 사용자들이 게임하는 프로그램은 게임 클라이언트

-ex2)반대로 게임회사가 제공하는 서버의 게임 프로그램은 게임 서버

 

2.웹서버를 사용할 수 있다는 의미 = 내 컴퓨터에 있는 문서를 웹서버 통해 누구나 공유할 수 있음

 

3.웹호스팅 : 웹서버를 전문적으로 빌려주는 비즈니스

 

4.깃허브 페이지 : 소스코드를 이용해서 웹사이트를 운영할 수 있도록 지원

-웹페이지를 배포하고 싶다면

1)저장소 만들기

2)저장소 -> code -> 웹페이지 주소 밑의 uploading an existing file -> 파일 드래그 -> Commint changes

3)웹호스팅하기 : 깃허브 저장소 -> Settings -> Pages -> Option ->  Branch 밑에 None -> main -> save

4)웹호스팅이 되기까지 시간 소요, 과정 보고 싶으면 Action에서 볼 수 있음

->Action 내 pages build and deploymentd을 클릭하면 설치되는 과정을 세세하게 볼 수 있음!

5)내가 배포한 페이지 주소는 깃허브 저장소 -> Settings -> Pages

4)이후 파일 내용이 변경되어 업뎃하고 싶다면 저장소로 들어가 +버튼 -> Upload files 를 통해 다시 업로드하면 됨

5.게시자 - 호스팅 업체 - 방문자의 관계

1)게시자가 자신의 소스코드를 호스트에 웹포스팅(ex)1.html)의 형태로 업로드

2)호스트는 게시자의 웹포스팅에 설치되어 있는 웹서버를 활성화, 도메인(https://.~)의 이름을 부여

3)방문자가 도메인주소로 접속하면 웹서버가 1.html을 읽고 방문자에게 1.html의 소스코드 전송

4)방문자의 웹 브라우저에 웹페이지 표시됨

 

6.웹서버 직접 운영하기

visual code 확장 프로그램 중 live server 설치 -> go live 실행 -> port : 5500으로 서버 실행 -> 실행한 웹서버를 통해 웹페이지 서비스 가능

 

 

 

기타

 

*live server로 실행된 웹페이지는 reload를 하지 않아도 변경된 코드를 실시간으로 보여준다!

 

*웹호스팅할 때 나의 실수..!

HTML게시를 한다는 생각에 html파일만 업로드했다.. 그러다보니 웹페이지 내 사진파일이 없어 볼 수 없었다..ㅎ 사진파일도 같이 올리기!

ㅎㅎㅎ...

^^

 

느낀점

깃허브에 내가 만든 소스코드를 올려서 사람들과 공유할 수 있다는게 신기했다!

코딩을 통해 새로운 세계로 들어가는 느낌이 들었다. 이 세계는 얼마나 클지, 내가 모르는 게 얼마나 많을지 궁금하다.