웹호스팅업체 사용

github

• 계정 생성 -> 저장소 생성(create a repository) -> 파일 업로드(upload files) -> Settings - Github Pages - main branch - save -> 주소 생성!
• web1

• github에 파일을 업로드하고 pages 기능 활성화 -> github의 서버 컴퓨터에 웹서버가 켜짐 -> my에게 웹서버 주소를 알려줌

• 웹서버의 주소를 방문자에게 알려주면 방문자는 나의 컴퓨터가 아닌 github의 컴퓨터에 설치된 웹서버에 접속하게 된다.

---

Web Server 설치

Apache Web Server

• Bitnami 를 통해 설치 -> manager - go to application

---

웹서버와 HTTP

• localhost : '내 컴퓨터'라는 의미의 특수한 주소

• 내 컴퓨터에 있는 index.html 파일을 요청하는 주소

  • http://localhost/index.html -> 1. domain name
  • http://127.0.0.1/index.html -> 2. ip 주소
    • Internet Protocol Address

• htdocs 안의 파일 모두를 제거하고 web 안의 파일들을 복사하여 넣으면 페이지가 내가 만든 웹페이지로 바뀐다!

HTTP

• http = HyperText Transfer Protocol
  : 웹페이지를 전송하기 위해 만든 통신 규약

• http://127.0.0.1/index.html 로 웹페이지 열기

  • http:// 로 시작하면 웹브라우저는 http 통신규약에 따라서 웹서버에 접속하게 된다.
  • 웹서버를 stop하면 "사이트에 연결할 수 없음"이 뜸

• htdocs 안의 파일을 열기 = file:///C:/Bitnami/wampstack-7.4.13-0/apache2/htdocs/index.html 로 웹페이지 열기

  • file:/// 로 시작하면 웹브라우저는 파일을 직접 열어서 보여준다.
  • 웹서버를 stop해도 열 수 있다.

---

웹서버와 웹브라우저의 통신

• 웹브라우저가 웹서버에 접속하기 위해서는 웹서버가 설치된 컴퓨터의 주소(ip 주소)를 알아야 한다.

내 컴퓨터의 ip 주소 아는 방법

• '네트워크 및 공유센터' -> 연결 -> 자세히 ->
  Ipv4 주소가 내 컴퓨터의 ip 주소

• http:// 내 컴퓨터의 ip 주소/index.html 로 연결하면 같은 웹페이지가 나오게 된다.

다른 컴퓨터(스마트폰)로 접속하기

• 현재 내 컴퓨터와 같은 네트워크에 연결한 컴퓨터로 접속해야 한다.

---

향후 공부 방향

CSS

• 웹페이지를 아름답게 꾸미고 싶다면
• 웹 퍼블리셔, 웹 디자이너

JavaScript

• 사용자와 상호작용하는 웹페이지를 만들고 싶다면
• 웹 프론트엔드 디자이너, 웹 인터렉티브 디자이너

PHP / JSP / Nodejs Express / Python Django / Ruby on Rails / ASP.net

• 백엔드를 공부하고 싶다면
• 백엔드 엔지니어

Advertisement

• 웹페이지에 광고를 달어 수익을 창출하고 싶다면

---

Ref

• w3school
• 생활코딩 HTML