부트스트랩이란?
부트스트랩(Bootstrap)은 프런트엔드 개발을 쉽고 빠르게 하는 프레임워크입니다. 각종 레이아웃, 입력창, 버튼 같은 HTML UI 컴포넌트를 CSS와 자바스크립트를 이용해 쓰기 편하게 제공합니다.
부트스트랩은 원래 트위터 블루프린트(Twitter Blueprint)라는 트위터 사내 프로젝트로 시작했습니다. 트위터의 수많은 직원이 각자 맡은 부분을 개발하다 보니 디자인 일관성이 깨지고 관리하기가 점점 어려웠다고 합니다. 그래서 이 문제를 심각하게 느낀 트위터의 디자이너인 마크 오토(Mark Otto)와 개발자인 제이콥 쏜튼(Jacob Thornton)이 업무 시간 외 시간에 함께 프로젝트를 진행하였고 이후 많은 사람이 프로젝트에 참여하게 되어 마침내 2011년에 부트스트랩이라는 이름으로 공개를 하게 되었습니다.
부트스트랩의 장점과 단점은?
부트스트랩의 장점
- HTML, CSS, 자바스크립트 시직만으로 쉽게 사용할 수 있습니다.
- 반응형 CSS로, 부트스트랩에서 제공하는 그리드 시스템을 이용하면 다양한 디바이스 크기에 쉽게 대응할 수 있습니다.
- 최신 웹브라우저뿐만 아니라 오랜된 브라우저들과도 호환성이 좋습니다.
- MIT 라이센스라서 상업적으로 이용할 수도 있습니다.
부트스트랩의 단점
- 디자인을 커스터마이즈하지 않으면 웹사이트가 특생이 없고 다른 부트스트랩 기반 웹사이트와 비슷하게 보일 수 있습니다.
- 이미 정의된 부트스트랩 스타일을 오버라이드 하려면 많은 CSS를 새롭게 정의해야 하기 때문에 새로운 스타일 적용이 간단하지 않습니다.
- 부트스트랩 4.x 버전까지는 일부 UI 컴포넌트를 실행하는 데 제이쿼리 의존성이 필요했습니다.
부트스트랩을 프로젝트에 추가하여 사용하기
부트스트랩을 프로젝트에 추가해서 사용하는 방법은 크게 3가지입니다.
- CDN에서 제공하는 부트스트랩 CSS와 자바스크립트 링크를 이용하기
- 컴파일된 부트스트랩이나 소스 파일을 다운로드 받은 후 프로젝트에 직접 추가하기
- npm과 같은 패키지 매니저를 이용하기
오늘은 이 중에 링크를 이용하여 프로젝트에 추가하는 방법을 소개합니다.
1. 아래 경로로 들어가셔서 부트스트랩 홈페이지로 들어갑니다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
2. 프로젝트에 적용하기 원하는 버전을 선택하기 위해 [ All releases ]를 선택합니다.
3. 이 글을 작성할 당시의 최신 버전은 5.2 입니다. 최신 버전은 아직 안정화가 되지 않은 베타 버전일 수 있기 때문에 아직은 4.x 버전을 많이 사용하는 것 같습니다.
4. 이동한 페이지에서 CSS 링크를 복사하여 자신의 웹페이지 헤드 태그 사이(<head></head>)에 넣어줍니다.
5. (옵션) 부트스트랩에서 제공하는 자바스크립트 함수를 사용하려면 아래쪽에 있는 JS 링크를 복사하여 바디 태그 사이(<body></body>)에 넣어줍니다. 보통은 바디 태그의 제일 마지막 부분에 넣어줍니다.
부트스트랩 참고 예제
부트스트랩을 사용한 예제들을 앞에 링크해드린 사이트의 Examples 메뉴를 보시면 참고하실 수 있습니다. 다양한 종류의 샘플들이 있으니 참고해 보시면 도움이 많이 되실 거예요.
'Web > CSS' 카테고리의 다른 글
| [CSS] 눈누 웹폰트 적용하기 | 상업적 이용 가능한 무료 한글 폰트 사용법 | 티스토리 블로그, 웹사이트 꾸미기 (0) | 2022.07.13 |
|---|---|
| [CSS] 나의 웹사이트에 구글 웹폰트 적용하는 방법, 무료폰트, CSS, HTML, 웹디자인 (0) | 2022.06.27 |
댓글