부트스트랩 (프론트엔드 프레임워크)

부트스트랩(Bootstrap)은 웹사이트를 쉽게 만들 수 있게 도와주는 CSS, JS 프레임워크이다. 하나의 코드로 휴대폰, 태블릿, 데스크탑까지 다양한 기기에서 작동하게 만들 수 있으며, 다양한 기능을 제공하여 사용자가 쉽게 웹사이트를 제작, 유지, 보수할 수 있도록 도와준다.

부트스트랩
발표일2011년 8월 19일(12년 전)(2011-08-19)
안정화 버전
5.3.3[1] 위키데이터에서 편집하기 / 2024년 2월 20일(5개월 전)(2024년 2월 20일)
저장소
프로그래밍 언어HTML, CSS, LESS(v3), Sass(v4), 자바스크립트
플랫폼웹 브라우저
종류HTML, CSS 기반 디자인 탬플릿
라이선스MIT 라이선스 (3.1.0 이전까지는 아파치 라이선스 2.0)
웹사이트getbootstrap.com 위키데이터에서 편집하기

기원

편집

부트스트랩의 원래 이름은 트위터 블루프린트(영어: Twitter Blueprint)로 마크 오토(Mark Otto)와 Jacob Thornton이 만들었다. 기존에 여러 인터페이스에 대응하기 위한 다양한 라이브러리들이 존재했지만, 정형화되지 않아 유지와 보수에 어려움이 있었다. 트위터의 개발자였던 마크 오토는 이를 통합하기 위해 부트스트랩을 만들었고 트위터의 다른 개발자들이 개발에 기여하기 시작했다. 부트스트랩이라는 이름은 2011년 8월 19일 오픈 소스가 발표되면서 지어졌다.[2]

2012년 1월 31일 부트스트랩 2가 발표되었다. 이 버전에서는 12컬럼 그리드 레이아웃과 반응형 디자인이 포함되었다. 부트스트랩 3는 2013년 8월 19일 발표되었으며 모바일 플랫폼이 적용되었다.

특징

편집

부트스트랩은 크롬, 파이어폭스, 인터넷 익스플로러, 오페라, 사파리의 최신 버전을 지원하지만 모든 기능을 완벽하게 지원하지 않는 브라우저도 있다.

구조와 기능

편집

부트스트랩은 SASS 스타일시트를 기반으로 한다.

부트스트랩은 HTML에서 사용되는 기본 스타일을 제공한다. 이는 모던한 글꼴, 테이블, 폼을 제공한다.

재사용 가능한 컴포넌트

편집

부트스트랩은 기본 요소 외에도 사용자들이 자주 사용하는 요소들을 포함한다. 예를 들면, 각종 버튼들, 드롭다운 메뉴, 탭, 라벨, 상태 바 등이 있다.

자바스크립트 컴포넌트

편집

부트스트랩은 자바 스크립트를 이용하여 드롭다운, 탭, 버튼 등의 기능을 구현한다.

Sass 및 Less 지원

편집

Sass와 Less는 CSS 전처리기로, 개발자가 변수, 중첩, 믹스인 등의 고급 기능을 사용하여 CSS 코드를 더 쉽게 작성하고 유지 관리할 수 있도록 한다. Sass는 "Syntactically Awesome Style Sheets"의 약자이다. Sass는 CSS의 확장으로, 모든 버전의 CSS와 완전히 호환되며 CSS의 중복을 줄여 시간을 절약해 준다. Sass는 햄튼 캐틀린이 설계하고 2006년에 나탈리 와이젠바움이 개발했다. Less는 "Leaner Style Sheets"의 약자이다. Less는 CSS 언어에 몇 가지 편리한 기능을 추가한 것으로, 배우기 비교적 쉽다.[3]

Bootstrap은 Sass와 Less 기반의 원본 파일을 제공하여 개발자가 이러한 전처리기를 사용할 수 있도록 한다. Sass나 Less를 사용하면 개발자는 변수 수정, 기본 스타일 덮어쓰기, 사용자 정의 컴포넌트 및 스타일 추가 등을 통해 특정 프로젝트의 요구에 맞게 Bootstrap을 맞춤 설정할 수 있다. 이러한 지원 덕분에 Bootstrap은 더 유연해지며, 개발자는 프로젝트 요구 사항에 따라 Bootstrap의 스타일을 사용자 정의할 수 있다.

같이 보기

편집

각주

편집
  1. “Release 5.3.3”. 2024년 2월 20일. 2024년 2월 20일에 확인함. 
  2. Otto, Mark (2011년 8월 19일). “Bootstrap from Twitter”. 《Developer Blog》. Twitter. 
  3. https://segmentfault.com/a/1190000044269857. 2024년 7월 28일에 확인함.  |제목=이(가) 없거나 비었음 (도움말)

외부 링크

편집