Blog project - Bootstrap

 

Blog project

Bootstrap

 

 안녕하세요 지성입니다. 저는 지금 블로그를 만들어 가고 있습니다. 지난 글에서 서버 단에서 작동하는 코드는 최대한 간단하게 구성했고 웹에서 작동하는 프런트엔드 코드도 살펴보았습니다. 전체 코드를 분석하는 것도 의미가 있겠지만 저는 중요하다고 생각되는 지점만 정리하고 넘어가도록 하겠습니다. 

 이번 글에서는. “Bootstrap”을 살펴보겠습니다. 이 라이브러리는 “트위터”라는 외사에서 개발되었습니다.  스마트 폰의 등장으로 모바일에서 제공되는 환경이 중요해지면서 “웹”과 “모바일”에 동시에 적용할 수 있는 기술이 필요해졌습니다. 이 문제를 해결하기 위해 많은 개발자들의 노력이 계속되고 있습니다. 그런 노력 중 현시점에서 가장 주목받고 있는 기술 중에 한 가지가 바로 이 “Bootstrap”입니다. 


 이 라이브러리는 “모바일”화면 뿐만 아니라 다양한 구성요소들을 각 환경에 맞게 적용되도록 지원하고 있습니다. 그중에 오늘 살펴볼 것은 “Grid”시스템입니다. 단어 그대로 이 시스템은 화면을 격자모양으로 나누어 사용할 수 있도록 해줍니다. 더 정확하게 말하면 화면을 총 12등분으로 나누어 사용하는 것입니다. 그렇게 그어진 보이지 않는 칸들 위에 다양한 구성요소들을 배치하여 화면을 구성해 나가는 것입니다. 

 

<div class=“col-lg-8 col-md-10 mx-auto”>

 

 이전 글의 "index.html"  에서 “Grid”를 정의한 표현은 위의 표현입니다. 의미를 따져보면  “col-lg-8”는 큰 화면일 경우 8칸 “col-md-10” 중간 화면일 경우 10칸 “mx-auto”는 구성요소의 마진을 자동으로 정의하겠다는 뜻입니다. 화면에 대한 정의는 “Bootstrap”의 공식문서에 자세하게 나와 있습니다. 

 

getbootstrap.com/docs/5.0/layout/grid/)

 

 

 저 역시 이 라이브러리의 모든 내용을 기억하고 있지는 않습니다. 전체 디자인이 나왔을 때 그 디자인에 맞는 구성요소들을 그때그때 검색해서 찾아 맞춰 작성하고 있습니다. 매일매일 새로운 기술이 쏟아지고 매년 업데이트가 이루어지는 상황에서 모든 정보를 외우고 있는 것은 초인에 가까운 기억력을 갖고 있어야 가능한 일입니다. 저 같은 평범한 사람들은 시간이 걸리더라도 결국 검색에 의존할 수밖에 없을 것 같습니다. 

오늘은 간략하게 코드에 정의되어 있는 “Bootstrap” 코드를 살펴 보았습니다. 다음에 더 업그레이된 글로 찾아뵙겠습니다. 

 

2021/02/01 - [Toy Project/Python] - Blog Project - Start

Blog Project - Start

2021/02/02 - [Toy Project/Python] - Blog project - Back_end

Blog project - Back_end

2021/02/03 - [Toy Project/Python] - Blog project - Front-end

Blog project - Front-end