HTML 기초 내용 정리 - 3

오늘은 

https://opentutorials.org/course/3084/18891

웹호스팅 (github pages) - 생활코딩

여기부터 공부를 시작 할 것이다.

차근차근 따라해보자.

 

우선 할 일은 1. 깃허브 가입 2. 저장소(repository)생성 3. 파일 업로드 4. 링크 생성 이다.

깃허브 가입은 이미 되어있어서 생략하겠다.

 

깃허브 로그인 후 왼쪽 위 사진

위 사진에서 초록색 New버튼을 누른다.

이제 1번에는 저장소 이름, 2번에는 저장소의 공개 여부를 기입한 뒤 3번에는 빨간 박스부분을 체크하고 밑에 Create repository버튼을 누르면 된다.

그리고 이곳에서 Add file을 누른 뒤 Upload files를 하고 파일들을 올리면 된다. 나의 경우 만든 html파일과 사진을 업로드했다.

이제 맨 오른쪽에 있는 settings를 누르자.

쭉 내리면 아래와 같은 화면을 찾을 수 있다

여기서 branch를 main으로 바꾸고 save를 누르면 위와 같이 링크가 뜬다.

저걸 클릭해서 들어가면???

이게 아닌데..? 여기서 막혀서 구글링을 좀 했다.

https://m.blog.naver.com/dnjswns2280/221804582546

[web] 깃허브 웹 호스팅

마지막에 파일명.html을 넣어주면 잘 작동한다고 한다. 한번 해보자.

오!!!!

만든 웹 페이지가 제대로 동작하는것 까지 확인! 

---

https://opentutorials.org/course/3084/18893

웹서버 운영 : 윈도우 - 생활코딩

마지막 단계!

우선 bitnami를 깔았다. 아래 링크에서 간단하게 설치할 수 있다. (시간이 조금 걸린다.)

https://bitnami.com/stack/wamp

WAMP

중간에 MySQL의 비밀번호를 설정하는 창이 뜨는데 지금은 안필요하지만 나중에 필요할 수 있으니 잘 기억해두도록 하자.

 

이렇게 설치를 완료한 뒤 Go to Application을 누르면 아래와 같은 페이지가 열릴 것이다.

이렇게 나오면 잘 깔린 것이다.

위 페이지의 주소는 localhost라고 되어있다. 이는 

http://localhost/index.html
http://127.0.0.1/index.html

와 모두 같은 페이지를 나타낸다.

localhost와 같이 의미가 있는 이름을 도메인 네임(domain name)이라고 부른다.

127.0.0.1과 같이 번호로 되어 있는 것을 ip 주소(ip address)라고 부른다.

 

그리고 index.html파일은

C:\Bitnami\wampstack-8.0.0-0\apache2\htdocs

이곳에 존재하고 있다. htdocs는 hypertext documents의 약자로 웹페이지가 저장된 디렉토리를 의미한다. 

이 파일이 우리가 위에서 주소에 적은 html파일이 맞는지 확인해보자

나는 이전에 깔아둔 프로그램을 이용했다.

이렇게 hi!!!라고 적고 저장한 뒤 새로고침을 하면?

이렇게 변경사항이 적용된다.

---

다음 실습을 진행해보자.

노트북 아래쪽에 있는 와이파이모양을 우클릭하고 네트워크 및 인터넷 설정 열기를 클릭하자.

연결 속성 변경을 누르고 쭉 내리면 속성에 IPv4주소 라는 항목이 있는데 이것이 자신의 컴퓨터의 ip주소이다.

휴대폰과 노트북을 같은 와이파이에 연결하고 나의 경우 10.70.22.185를 휴대폰에 링크창에 입력하니

이렇게 컴퓨터와 같은 화면을 볼 수 있었다.