안녕하십니까~
인포돈 입니다!
지금까지 html, css를 다루면서 여기까지 달려오셨다면, 정말 고생하셨습니다.
오늘은 학습보다는 자신이 만든 결과물을 보고 뿌듯함을 느꼈으면 좋겠습니다.
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 시리즈의 마지막 단계인 홈페이지의 주소를 달아주어 주변 지인 또는 친구들에게 내 결과물을 보여줄 수 있다는 것입니다.
주소를 다는 방법은 무수히 많지만, 저희는 아주 간단하고 쉽고 빠르게~
우선 주소를 달기 전에 간단한 지식을 먼저 배워보고 주소를 달아보도록 하겠습니다.
우리가 흔히 쓰는 naver.com 이런 주소들은 어떻게 만들까?라는 의문이 듭니다.
바로 client와 server로 나누어서 관리하고 있기 때문입니다. 우리가 만든 결과물을 우리만 볼 수 있게 한다면, 많은 결과물들이 의미가 없어지게 됩니다.
그래서 만들어진 게 바로 client와 server라는 개념입니다.
기본적인 원리는 client 즉, 우리가 네이버라는 도메인을 치고 들어가게 되면 네이버의 server에서는 저희가 만든 홈페이
지 코드들처럼 naver만의 index.html을 가지고 있습니다. 그러한 파일을 우리의 웹브라우저에 보내주게 됩니다.
그럴 경우 저희의 홈페이지는 그 index.html 파일을 열어 우리가 평소에 사용하는 naver을 사용할 수 있게 되는 것이죠
그렇다면 저희가 만든 웹서버를 다른 client들이 사용하려면 저희 컴퓨터 자체를 server로 만드는 방법이 있고 남의 server를 빌리는 방법이 있습니다.
이 두 개를 각각 web server와 web hosting이라고 부릅니다.
저희 컴퓨터를 server로 만드는 방법은 굉장히 어렵고 혼란스러울 것입니다.
(좀 더 깊게 공부하고 싶으시면 자신의 컴퓨터에 server를 구축하는 것도 큰 공부가 됩니다.)
그래서 저희는 web hosting방법을 통해 server을 개설하여 주소를 달아주도록 하겠습니다.
이미 인터넷 상에서는 web hosting을 도와주는 많은 플랫폼들이 있습니다.
대표적으로 몇 개를 소개해드리면
1. bitballon.com
2. necities.org
3. amazon S3
4. Google Cloud Storage
5. Azure Blob
이렇게 5가지를 소개해 드릴수 있습니다. 모두 괜찮은 web hosting을 제공한다고 널리 알려져 있습니다 ~
그러나 저희가 사용할 것은 바로 git hub라는 매체입니다.
이미 코드를 입문하신 분들이라면 한 번쯤을 들어보셨을 겁니다.
바로 프로그래머의 성지라고 불리는 사이트입니다. 아직 해당 사이트에 가입을 안 하셨다면, 오늘부터라고 조금씩 만들어 나가는 걸 추천드리겠습니다 ~
아무 검색 포털을 통해 github를 검색해서 들어가시면 아래와 같은 홈페이지가 보일 겁니다.
해당 사이트에 오른쪽 위에 Sing up이라고 회원가입을 하시는 곳이 있습니다. (이미 있으신 분들은 Sing in을 통해 로그인하시면 됩니다,)
자 이제 회원가입을 마친 후 로그인을 했다면 오른쪽 위에 아래 그림과 같은 +아이콘이 있을 것입니다. 그곳에서 New repository을 눌러주세요
눌러주셨다면 아래와 같이 여러 항목을 기입하는 공란이 나올 겁니다.
Repository name : 자신이 만드는 래퍼 지토리의 이름 입력
Description : 해당 래퍼 지토리의 설명 입력(굳이 임력 안 하셔도 됩니다)
Public/private : 해당 페이지를 누구에게 보여줄 것인가 (public으로 하시면 됩니다)
여기서 이제 중요한 것!
바로 꼭 Add a README file을 체크해주고 생성해주셔야 됩니다.
이제 저희가 만든 파일을 올려야겠죠? 생성한 래퍼 지토리에 보면 ADD FILE이라는 버튼이 보이실 겁니다. 그곳에 Upload files를 누르시고 해당 파일을 모두 올려주시면 됩니다. (해당 파일들이 다운로드하실 때 하나의 파일로 만들어져 있을 겁니다.) 싹 다 올려주시면 됩니다.
다 올려주셨다면 아래 쭉 쭉 내리시면 Commit changes가 있을 겁니다. 위에 있는 동그라미란에 코멘트를 넣는 것입니다. 예를 들어 "html로 홈페이지 만들기"와 같은 자신만의 코멘트를 달아준 뒤 Commit directly to the main branch를 체크해주고 Commit changes를 눌러줍니다.
이제 거의 다 오셨습니다. 이제 다시 래퍼지토리로 돌아가시게 될 겁니다. 그러면 Setting이라는 카테고리로 가주시면 됩니다.
Setting에 들어가서 스크롤을 아래로 쭉 내리시면 GitHub Page가 있을 겁니다. 그곳에서 Source를 아래 제가 하는 것처럼 main에 root를 선택해주시고 옆에 있는 버튼인 Save를 누르시면, 홈페이지 만들기가 끝이 납니다.
*해당 주소를 만들고 나서 바로 들어가시면 404라는 오류가 뜰 것입니다. 많은 오류가 있을 수 있지만 위와 같이 따라 하셨다면, 어느 정도 시간이 지나면 해결이 됩니다. (웹 호스팅을 신청한 후 조금의 딜레이가 있어야 반영이 되기 때문입니다.)
원래의 계획보다 조금 짧아진 프로젝트였습니다.
간단히 html과 css에 대해 배우면서 스스로 홈페이지까지 직접 제작해본 경험은 아주 큰 경험이었다고 자신할 수 있습니다.
각자의 홈페이지를 주변 지인들에게 보여주어 자랑하셔도 됩니다. ~~
자신감을 가져도 됩니다.
총 8개의 HTML로 만드는 홈페이지입니다. 이전 단계의 내용을 훑어보시면서 홈페이지 제작에 도전해보세요
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 1(계획)
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 2(개발환경구축,atom)
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 3(태그, 속성)
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 4(CSS)
HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 5(CSS)
'토이 프로젝트 > HTML로만드는 홈페이지' 카테고리의 다른 글
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 7(홈페이지제작) (0) | 2021.03.08 |
|---|---|
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 6(CSS) (0) | 2021.03.05 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 5(CSS) (0) | 2021.03.04 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 4(CSS) (0) | 2021.03.03 |
| HTML로 만드는 홈페이지, 누구든 쉽고 빠르고 간단하게 - 3(태그, 속성) (0) | 2021.03.02 |
