오늘은 프레임워크 중 하나인
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이외의 태그에도 사용 가능함!
원하는 클래스를 검색하고 싶다면
Bootstrap5.1.3 다운로드 링크의 검색바에서 검색하자!
아래 사진처럼 자세한 정보들이 나온다 👍
<출처> : 출처
5. 느낀점
이번 글을 쓰면서 Bootstrap을 처음 들어봤었다. 어떤 프로그램인지 하나도 모르다가 검색해보니 미리 만들어 둔 CSS 디자인을 클래스명만 불러와서 적용시킬 수 있는 정말 편리한 프레임워크인 걸 알게 되었다.
내가 진행중인 프로젝트에는 디자이너가 있어서 디자인 그대로 퍼블리싱을 하면 돼서 불편함을 못 느꼈지만, 디자인을 내가 해야 할 경우에는 생각만 해도 골치가 아플 것 같다 😂 (디자인은 너무 어려워...)
그리고 열심히 디자인을 한다고 해도 재능이 디자인에 재능이 없는 나로서는 촌스러운 디자인이 나올 수도 있기 때문에 그럴 땐 Bootstrap을 사용하여 퍼블리싱을 하는 게 훨씬 이득일 것 같다는 생각이 든다.
그렇지만 위에 정리했던 단점들처럼 편리함 이면에 따라오는 단점들이 있기 때문에 어느 면에 더 중점을 두느냐에 따라서 Bootstrap 사용 여부를 판단하면 될 것 같다!
이번에 CSS 관련된 프레임워크에 대해 공부했으니 다음 시간에는 TailwindCSS에 대해 공부해보는 시간을 가지겠다!
부트스트랩은 단순히 디자인을위한 도구가 아니라 그이상으로 일의 효율을 올려주는 프레임 워크에요
앞서 이야기했던 트워터의 두 개발자가 이걸 왜 개발하게되었는지 생각해본다면 부트스트랩 포함 관련된 프레임워크들이 어떻게동작하고, 어떻게써야하며 왜써야하는지 더 꼼꼼하게 검색할수있을것 같네용~