2021.04.12 메인 페이지 만들기

2021.04.11 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.11 한라열쇠 홍보용 웹페이지

2021.04.11 한라열쇠 홍보용 웹페이지

 

 

 

우선 Django로 웹페이지를 띄울 서버를 만들어봅니다.

파이썬으로 프로젝트 폴더를 만들고, django를 설치해서 설정하고 서버를 키고, http://127.0.0.1:8000/에 접속해봅니다.

django로 서버를 만들고 http://127.0.0.1:8000/으로 들어가면 나오는 첫 화면

메인 페이지는 http://127.0.0.1:8000/hallakey로 접속하면 메인 페이지의 html 파일인 main.html이 나오게 설정해놨습니다.

 

 

 

 

 

 

 

이전에도 개발하면서 많이 느낀 점은, 제가 디자인 센스가 많이 안 좋다는 것이었습니다.

이번에 만드는 것은 홍보용 웹페이지니까 이쁘게 만들어야하는데 말이죠.

저와 같이 자신의 디자인 센스를 믿지 못하는 개발자에게는 좋은 해결책이 있습니다.

바로 Bootstrap입니다.

bootstrap 메인 화면

 

메인 페이지는 웹페이지의 얼굴이니까 bootstrap으로 만들어진 무료 템플릿을 적용하기로 했습니다.

제가 한땀한땀 만든 것보다는 아무래도 어떤 전문가가 만들어 놓은 것이 더 나을 테니까요.

bootstrap 무료 템플릿에 대해 검색하다 보니 아래와 같은 좋은 사이트가 있었습니다.

Free Bootstrap Themes, Templates, Snippets, and Guides

여러 디자인과 형식에 따른 템플릿들을 유, 무료 버전으로 제공해주는 사이트입니다.

다만, 가짓수가 엄청나게 많지는 않습니다.

 

저는 메인 페이지에 적용할 것으로 밑의 템플릿을 골라봤습니다.

Creative - One Page Bootstrap Theme

0123

적용할 템플릿의 위에서부터 아래로의 화면들

 

 

 

위의 템플릿에서 내용과 사진들 그리고 각 구성요소의 색깔들을 검은색 위주로 변경해서 적용했습니다.

서버를 키고 http://127.0.0.1:8000/hallakey에 접속하면 밑의 메인 페이지가 나옵니다.

0123

템플릿에 내용과 색깔 변경

위 슬라이드의 두 번째 사진에서 디지털 도어락 아이콘이 마땅한 게 없어서 일단 대체 아이콘으로 넣어놨습니다.

세 번째 사진에서의 갤러리도 가게 사진이 많지 않아서 일단 대체 사진으로 넣어놨습니다.

부모님께 가게 사진을 많이 찍어서 보내달라고 하거나, 본가에 내려가면 자료용으로 많이 찍어야겠습니다.

 

페이지에 들어가는 문구들은 제가 생각나는대로 넣은 것이라 부모님께서 보시고 이상하다 싶으면 모두 바꿀 예정입니다.

 

 

 

※ 궁금한 부분, 이상한 점 및 오타는 댓글에 부탁드립니다.

 

 

 

다음 글:

2021.04.13 - [개발 일지/한라열쇠 홈페이지(Web)] - 2021.04.13 오시는 길 페이지 만들기

2021.04.13 오시는 길 페이지 만들기