[Bootstrap.css] 속성 웹 개발을 위한 풀스택 프레임워크

0. 도입

오랜만에 돌아왔습니다! 오늘은 제가 가장 많이 사용하고 사랑하는 프레임워크 중 하나인 부트스트랩에 대한 강의를 해보겠습니다.

부트스트랩은 2010년에 처음 제작된 css 프레임워크입니다. 예전에 제작된 웹서비스들은 대부분 부트스트랩 3을 사용하고 있고, 현재 버전은 4.3.1입니다. 저희는 최신 버전의 부트스트랩을 이용하여 쉽고 빠르게 웹 개발을 해보도록 하겠습니다.

부트스트랩(Bootstrap) 공식 사이트 : https://getbootstrap.com/

 

1. 프레임워크(Framework)란?

시작하기에 앞서 먼저 프레임워크(Framework)에 대하여 알아보겠습니다. 프레임워크의 사전적인 의미는 '뼈대'입니다. 건물을 지을 때, 혹은 어떤 프로젝트를 진행할 때 기초가 되는 틀이자 전체 작업의 골격인 것이죠.

개발 분야에서 이야기하는 프레임워크도 사전적 정의와 별반 다르지 않습니다. 다른 개발자들이 미리 만들어 놓은 뼈대, 즉 미리 만들어진 css나 js 등의 파일을 의미합니다.

우리는 프레임워크를 가져다가 원하는 부분에 원하는 형태로 사용해 쉽게 높은 퀄리티의 결과물을 만들어낼 수 있습니다.

외주를 하다보면 가끔 프레임워크를 사용한 작업물들에 반감을 가지시는 분들이 계시는데, 전혀 그럴 필요가 없습니다. 다른 사람들이 만들어서 공개한 자료를 가져다 사용하는 것이 불법도 아니고, 오히려 단기간에 질 좋은 결과를 만들어낼 수 있는 방법이기 때문입니다.

그렇기 때문에 저는 새로운 기능을 개발할 때 혹시 다른 사람들이 만들어 놓은 자료들이 있는지 미리 검토해 보는 것을 강력 추천드립니다.

 

2. CSS 프레임워크

CSS 프레임워크들은 기본적으로 '그리드(Grid)'라는 것을 반드시 포함하고 있습니다. 그리드는 웹 디자인에 있어서, 그리고 전반적인 웹 페이지 구성에 있어서 필연적이기 때문입니다.

그리드는 웹사이트의 구역을 나눌 때 사용합니다. 그리드는 기본적으로 12칸으로 나누어져 있고 상황에 맞게 그중에서 일부분을 선택하여 사용합니다. 이것이 무슨 뜻이냐! 하면! 아래의 그림을 함께 살펴보죠.

12칸으로 나누어진 구역

위의 그림과 같이 그리드는 기본적으로 12칸으로 나누어져 있습니다. 예를 들어서 우리가 한 블록을 3등분해서 사용하고 싶다고 가정합시다. 그러면 우리는 12칸의 그리드 중에서 4개씩 묶어서 3칸으로 분할해 주면 됩니다.

4칸씩 묶어 3등분한 그리드의 모습

위와 같이 레이아웃을 구성할 때 그리드를 사용하면 복잡한 형태의 레이아웃도 쉽게 구현할 수 있습니다.

더 자세한 설명과 정보는 w3schools에서 만나볼 수 있습니다. - https://www.w3schools.com/css/css_grid.asp

 

3. 부트스트랩(Bootstrap)을 사용하는 이유

세상에는 수많은 프레임워크들이 있습니다. 그 중에서는 가볍게 그리드만을 가지는 프레임워크들도 있고, css만으로 이루어진 프레임워크들도 있습니다.

그중에서도 부트스트랩을 사용하는 이유는 풀 스택 프레임워크이기 때문입니다. 그리드는 물론, 웹 사이트 개발에 필요한 다양한 구성요소(Component)들, jQuery를 기반으로 동작하는 툴팁(ToolTip)과 카로셀(Carousel) 등을 내장하고 있습니다.

 

4. 부트스트랩 사용하기

그러면 부트스트랩을 사용하기 위한 기초 작업을 해보겠습니다!

우선은 부트스트랩 공식 사이트에 접속해 메인 페이지에 보이는 'Get stared'를 눌러줍니다.

부트스트랩 공식 사이트

그러면 우리는 'Introduction' 페이지를 볼 수 있습니다. 아래로 스크롤을 하다보면 'Starter template'을 보실 수 있을 겁니다. Starter templae에 있는 코드 전부를 복사해 주세요. 코드 상단 우측에 있는 'copy' 버튼을 눌러주시면 됩니다!

Bootstrap starter template

이 코드는 우리가 부트스트랩을 사용하기 위해 필요한 코드들을 모아 놓은 일종의 템플릿입니다. 코드에는 우리가 사용하고자 하는 부트스트랩 css와 js를 로드하는 코드가 적혀 있습니다.

새로운 html 파일을 만들고 복사한 코드를 붙여넣어줍니다.

그리고 파일을 열어보면 다음과 같이 "Hello, world!"라고 적힌 화면을 보실 수 있을 겁니다.

부트스트랩 템플릿 실행 초기 화면

이제 우리는 부트스트랩을 사용할 준비가 되었습니다!

 

5. 결론

이번 시간에는

• 프레임워크가 무엇이고 왜 사용해야 하는지
• 부트스트랩을 사용해야 하는 이유와 사용 방법

에 대하여 알아보았습니다!

다음 시간에는 부트스트랩을 이용해 간단한 포트폴리오 사이트 레이아웃을 구성해 보도록하겠습니다!