[Framework] #1. Bootstrap

mozza·2024년 4월 20일

CSS bootstrap framework 부트스트랩 프레임워크

Framework

목록 보기

1/5

오늘은 프레임워크 중 하나인 Bootstrap에 대해 알아보는 시간을 가져보자!
우선 프레임워크에 대해 먼저 알아보자 :)

1. Framework(프레임워크)

① 정의

Frame(틀) + Work(일하다)
: 일정한 틀을 가지고 일하다는 의미
프로그램을 개발하기 위해 사용되는 틀을 제공하는 프로그램을 의미

② 종류

자바 프레임워크 : Struts, Spring, 전자정부 프레임워크 등
QRM 프레임워크 : myBatis(iBatis), Hibernate 등
자바스크립트 프레임워크 : AngularJS, React, Polymer, Ember 등
프론트엔드 프레임워크 : Bootstrap, Foundation, MDL 등

③ 장점

효율적
: 기본적인 틀이 있어 시간이 절약되며 훨씬 더 빨리 코드를 짤 수 있음
유지보수가 쉬움
: 일정한 틀이 정해져 있으므로 타인이 짠 코드라도 해당 프레임워크에 대해 아는 사람이라면 코드를 알아보기 쉬워 수정할 수 있음

④ 단점

학습시간
: 기본적인 틀과 사용법을 배워야 하기 때문에 학습하는데 시간이 걸림
자유도 낮음
: 프레임워크는 구조에서 크게 벗어날 수 없어 개발자가 자유롭거나 유연하게 코드를 짜기 힘듦

프레임워크에 대해 간략히 알아보았으니 진짜 주제인 Bootstrap에 대해 공부해보자!!

2. Bootstrap(부트스트랩)이란?

① 탄생배경

각자 다른 인터페이스를 사용한 여러 개발자들의 공동작업 (in Twitter)
그에 따른 디자인 불일치, 관리 어려움, 방대한 코드량 → 일관성 유지 불가
문제점 개선을 위해 트위터의 직원 둘이서 개발 시작
2011년 8월 깃허브 오픈

② 정의

트위터 개발자였던 Mark Otto와 Jacob Thornton이 함께 개발한 HTML, CSS, JS 프레임워크
오픈소스, 상업적 이용 가능
SASS 스타일 시트 기반, 재사용이 가능한 컴포넌트(버튼, 드롭다운, 탭, 라벨 등)

③ 장점

각 컴포넌트의 CSS가 정해져 있어 코드가 단순해지고 개발기간이 줄어듬
웹 뿐만 아니라 모바일 디자인도 지원
반응형 웹 디자인 지원
: 웹 브라우저 크기에 따라 자동으로 정렬되는 ‘그리드 시스템’을 채용하고 있어 웹 페이지를 데스크탑, 태블릿, 스마트폰 모두에서 무리없이 보게 만들 수 있음

④ 단점

디자인 커스터마이징이 힘듦
로딩 속도 느림
: 타 프레임워크와 비교했을 때 상당히 무겁고 느린 편

Bootstrap에 대해 알아보았으니 실제로 어떻게 쓰는지 알아볼까?!

3. Bootstrap(부트스트랩) 설치

Bootstrap 설치 방법에는 아래 세 종류가 있다!

① 파일 다운로드

ⓐ Bootstrap 사이트에서 '다운로드' 버튼 클릭 (아래 사진 참고)
: Bootstrap 버전마다 링크가 다르므로 원하는 버전의 링크에서 다운로드 받으면 됨! Bootstrap 5.1.3 다운로드 링크
<출처> : 출처

ⓑ 다운 받은 파일 압축 풀기
: 'min'이 붙은 파일은 소스코드 용량을 줄인 파일(압축파일)로 그냥 파일과 'min'이 붙은 파일 둘 중에 하나를 선택해서 사용하면 됨

ⓒ 파일 적용하기
- 아래 코드처럼 html의 head 안에 사용할 CSS 파일 추가

- body 안에 사용할 JS 파일 추가

- Bootstrap 버전 5부터는 jQuery를 사용하지 않으므로 따로 jQuery를 추가할 필요 없음

<html>
  <head>
      <link rel="stylesheet" href="./bootstrap-5.1.3-dist/css/bootstrap.min.css" />
  </head>

  <body>
      <script src="./bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

② CDN 파일

아래 코드처럼 html에 Bootstrap에서 제공하는 CDN 링크 추가
script 태그는 body 끝에 넣어, 페이지 표시에 시간이 덜 걸리게 하는 게 좋음!

<html>
	<head>
    	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" />
    </head>
    <body>
    	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

③ 패키지 매니저

아래처럼 패키지 매니저를 사용하여 Bootstrap을 다운로드

// npm 사용
npm install bootstrap

// yarn 사용시
yarn add bootstrap

반응형 meta 태그를 head 태그에 추가
: Bootstrap은 모바일 환경을 우선으로 개발된 프레임워크라 모바일에 최적화된 코드를 가지고 있음. 따라서 미디어 쿼리를 이용해서 다른 플랫폼 환경에 맞춰서 표시해야 함
아래 코드처럼 html의 head 안에 사용할 CSS 파일 추가
body 안에 사용할 JS 파일 추가

<html>
	<head>
    	<meta name="viewport" content="width=device-width, initial-scale=1">
    	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
    </head>
    <body>
    	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

4. Bootstrap(부트스트랩) 사용

이제 드디어 Bootstrap 사용법에 대해 알아보자!!

① 문법

아래 코드와 같이 기본 HTML 태그(ex. container, button, table)에 Bootstrap 클래스들을 적용하는 방식으로 사용

<태그 class="Bootstrap_클래스 ..."></태그>

② 예

가장 많이 쓰는 태그 중 하나인 button으로 예를 들어보자

코드

<body>
  <button class="btn btn-primary">Success</button>
  <button class="btn btn-danger">Danger</button>
</body>

결과
참고
: 버튼 클래스지만 button 이외의 태그에도 사용 가능함!

원하는 클래스를 검색하고 싶다면 Bootstrap 5.1.3 다운로드 링크의 검색바에서 검색하자!
아래 사진처럼 자세한 정보들이 나온다 👍

<출처> : 출처

5. 느낀점

이번 글을 쓰면서 Bootstrap을 처음 들어봤었다. 어떤 프로그램인지 하나도 모르다가 검색해보니 미리 만들어 둔 CSS 디자인을 클래스명만 불러와서 적용시킬 수 있는 정말 편리한 프레임워크인 걸 알게 되었다.

내가 진행중인 프로젝트에는 디자이너가 있어서 디자인 그대로 퍼블리싱을 하면 돼서 불편함을 못 느꼈지만, 디자인을 내가 해야 할 경우에는 생각만 해도 골치가 아플 것 같다 😂 (디자인은 너무 어려워...)

그리고 열심히 디자인을 한다고 해도 재능이 디자인에 재능이 없는 나로서는 촌스러운 디자인이 나올 수도 있기 때문에 그럴 땐 Bootstrap을 사용하여 퍼블리싱을 하는 게 훨씬 이득일 것 같다는 생각이 든다.

그렇지만 위에 정리했던 단점들처럼 편리함 이면에 따라오는 단점들이 있기 때문에 어느 면에 더 중점을 두느냐에 따라서 Bootstrap 사용 여부를 판단하면 될 것 같다!

이번에 CSS 관련된 프레임워크에 대해 공부했으니 다음 시간에는 TailwindCSS에 대해 공부해보는 시간을 가지겠다!

mozza

모짜

다음 포스트

[Framework] #2. Bootstrap의 Breakpoint와 Container 그리고 Grid

1개의 댓글

Kevin

2024년 4월 20일

부트스트랩은 단순히 디자인을위한 도구가 아니라 그이상으로 일의 효율을 올려주는 프레임 워크에요
앞서 이야기했던 트워터의 두 개발자가 이걸 왜 개발하게되었는지 생각해본다면 부트스트랩 포함 관련된 프레임워크들이 어떻게동작하고, 어떻게써야하며 왜써야하는지 더 꼼꼼하게 검색할수있을것 같네용~

답글 달기