flask로 만든 페이지 bootstrap로 좀 더 예쁘게 만들기.

flask로 만든 웹 페이지 더 예쁘게 만들기.

• flask로 만든 페이지 더 예쁘게 만들려고 합니다. 사실 이 부분은 front-end에 대한 부분입니다만, 결과를 더 예쁘게 보여줄 수 있다는 점에서, 또 이 부분이 많은 어른들에게 괜찮게 보인다는 점에서, 프론트엔드를 신경쓰는 것은 꽤 중요하긴 합니다.
• 전체 구조를 어떻게 하면 더 예쁘게 만들 수 있을까 이런 것을 고민하기보다는 기존에 있는 것을 최대한 많이 이용해서 적당히 예쁘게 만들자, 라는 것이 저의 목적입니다. 아무튼.

boostrap

• boostrap은 css를 다룬 경험이 적은 사람들이 비교적 단기간에 웹페이지를 예쁘게 만들 수 있도록 돕는 것을 목적으로 합니다.
• 기본적으로 class 등으로 시각적으로 예쁘게 나올 수 있도록 정의해주고, html 내의 각 개체들이 해당 class를 속성으로 지정해주면 알아서 꽤 예쁘게 만들어주죠.
• 부트스트랩을 잘 쓰기 위해서 하나하나 정의된 모든 문서를 볼 필요는 없는 것 같고, 다른 사람들이 만든 html 코드를 보면서, 필요한 부분을 가져오는 것이 훨씬 효과적인 것 같습니다. 이 부분이 마치 “표절하세요!”라고 말하는 것일 수도 있지만, 다른 사람들이 코드를 어떻게 구현했는지 이해하고, 가져오면 내용이 달라지게 됩니다.
• boostrap을 잘 쓰기 위해서는 css보다, html문서를 효과적으로 만들었는지, 체계적으로 개체들을 구조화하였는지가 더 중요한 것처럼 생각됩니다.

class만 잘 찾아서 정리해주자.

• 앞서 말한 것과 같이, bootstrap의 모든 구조 혹은 객체들을 모두 이해하고 시작하려면 시간이 매우 많이 걸릴 뿐더러, 오히려 배우는 것이 느려질 수 있습니다.
• bootstrap도 이걸 알고 있기 때문에, 다양한 예제 중심으로 자료를 정리해두었구요. 여기에 많은 예제가 있습니다. 여기에 들어가서 소스를 확인해보고, 변형해가면서 페이지를 열다보면, 아, 대략 무슨 말이구나, 라고 쉽게 이해할 수 있을 것 같습니다.
• 뿐만 아니라, Documentation에 들어가서, content, component들을 쭉 읽어보시면, 아, 일단 이 요소들을 하나씩 변형하면서, 진행하면 되겠구나, 라는 생각이 되실거에요.

wrap-up

• 쓰다보니까, 이 부분은 제가 나중에 더 정리해서 써야될것 같아서 일단 킵해둡니다.