[프론트엔드] 쉽고 빠른 웹 개발 - Bootstrap

해당 글은 아래의 3가지를 다룬다.
1. Bootstrap 이란?
2. Bootstrap 사용법
3. Boostrap의 장단점

 
최근 Front-End 개발을 하면서 웹 페이지를 쉽게 구축할 수 있도록 하는 좋은 프레임워크를 알게되어 공유합니다.

 

1. Bootstrap 이란?

Bootstrap은 Twitter에서 개발한 오픈소스 프론트엔드 프레임워크로, HTML/CSS, JavaScript를 기반으로 되어있다.
이를 사용하면 모바일, 태블릿, 데스크탑 등 다양한 디바이스에서 적절하게 표시될 수 있도록 반응형 웹 페이지를 구현할 수 있고, 드롭다운 메뉴, 모달 팝업, 카드 등 다양한 디자인 요소를 제공한다.
 

2. Bootstrap 사용법

HTML 파일에 Bootstrap의 웹사이트에 포함된 아래의 두 줄의 코드만 추가하면 사용할 수 있다.
Examples 에서 기본적인 웹 사이트 패턴을 구현되어 있고, 이외에도 다양한 요소들이 제공하고 있다.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha38

Bootstrap

 

3. Boostrap의 장단점

- 장점
1) 빠른 개발: Bootstrap을 사용하면 웹 페이지 개발 속도가 빨라진다.
2) 반응형 웹 페이지: 다양한 기기에 적합한 반응형 웹 페이지를 쉽게 만들 수 있다.
3) 커스터마이징 가능: Bootstrap의 기본 스타일을 쉽게 커스터마이징하여 원하는 디자인을 구현할 수 있다.
 
- 단점
1) 일관성 문제: Bootstrap을 사용하면서 기본 스타일을 수정하거나 추가적인 디자인 요소를 적용할 때 일관성을 유지하는 것이 어려울 수 있다.
 
 
[Bootstrap을 공부할 때, 참고했던 유튜브 영상]
기능의 구성요소 별로 영상이 나와있어서 원하는 구성요소의 영상을 따라하며 쉽게 구현할 수 있습니다.

부트스트랩5