학교에서 배운 html로 반응형 웹페이지 만들어보기

전공 교양중 html5을 배우는 수업이있었다. 이 수업은 html과 css그리고 자바 스크립터를 배우는 과목이였다.

나름 나쁘지 않은 과목이였다. 교회 웹사이트 구축이나 우리가 보고있는 html언어가 궁금했기 때문이다. 그렇게 기말고사쯤 될쯤에 교수님은 우리에게 과제를 주셨다. 지금까지 배운곳까지 웹사이트를 만들고, 호스팅을 해서 실제로 접속 가능한 사이트로 구축하라는 것이다. 제작을 드러가려고 하니 쉽지 않았다..ㅋㅋㅋ 배운거는 눈꼽만큼 거이 없었기때문에...ㅋㅋㅋㅋ 막상 배울때는 쉬웠지만 역시 실제로 사용할때는 어려웠다.  역시 실사용과 이론과는 조금 다른것같다.

 

제작에 들어가기 앞서..

우리는 실습과 언어를 배울때 이상하게도 메모장으로 했다. 겁나 힘들었는데 좋은 프로그램을 하나 찾았다.

brackets이란 프로그램이다. 

Brackets프로그램 홈 화면입니다.

brackets프로그램은 adobe에서 오픈소스 에디터로 누구나 사용할 수 있는 프로그램입니다. 그래서 무료로 사용이 가능합니다. 그리고 장점으로 라이브로 미리보기가 가능합니다. 그래서 작성중일때도 변경되는점을 확인할 수 있어 좋은 기능이 있습니다.

 

디자인은 어떻게?..

디자인을 하기전 어떤 구도로 디자인할지 아이디어가 없어 인터넷에서 디자인을 연감을 받아 만들었습니다. 지금은 유료화가 되었지만 예전에는 모든 정보를 볼 수있었던 uplabs에서 디자인을 영감을 받았습니다. 이 사이트에서는 아이폰, 안드로이드, 웹사이트, 일러스트 등등 디자인을 보거나 디자인을 구매할 수 있는 사이트라서 저는 디자인을 하기전 영감을 많이 얻는 사이트입니다. 

 

uplabs 웹사이트 홈입니다.

 

 

디자인을 시작해보자!..

디자인은 이제 시작입니다. 디자인은 종이에 할 수 있었지만 저는 필체가 좋지 않고...크흠 그래서 프로그램을 통해 디자인을 할 계획을 했습니다. Adobe의 XD프로그램입니다. 이 프로그램은 매우 다루기가 쉬워서 좋았습니다. 처음다뤄볼때도 어렵지 않았아 익히는데 1시간만에 익혀 사용했습니다. 안드로이나, 아이폰, 웹사이트, 일러스트등 디자인할 수있어 매우 좋습니다. 한번 사용해보세요 

Adobe XD를 통해 디자인하는 모습입니다.

작업을 시작해보자!..

이제 디자인도 끝내고 했으니 Brackets프로그램으로 html을 작성을 시작합니다. 저는 당시 화면은 없지만 깃허브가 존재합니다. MoyaMoya은 프로젝트 명입니다. 저는 작업당시 반응형을 어떻게 해야하고, css를 어떻게 다뤄야할 지 잘 모른상태에서 인터넷을 통해 정보를 찾아가며 만들었습니다. 그런데 프로젝트가 끝나고나서 부트스트랩이란 라이브러리?를 찾아버려서 울어버렸지 뭐에요 ㅠㅠ

부트스트랩 홈화면입니다.

제 깃허브에서 보시면 아시겠지만 저는 부트스트랩을 사용하지 않고 직접 하다보니 어지럽게 더럽게 작성되었지만, 부트스트랩을 사용하시는걸 추천드리겠습니다. 정리되어있어서 사용하기 쉽고 원하는데로 하기 좋더라구요.... 

특히 요즘 웹사이트는 반응형이 유행이다보니 반응형으로 만들고 싶으시다면 부트스트랩으로 만들어보시는걸 추천드리겠습니다!

 

완성을 하다!!

마지막 호스팅 미션이 있었다. 하지만 필자는 돈이 없는 사람이다 보니 어떻게 호스팅을 할 지 고민했지만, 학교에 사용하지 않는 컴퓨터를 찾아서 Centos를 설치해서 웹서버로 돌려 이 호스팅 문제는 해결했지만, 필자는 엄청 멍청하다

깃허브에 업로드를 하면 웹사이트로 호스팅을 할 수 있다는것이다. 

 

 

깃허브에서 웹페이지 설정 화면

단순히 깃허브에 html파일을 업로드하고나서 설정에서 변경만하면 자동으로 볼 수 있다는 것이다...

나처럼 멍청한 짓을 안했으면 좋겠습니다...ㅠㅠ 그래도 저는 모두 마치고 문제 없이 모두 만들었습니다.

 

제가 만들었던 웹사이트가 궁금하신분은 아래 링크를 통해 접속해서 구경해보세요

https://mookseong.github.io/MoyaMoya/

모야모야

앞으로도 저는 다양한 도전과 시도를 해볼생각힙니다!