비전공자가 유튜브 보고 웹사이트 만들기2 <오픈소스로 웹사이트 만들기>

https://howtobeefiifient.tistory.com/category/Coding/Web

'Coding/Web' 카테고리의 글 목록

오픈 소스 이용하여 html 코딩하기

 

오픈소스는 코딩 마트에서 장을 보는 것과 같다.

html 직접 작성할 필요 없이 구글이나 다른 사이트에서 이미 작성된 템플릿을 가져와 사용한다.

 

구글에서 html free template 검색해서 무료 사이트에 접속한다.

https://www.free-css.com/free-css-templates

Download 3459 Free Website Templates - CSS & HTML | Free CSS

단, 저작권 주의해야 한다.

다운로드 후 압축 풀기

 

압축 푼 후 VSC 프로그램으로 파일 열기

Index.html 파일 열면 템플릿에 대한 html 정보를 볼수 있다

---

이제 위 html VSC에서 내용만 바꿔주면 나의 홈페이지를 만들 수 있다

VSC는 복잡해서 특정 내용을 찾기 힘들다면 아래 단축키를 이용하여 검색착을 활성화 시킬 수 있다.

Ctrl + F :검색창 활성화

 

위 기존 사이트 제목인 

we make simple design을 html 에서 찾는다.

오픈 소스를 가져온다는 의미는 위와 같이 

무료로 혹은 유료로 온라인에 오픈 된 소스를 가져와 나에 맞게 수정 편집한다는 의미이다.

 

오픈소스로 쉽게 코딩가능 하다!!

---

Deploy (호스팅 & 도메인 설정)

 

지금 현재까지 내가 작업한 웹페이지는 내 컴퓨터 안에만 존재한다.

따라서 다른 사람들이 내가 작업한 웹으로 유입이 될 수 없다는 말이다.

호스팅과 도메인 설정을 통해 내가 작업한 웹을 전세계에 공개할 수 있다

그 방법 중 가장 좋은 방법은 외부 서버를 빌리는 것이다. 

 

외부서버 이용하기

외부서버는 유료 서비스도 있고 무료로 제공되는 서비스도 있다.

아래 링크는 무료 사이트 중 하나인 netlify.com 이다.

https://www.netlify.com/

Develop and deploy websites and apps in record time | Netlify

전에 작업한 index.html의 바로 위인 상위폴더를 드래그 하여 첨부해주면 아래와 같이 주소가 생성된다.

위에 생성된 주소를 클릭하면 작업한 웹으로 이동하는 것을 볼수있다

위 주소 링크는 공유가능하며 세계 어디서든 나의 사이트에 접속할 수 있게 되었다.,

 

사이트 링크 이름을 임의로 바꾸는 것도 가능하다

세팅에 들어가 이름바꾸기를 클릭하면 원하는 이름으로 바꿀 수 있다.

 

VSC 에서 계속적으로 수정을 하는 경우

나의 웹사이트에는 즉각적으로 반영되지 않는다.

VSC에서 수정한 내용을 앞서 같은 방법으로 Deploy 해주어야 한다. 

index.html 파일을 드레그하여 업로드해주면 수정된 내용이 나의 웹사이트에 반영된다.

---

 

위 모든 내용은 아래 조코딩 유튜브를 보고 요약한 내용입니다.

https://youtu.be/4mRae9N2pU4

도메인 등록하는 방법은 아래 영상 참조

https://www.youtube.com/watch?v=_jJSzoV1uSg&list=PLU9-uwewPMe2-R9-taf4oIjwrEZDgE-q2&index=6 

https://howtobeefiifient.tistory.com/category/Coding/Web

'Coding/Web' 카테고리의 글 목록