네번째 세션에서는 시작하기에 앞서 지난주까지 진행했던 아이디어 위크를 기반으로 아이디어를 확정하고 아이디어 마다 새롭게 팀 배정을 했습니다!
실습 목표
웹서비스를 개발한다 == 서버용 프로그램을 만든다.
정리하자면
배포
로컬에서 만든 페이지에 누구나 접근할 수 있도록 공개하는 것.
웹 호스팅
서버용 프로그램 (HTML,CSS,JS) 을 제공하여 업체가 대신 웹페이지를 운영하도록 하는 것.
오늘은 정적 웹페이지 배포를 실습한다.
동적 웹페이지
네이버 블로그, 티스토리 등 우리가 접하는 대부분의 페이지
사용자와 상호작용한다.
게시글 작성 가능, 설정 변경 가능.
⇒ 데이터베이스 DB 필요
정적 웹페이지
jekyll로 만든 블로그 등
⇒ 사실 블로그는 게시글 열람 외 사용자와 상호작용할 일이 거의 없어 정적 웹페이지만으로 구현할 수 있다.
미리 만들어놓은 페이지만 열람 가능
서버간 통신이 거의 없고, 빠름.
Free Bootstrap Themes, Templates, Snippets, and Guides
템플릿을 따로 모아두는 페이지가 있다.
Creative - One Page Bootstrap Theme
오늘 사용할 템플릿
원하는 템플릿을 골라와도 상관 없으나 저작권에 유의해야 한다.
MIT License?
수정, 배포가 자유로우며 실무 혹은 상업적인 이용 가능한 오픈소스 라이센스
코딩강의에서 bootstrap의 요소를 짜집기 해봤고, githubPage로 배포도 해봤다.
오늘은 완성된 템플릿을 이용해 나만의 페이지를 만들어보자.
다운로드된 압축파일 압축 해제
이미 완성된 페이지이므로 코딩강의에서 다루었던 jquery는 이미 index.html에 적용되어있다.
주소를 잘 확인할 것. 우리가 흔히 아는 www.~~.com이 아니라 해당 파일의 로컬주소다.
이런 주소로는 다른사람에게 내 페이지를 보여줄 수 없다.
f12
로 개발자 모드를 열 수 있다. 커서모양을 클릭하면 각 부분이 어떤 코드에 해당하는지 확인할 수 있다.
첫 페이지는 masthead class를 사용한 부분이다.
/css
폴더에서 styles.css
를 열고 masthead
를 찾는다.
이미지가 위치한 주소를 확인할 수 있다.
해당 위치로 가서 이미지를 열어보면 표지이미지를 찾을 수 있다.
이미지를 추가하고, 주소를 바꿔보자.
chrome에서 새로고침하면 바뀐 이미지를 확인할 수 있다.
이 외의 이미지는 index.html
에서 동일한 방식으로 수정할 수 있다.
아직 html 읽는게 익숙하지 않다면 지금까지 한 것 처럼 웹 브라우저 켜놓고 일일이 확인해보는 방법을 사용하면 된다.
웹 호스팅 업체에 페이지 운영을 맡기는것이 웹 호스팅이라고 했다.
github, netlify, heroku 등에서 웹 호스팅 서비스를 제공한다.
Netlify: Develop & deploy the best web experiences in record time
가입
항목은 자유롭게 채우면 된다.
우리는 github에 템플릿을 올렸으므로 github 선택
이런 팝업이 뜨고
내 repo 목록이 나온다. 원하는 repo를 선택
소스코드를 사용할 수 있는 상태로 만드는 것을 build라고 한다.
예를들어 node js를 사용했을 경우 npm run build 를 사용한다.
이번엔 부트스트랩만 사용했으므로 공란으로 남긴다.
repo에 다시 커밋하고 새로고침하면 다른 작업 없이도 변경된 내용으로 재배포된다.
웹페이지를 구분하는 고유값으로, 일반적으로 주소를 도메인이라고 말한다.
우측에서부터 좌측으로 읽으며 `.`을 기준으로 분류된다.
도메인 이름
사용자가 지정. 고유한 값
SLD
2차 도메인, 차상위 도메인
일반적으로 도메인 이름을 등록한 조직이 해당된다.
TLD
1차 도메인, 최상위 도메인
일반 최상위 도메인 : `.com` `.net`
국가 최상위 도메인 : `.kr` `.jp`
Netlify에서 무료로 변경할 수 있는 도메인은 '도메인 이름'이다.
완성한 페이지의 소스코드를 submodule로 등록한 repo에 올리고,
배포한 페이지 주소를 하단 테이블에 올려주세요
기한 : 5주차 세션 (5/19) 시작 전까지
style.css
에서 bg-masthead.jpg → 원하는 이미지