로또번호 생성 웹사이트 무료로 만들기 7(완성)

이제 완성된 파일을 github에 올려보도록 하자.

$ git add .
$ git commit -m "final"
[master 9ff1993] final
 6 files changed, 1177 insertions(+), 6 deletions(-)
 create mode 100644 auto.html
 create mode 100644 guardy.jpg
 create mode 100644 select.css
 create mode 100644 semiauto.html
 create mode 100644 style.css
$ git push origin master
Enumerating objects: 8, done.
Counting objects: 100% (8/8), done.
Delta compression using up to 8 threads
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 26.60 KiB | 13.30 MiB/s, done.
Total 7 (delta 1), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (1/1), done.
To https://github.com/dev-guardy/lotto
   04492be..9ff1993  master -> master

다음과 같이 github에 upload 시켜주었다. github의 주소에 가서 정상적으로 올라왔는지 확인해보자.

dev-guardy/lotto

정상적으로 올라와있는 것을 확인할 수 있다. github에도 올라갔으니 조금 기다리면 github.io 페이지에 들어가면 우리가 만들었던 웹페이지를 로컬  환경이 아닌 네트워크 환경에서도 접속할 수 있다.

https://dev-guardy.github.io/lotto/ 에 접속했더니 다음과 같은 에러가 뜬다.

Mixed Content: The page at 'https://dev-guardy.github.io/lotto/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-3.1.1.js'. This request has been blocked; the content must be served over HTTPS.

에러가 뜨는 이유는 우리가 html파일에서 link로 jquery를 불러왔기 때문이다.

우리는 이를 해결하기 위해서 jquery-3.1.1.js파일을 다운받아서 local에 넣어줘야 한다.

html파일에서 다음 부분을 아래와 같이 수정한다.

 

수정전

<script src="http://code.jquery.com/jquery-3.1.1.js"></script>

수정후

<script src="jquery-3.1.1.js"></script>

수정을 한 뒤 다시 github에 올리고 확인해보자.

웹페이지에 업로드한 사이트

정상적으로 작동한 것을 확인할 수 있다 사이트를 다 만들었으니 피드백을 해보도록 하자.

 

FeedBack

1. 최대한 간단하게 만들다보니 효율적이지 못하다.(navigation footer와 같이 중복되서 사용되는 것들은 하나의 html로 사용하여 참조하여 사용해 코드를 간결하게 만들어야했다.)

2. 동적(DB, link 사용)을 사용하지 못하니, 만들고 싶은 여러 기능들을 만들 수 없다.(최근 나온 번호 자동 제외 등)

 

그래도 초보자분들이 HTML과 CSS JAVASCRIPT 만으로 무료로 홈페이지를 만드는 것을 따라하기에는 적절한 난이도라고 생각한다.

 

Github 페이지에서 소스코드는 다운받아가시면 됩니다.

이해가 안되는 부분들이나 질문이 있으면 댓글로 남겨주세요! 

 

Github 주소 : https://github.com/dev-guardy/lotto

완성된 홈페이지 주소 :  https://dev-guardy.github.io/lotto/