내 홈페이지 무료도메인 주소로 무료 웹호스팅 하기 (1탄)

도메인(Domain)과 웹호스팅(Web-hosting) 개념을 정리했으니 이제 실습을 하면서 이해를 해봐야겠다. 

(다시 언급하자면, 혹시 이 블로그를 보는 사람이 있을까봐..  나는 개발자가 아니다. 그래서 전문 컴퓨터 프로그래머도 아니지만 혹시 나만큼 아무것도 모르지만 알고자 하는 사람이 있으면 도움이 될 것으로 확신한다. 지금 이글을 쓰고 있는 지금 이시간에도 이것저것 독학과 구글링으로 나만의 크롤링(Crawling) 프로젝트를 하고 있으니까.. 이 내용까지 올릴때쯤 되면 진도는 엄청 나갔을 것으로 판단된다. 내가 컴퓨터 관련 이해를 하는데 있어 도움을 준 많은 분들에게 구독과 좋아요도 해 드리고 계속 힌트도 얻고 있다. )

 

각설하고, 

 

1. 내 홈페이지 만들기 

 

처음 이야기했듯이 홈페이지는 HTML이라는 컴퓨터언어로 되어있다. 그래서 일단 기본구조는 앞서 이야기 했지만 조금만 더 알 필요성은 있다. BMW 자동차의 공식 홈페이지를 예로 보자 

 

출처: BMW Korea

 

홈페이지 구조를 간단히 설명하면 

HTML은 홈페이지의 뼈대이고 예쁘게 꾸며지는 것은 CSS라고 한다. 향후 두 언어에 대해서는 별도의 시간을 갖도록 하고... 모든 홈페이지가 꾸며지는 것은 CSS가 작동을 해서 그런것이고 개발자 코드(F12)를 봐도 알 수 있다.

 

다시 BMW 홈페이지를 보면

 

출처: BMW Korea

 

1번 영역이 HTML 영역, 2번 영역이 CSS 영역 (Style), 3번 영역이 명령이 실행되는 영역(Console)이다. 

 

이거 우리가 전문가가 아니고선 못 만든다. 그래픽도 알아야하고 각각 동작하게 만들어야 하고 머리 아프다. 그런데 이런 나만의 홈페이지가 있어야 도메인을 설정하고 웹호스팅을 할텐데...

 

보통 홈페이지 그림만 보면 우리가 사무실에서 늘 봐왔던 파워포인트랑 구조도 비슷하다. 

비슷한 무료 홈페이지를 가져오자.

 

항상 이런 경우 구글이 답이다. !!

 

 

개념을 이야기했으니 free html template 보다는 free css template이 좋을 듯 하고 광고사이트 빼고 클릭하면

 

출처: free-css.com

 

어차피 실습이니 들어가서 아무거나 다운로드하자. 

 

출처: free-css.com

 

다운로드하고 압축된 파일을 풀어서 내용을 한번 보자

 

 

홈페이지의 모든 중심구조는 index.html로 되어 있고, css 폴더도 들어 있다.

여기는 없는데 어떤 template는 licence.txt가 있는데 이를 먼저 봐야 한다. 향후 여기뿐만이 아니라 많은 사이트에서 기존에 만들어진 것을 가져오려면 만든 사람이 어디까지 허용하는지를 먼저 읽어 보는게 좋다. 혹시 우리가 갑자기 우리 홈페이지를 상업적으로 이용한다면 범위에 맞는지 아닌지 확인할 필요가 있다. 

 

 

하여간 이 홈페이지를 보려면 지금 아무 편집기가 없으니 index.html 파일에 마우스 오른쪽 클릭해서 브라우저로 열어보자 

 

 

위와 같은 홈페이지가 나온다, 이거 우리가 못 만든다. 만들더라도 엄청 세월이 걸리고 중도에 포기한다. 얼마나 고마운일인가 무료로 기성품이 있다니... (제작자에게 고맙다는 인사하고..)

 

이 Template을 가지고 내 홈페이지로 만들어 보자. 코드편집기가 필요하다. 여러 고수들과 블로그 구글링을 해보니 Visual Studio Code 편집기가 있다. 이 편집기로 향후 모든 것을 할 예정이니 권장한다. 

 

 

 

공식 홈페이지에 들어가서 운영체계에 맞게 다운로드하고 설치한다. (설치는 동의하고 yes만 누르면 됨.. 그리고 엄청 많은 블로거들이 설치하는 사진을 다 올려놓아서 쉽게 이해됨.. )

 

출처: vscode 

 

음.. 이 편집기는 아주 쓸모가 있는 듯 

 

하여간 설치가 완료되었으면 압축이 풀린 폴더로 가서 오른쪽 마우스 클릭후 'Code로 열기' 선택

(나중에 알겠지만 파일 하나만 여는게 아니라 index.html이 들어 있는 폴더를 열어야 전부 작동할 수 있음)

 

 

 

그러면 Visual Studio Code (vscode)에서 다음과 같이 나온다. 

 

 

엄청 복잡하다. 나중에 알아보고

 

재목만 살짝 바꿔보자.. 위치를 보기 위해 F12

 

 

이 곳을 vscode 에서 찾으면 쭉 내리면 

 

 

이 부분에 '홈페이지 실습중'과 '화이팅'으로 바꿔보자 

 

 

 저장하고 열어보면 

 

 

짜잔! 

일단 이게 나의 홈페이지라 하고 무료도메인과 무료호스팅을 해보자... 다음 시간에 .....