[파이썬으로 시작하는 웹 프로그래밍 CAMP/주간 리뷰] 소프트웨어 QA, 웹 프로그래밍에 도전하다 : 5주차 “Bootstrap으로 꾸민 블로그를 실 서버에 올리다” by 1기 수강생 하헌우님

반응형 웹을 코딩할 때 애용되는 프론트엔드 프레임워크, ‘부트스트랩’! [파이썬으로 시작하는 웹 프로그래밍 CAMP] 1기를 수강하신 소프트웨어 QA, 하헌우 님께서는 5주차에 이 부트스트랩을 활용하셨습니다.

그동안 자신의 컴퓨터에서만 볼 수 있었던 작업물의 코드를 실 서버에 올리는 법도 배우셨는데요, 구체적으로 어떻게 부트스트랩을 활용하셨고, 어떻게 서버에 올리셨는지 소개합니다.

[파이썬으로 시작하는 웹 프로그래밍 CAMP] 자세히 보기 >>>


DAY 9 : 3/9(수) “Bootstrap을 이용하여, 화면을 꾸며보자!”

Bootstrap이란?

http://getbootstrap.com/

UI 도구 모음으로 CSS 파일과 Javascript 파일로 구성되어 있으며, 반응형 웹을 지원하며, 기본적으로 제공하는 디자인이 유려하여 디자이너가 아닌 사람도 깔끔한 디자인을 적용할 수 있습니다.

저처럼 디자인적 감각이 없는 사람들에겐 정말로 유용한 툴킷인 것 같습니다.

사용 방법도 의외로 간단하여 쉽게 사용할 수 있는데요. 부트스트랩 홈페이지에서 Bootstrap CDN 링크를 복사해서, 적용하고자 하는 HTML 헤더에 붙여넣기만 하면 기본적인 디자인이 적용됩니다.

헤더 영역을 보면 link, script로 되어 있는 부분이 부트스트랩에서 제공하는 CDN의 내용을 붙여넣기 한 것입니다. 적용된 모습은 아래와 같습니다.

이전에는 딱딱한 느낌이었던 홈페이지가 확 바뀌었습니다.

그리고 소스의 헤더 영역에 있는 meta 태그의 내용은 반응형 웹 – 즉 휴대폰 화면으로 보더라도 페이지가 작게 표시되지 않게 해주는 내용이라고 보면 됩니다.

부트스트랩의 수많은 기능은 부트스트랩 홈페이지에 나와 있으니, 찬찬히 살펴보면서 연습해 봐야겠습니다.


DAY 10 : 3/12(토) “실 서버에 내 블로그를 올려보자!”

지금까지는 제가 만든 페이지는 제 컴퓨터에서만 볼 수 있었지만, 이 시간에는 실 서버에 소스들을 올려, 인터넷으로 제 블로그를 볼 수 있도록 해보았습니다.

Pythonanywhere’라는 곳을 이용하여 쉽게 서버를 구축할 수 있습니다.

웬만한 파이썬 라이브러리들은 이미 다 설치되어 있어서 정말 편리한 곳입니다. 쉽게 말하면, 해당 페이지에 자신의 코드를 업로드하면 웹을 통해서 자신의 블로그를 볼 수 있습니다.

제 블로그 메인 페이지의 URL은 http://roy.pythonanywhere.com/blog/로 정했습니다.

실제로 정식 오픈을 하려면 회원가입 페이지나 몇 가지 디테일한 내용들이 빠져있기에 힘들겠지만, 지금까지 배운 내용을 반복/응용한다면 간단한 블로그 페이지는 만들 수 있지 않을까 싶습니다.

이제 연습, 또 연습만이 살길입니다.

[파이썬으로 시작하는 웹 프로그래밍 CAMP] 자세히 보기 >>>

Recent Posts