부트스트랩 5의 새로운 기능

Bootstrap은 가장 인기 있는 CSS 라이브러리 중 하나입니다. 개발자가 아름다운 스타일과 컴포넌트를 쉽게 사용하고 반응형 웹사이트를 만들 수 있게 해줍니다. Bootstrap을 사용하면 개발자가 시간을 절약할 수 있습니다. 특히 거의 모든 프로젝트에서 사용되는 컴포넌트의 경우 말이죠.

Bootstrap 5(2021년 5월에 출시된 현재 주요 버전)는 새로운 컴포넌트 추가, 새 클래스, 기존 컴포넌트의 새 스타일링, 업데이트된 브라우저 지원, 일부 기존 컴포넌트 제거 등 수많은 변경 사항과 개선 사항을 가져왔습니다.

이 기사에서는 Bootstrap 5에서 변경된 사항, 제거된 사항, 그리고 가장 흥미로운 새로운 기능에 대해 다룰 것입니다.

Bootstrap 사용 시기(그리고 사용하지 않을 시기)

Bootstrap은 “세계에서 가장 인기 있는 반응형, 모바일 우선 사이트 구축 프레임워크”라고 주장하며, GitHub에서 152k 별을 획득했으므로 그 주장이 너무 터무니없는 것은 아닙니다. 특히 초보자들에게는 현대적이고 깨끗한 웹사이트를 만들기 시작하는 좋은 방법입니다. 복잡하고 모바일 우선 디자인을 쉽게 실현하고 여러 프로젝트에서 필요로 할 만한 많은 컴포넌트를 제공합니다.

Bootstrap은 낮은 학습 곡선을 가지고 있으며, 빌드 단계가 필요하지 않은 정적 웹사이트에 적합합니다. Bootstrap의 CDN에서 라이브러리를 참조할 수 있기 때문입니다. 이는 번들러나 작업 실행기와 함께 사용하도록 최적화된 다른 인기 있는 CSS 프레임워크와 대조적입니다.

또한 알아두어야 할 점은, 하지만, Bootstrap은 은 그렇지 않다 은신의 총알이 아니라는 것입니다. 초보자들에게는 Bootstrap이 더럽고 복잡한 마크업을 쉽게 생성하게 해줍니다. 또한 킬로바이트 단위로 비교적 무거운 라이브러리입니다(버전이 업데이트될수록 개선되고 있지만). 따라서 일부 기능만 사용하는 경우 최선의 선택지가 아닐 수도 있습니다. 어떤 추상화와 마찬가지로, 기본 기술에 대한 좋은 이해와 사용 시기에 대한 판단이 가능한 경우 매우 큰 도움이 될 것입니다.

Bootstrap 4에서 5로 업그레이드

Bootstrap 4에서 5로 업그레이드는 일반적으로 매우 쉽습니다. Bootstrap 4에서 사용 가능한 대부분의 구성 요소, 클래스 및 유틸리티 클래스는 Bootstrap 5에서도 계속 사용 가능합니다. 마이그레이션 시 주의해야 할 주요 사항은 사용 중인 클래스나 구성 요소가 폐기되었는지 여부입니다. 폐기된 경우 유틸리티 클래스를 사용하여 대체할 수 있는 방법이 있습니다. 두 번째로 주의해야 할 점은 기능에 JavaScript가 필요한 구성 요소에서 data-* 속성을 data-bs-* 속성으로 전환하는 것입니다. (다음 섹션에서 이에 대해 자세히 다룰 것입니다.)

Bootstrap의 Sass 파일을 사용하는 경우 일부 변수와 믹스인이 이름이 변경되었습니다. Bootstrap 5에는 맞춤 설정에 관한 자세한 섹션이 있으며, 각 구성 요소의 문서 페이지에서 Sass 변수 및 믹스인에 대한 세부 정보를 확인할 수 있습니다.

변경 사항

Bootstrap 5는 라이브러리로서의 Bootstrap에 핵심적인 변화를 가져옵니다. 필수 종속성, 브라우저 지원 등이 변경되며, 이전 버전에서 사용해온 컴포넌트와 클래스에도 변화가 있습니다.

jQuery 더 이상 종속성 아님

이전 버전과의 큰 차이점으로, jQuery는 더 이상 Bootstrap의 종속성이 아닙니다. 이제 Popper.js는 필요하지만 jQuery 없이도 Bootstrap를 완전한 품질로 사용할 수 있습니다. 이 변경으로 인해 React와 같이 jQuery가 필요하지 않거나 사용하지 않는 프로젝트에서 Bootstrap를 더 쉽게 사용할 수 있습니다.

웹사이트에 jQuery가 포함되어 있다면 jQuery와 함께 Bootstrap를 계속 사용할 수 있습니다. Bootstrap가 window 객체에 jQuery를 감지하면 모든 컴포넌트를 jQuery의 플러그인 시스템에 자동으로 추가합니다. 따라서 v4에서 v5로 마이그레이션하는 경우 이 변경사항에 대해 걱정할 필요가 없으며, 필요에 따라 jQuery와 함께 Bootstrap를 계속 사용할 수 있습니다.

하지만 웹사이트에 jQuery를 사용하고 있지만 Bootstrap가 jQuery를 사용하지 않길 원한다면 어떻게 해야 할까요? 문서의 본문 요소에 data-bs-no-jquery 속성을 추가하여 이 작업을 수행할 수 있습니다.

<body data-bs-no-jquery="true">
</body>

jQuery 없이 Bootstrap는 어떻게 작동할까요? 예를 들어 v4에서는 JavaScript에서 다음과 같은 코드를 사용하여 토스트 요소를 생성했습니다:

$('.toast').toast()

Bootstrap 5에서는 이미 jQuery를 사용하는 웹사이트에서 그 코드를 사용하여 토스트 요소를 생성할 수 있습니다. jQuery 없이는 다음과 같은 코드를 사용하여 토스트 요소를 생성해야 합니다.

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

이 코드는 순수한 JavaScript를 사용하여 문서에서 .toast 클래스를 가진 요소를 쿼리한 다음, new bootstrap.Toast()를 사용하여 요소에 Toast 컴포넌트를 초기화합니다.

브라우저 지원 변경

v4 이전까지는 Bootstrap이 Internet Explorer (IE) 10과 11을 지원했습니다. Bootstrap 5부터는 IE 지원이 완전히 중단되었습니다. 따라서 웹사이트에서 IE를 지원해야 한다면 v5로의 마이그레이션에 주의해야 합니다.

브라우저 지원에 대한 다른 변경 사항은 다음과 같습니다:

Firefox와 Chrome 지원이 이제 버전 60부터 시작
Safari와 iOS 지원이 이제 버전 12부터 시작
Android 브라우저와 WebView 지원이 이제 버전 6부터 시작

데이터 속성의 변경

Bootstrap 5는 JavaScript를 기능의 일부로 사용하는 구성 요소에 일반적으로 사용되는 데이터 속성의 명명을 변경했습니다. 이전에는 일부 JavaScript 기능에 의존하는 대부분의 구성 요소가 data-로 시작하는 데이터 속성을 가졌습니다. 예를 들어 Bootstrap 4에서 Tooltip 구성 요소를 생성하는 방법:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

여기서 data-toggle과 data-placement의 사용을 주목하세요. Bootstrap 5에서는 이러한 구성 요소의 데이터 속성이 data-bs로 시작하여 Bootstrap 속성을 쉽게 네임스페이싱합니다. 예를 들어 Bootstrap 5에서 Tooltip 구성 요소를 생성하는 방법:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

데이터-토글과 데이터-플레이스먼트 대신 데이터-bs-토글과 데이터-bs-플레이스먼트를 사용합니다. JavaScript를 사용하여 Bootstrap에서 구성요소를 생성하는 경우 변경할 필요가 없을 수 있습니다. 그러나 구성요소가 데이터 속성에만 의존하여 작동하는 경우 데이터로 시작하는 모든 데이터 속성을 데이터-bs로 시작하도록 변경해야 합니다.

버그 수정

Bootstrap 4 문서의 브라우저 및 장치 항목에는 일부 브라우저에서 발생하는 버그 목록이 있습니다. 이러한 버그는 Bootstrap 5의 동일한 목록에 더 이상 나열되지 않습니다. 목록에는 다음이 포함됩니다:

iOS에서 터치 이벤트의 요소에 호버 스타일링이 적용되어 원치 않는 의도하지 않은 동작으로 간주되었습니다.
Safari 8 이상에서 .container를 사용하면 인쇄 시 작은 글꼴 크기가 발생했습니다.
검증 피드백에 의해 테두리 반경이 재정의되었지만(추가 .has-validation 클래스를 추가하여 수정 가능).

Bootstrap 4 문서의 버그 및 문제 목록에는 더 이상 지원되지 않는 브라우저 버전에서 발생하는 버그도 자세히 설명되어 있습니다.

기타 변경 사항

사소하거나 급격하게 눈에 띄는 변화가 아닌 다양한 변경 사항들이 있습니다. 이러한 변경 사항은 다음과 같습니다.

Bootstrap 5는 이제 Popper v2를 사용합니다. Popper의 버전을 업그레이드하십시오. Popper v1은 더 이상 작동하지 않으며, Bootstrap 5는 이전의 popper.js 대신 @popperjs/core를 필요로 합니다.
Bootstrap 5는 이제 브라우저에서 모듈로 사용할 수 있으며, Bootstrap의 버전은 ECMAScript 모듈로 빌드되었습니다.
Libsass와 Node Sass (Bootstrap 4에서 사용되었던 것들)는 이제 더 이상 사용되지 않으므로, Bootstrap 5는 Dart Sass를 사용하여 소스 Sass 파일을 CSS로 컴파일합니다.
일부 Sass 변수 값에 변경이 있었습니다. 예를 들어 $zindex-modal이 1050에서 1060으로, $zindex-popover가 1060에서 1070으로 변경되었으며, 그 외에도 더 있습니다. 이러한 이유로 Bootstrap 5 문서에서 각 구성 요소 또는 유틸리티 클래스의 Sass 변수를 확인하는 것이 좋습니다.
이전에는 요소를 숨기면서도 보조 기술에서 검색 가능하게 하려면 클래스 .sr-only를 사용했습니다. 이 클래스는 이제 .visually-hidden로 대체되었습니다.
이전에는 상호작용 요소를 숨기되 보조 기술을 위해 이를 탐색 가능하게 하려면 .sr-only와 .sr-only-focusable 클래스를 모두 사용해야 했습니다. Bootstrap 5에서는 .visually-hidden-focusable만 사용하면 되며, .visually-hidden는 필요하지 않습니다.
이름이 지정된 출처를 가진 인용문은 이제 <figure> 요소로 감싸집니다.

Bootstrap 5에서 인용문이 어떻게 변경되었는지 예시를 살펴보겠습니다:
이전 버전에서는 테이블 스타일이 상속되었습니다. 즉, 다른 테이블 안에 중첩된 테이블이 있으면 중첩된 테이블이 부모 테이블을 상속받게 됩니다. Bootstrap 5에서는 테이블 스타일이 서로 중첩되어도 독립적입니다.
테두리 유틸리티는 이제 테이블을 지원합니다. 이는 테이블의 테두리 색상을 테두리 색상 유틸리티를 사용하여 변경할 수 있음을 의미합니다.

Bootstrap 5에서 테이블과 함께 테두리 유틸리티를 사용하는 예시입니다:
빵�crumb의 기본 스타일링이 변경되었으며, 이전 버전에서의 기본 회색 배경, 패딩 및 테두리 반경을 제거했습니다.

부트스트랩 5에서 빵조각의 스타일 예시:
left와 right를 사용하여 위치를 참조하는 클래스 이름이 start와 end를 사용하도록 변경되었습니다. 예를 들어, 드롭다운에서 .dropleft와 .dropright는 각각 .dropstart와 .dropend로 대체되었습니다.
이전 항목과 유사하게, left에 l과 right에 r를 사용하던 유틸리티 클래스는 이제 start에 s와 end에 e를 각각 사용합니다. 예를 들어, .mr-*는 이제 .me-*입니다.
범위 입력에 사용되던 .form-control-range 클래스는 이제 .form-range입니다.
구부는 이전의 px 대신 rems로 설정되었습니다.
.no-gutters는 새로 추가된 구부 클래스의 일부로 .g-0으로 이름이 변경되었습니다 (이에 대한 자세한 내용은 후속 섹션에서 다루겠습니다).
링크는 이제 호버되지 않아도 기본적으로 밑줄이 그어집니다.
커스텀 폼 요소 클래스 이름이 .custom-*에서 폼 컴포넌트 클래스의 일부로 변경되었습니다. 예를 들어, .custom-check는 .form-check로, .custom-select는 .form-select로 대체되었습니다.
라벨에 .form-label를 추가하는 것이 이제 필수입니다.
경고, 브레드크럼, 카드, 드롭다운, 리스트 그룹, 모달, 팝오버 및 툴팁은 이제 $spacer 변수를 사용하여 동일한 패딩 값을 사용합니다.
뱃지 요소의 기본 패딩이 .25em/.5em에서 .35em/.65em으로 변경되었습니다.

토글 버튼용 래퍼는 체크박스와 라디오 버튼에 사용됩니다. 마크업도 이제 단순화되었습니다. Bootstrap 4에서 토글 버튼 체크박스는 다음과 같은 마크업으로 구현되었습니다:

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked> Checked
  </label>
</div>

Bootstrap 5에서는 더 간단한 방식으로 할 수 있습니다:

<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Checked</label>

버튼의 active 및 hover 상태는 이제 색상에서 더 높은 대비를 갖게 되었습니다.
캐러셀 체보 아이콘은 이제 Bootstrap Icons에서 SVG를 사용합니다.
닫기 버튼 클래스는 이제 .close에서 .btn-close로 이름이 변경되었으며 × 대신 SVG 아이콘을 사용합니다.
드롭다운 구분선은 이제 더 어두운 색상으로 더 나은 대비를 제공합니다.

네비게이션 바 콘텐츠는 이제 컨테이너 요소로 감싸져야 합니다. 예를 들어 Bootstrap 4에서:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  ...
</nav>

Bootstrap 5에서는 다음과 같이 됩니다:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </div>
</nav>

부트스트랩 4의 팝오버 컴포넌트에서 .arrow 클래스는 이제 .popover-arrow로 대체되었으며, 툴팁 컴포넌트에서 .arrow 클래스는 .tooltip-arrow로 대체되었습니다.
팝오버 옵션 whiteList는 allowList로 이름이 변경되었습니다.
기본 토스트 지속 시간이 5초로 변경되었습니다.
툴팁, 드롭다운 및 팝오버 컴포넌트에서 fallbackPlacements의 기본값이 배열 ['top', 'right', 'bottom', 'left']로 변경되었습니다.
.text-monospace가 .font-monospace로 이름이 변경되었습니다.
.font-weight-*가 .fw-*로, .font-style-*는 .fst-*로 이름이 변경되었습니다.
.rounded-sm과 .rounded-lg가 이제 0에서 3까지의 범위를 가진 라운드드 클래스 .rounded-*로 대체되었습니다.

제거된 기능

변경은 비용이 따를 수 있습니다. 변경 사항과 개선 사항을 가져오는 새 버전이 출시되면서 이전에 지원했던 몇 가지 이전 기능을 제외하게 됩니다. 이번 새 릴리스에서는 Bootstrap의 일부 컴포넌트, 유틸리티 클래스 또는 기타 기능이 제거되었습니다.

대부분의 항목들이 Bootstrap 5에서 제거된 이유는 독립적인 구성 요소를 만들기보다는 유틸리티 클래스를 사용하여 동일한 결과를 얻을 수 있기 때문입니다. 또한, 일부 제거된 항목들은 사용되지 않거나 불필요한 것으로 입증되었습니다.

Bootstrap 5에서 제거된 항목 목록은 다음과 같습니다:

이전 섹션에서 언급한 바와 같이, IE에 대한 지원이 완전히 중단되었습니다.
배지 색상 클래스(예: .badge-primary)는 색상 유틸리티 클래스(예: .bg-primary)를 사용하는 것을 선호하기 위해 제거되었습니다.
.badge-pill 배지 클래스는 배지에 약을 주입하는 스타일을 주었으나, 동일한 결과를 얻기 위해 .rounded-pill을 사용하도록 제거되었습니다.
제거된 .btn-block 버튼 클래스는 디스플레이 유틸리티 클래스인 .d-block을 사용하여 동일한 결과를 얻을 수 있습니다.
이전에 사용 가능했던 Masonry .card-columns 카드 레이아웃은 부작용이 많았기 때문에 제거되었습니다.
드롭다운 컴포넌트의 flip 옵션은 Popper의 설정을 선호하여 제거되었습니다.
제거된 Jumbotron 컴포넌트는 달성 가능한 결과를 유틸리티 클래스를 사용하여 얻을 수 있습니다.
일부 순서 유틸리티 클래스(.order-*)가 삭제되었으며, 이전에는 1에서 12까지 있었습니다. 이제는 1에서 5까지입니다.
미디어 컴포넌트가 삭제되었으며, 유틸리티 클래스로 동일한 결과를 달성할 수 있기 때문입니다.
.thead-light 및 .thead-dark 클래스가 삭제되었으며, .table-* 변형 클래스를 모든 테이블 요소에 적용할 수 있기 때문입니다.
.pre-scrollable 클래스가 삭제되었으며, 자주 사용되지 않기 때문입니다.
.text-justify 클래스가 삭제되었으며, 반응형 문제로 인해 .text-hide 클래스도 삭제되었습니다. 이 방법은 오래되어 사용되지 않아야 합니다. 그리고 .text-* 클래스는 더 이상 하이퍼링크에 호버 또는 포커스 상태를 추가하지 않습니다. 이러한 .text-* 클래스는 .link-* 클래스로 대체되어야 합니다.
여러 입력 항목이나 구성 요소를 가진 입력 그룹은 더 이상 .input-group-append 및 .input-group-prepend를 사용할 필요가 없습니다. 그룹에 포함되어야 할 요소는 모두 .input-group의 자식으로 직접 추가될 수 있습니다.

다중 입력을 사용한 입력 그룹의 예:
.form-group, .form-row, 그리고 .form-inline은 레이아웃 클래스를 선호하여 모두 제거되었습니다.
.form-text는 더 이상 설정된 display 속성이 없습니다. 요소의 표시는 요소 자체가 블록 요소인지 인라인 요소인지에 따라 달라집니다.
<select> 요소에서 multiple를 사용할 때 유효성 검사 아이콘이 제거되었습니다.
.card-deck 클래스는 그리드 클래스를 선호하여 제거되었습니다.
기본적으로 음수 여백이 비활성화되었습니다.
.embed-responsive-item 요소는 이제 비율의 모든 자식에 스타일링을 적용하는 것을 선호하여 제거되었습니다. 이는 이전에 Responsive embeds였습니다 (다음 섹션에서 자세히 설명합니다).

새로운 것

마지막으로, Bootstrap은 버전 5에서 라이브러리에 많은 흥미로운 추가 사항을 가져왔습니다. 이러한 변경 사항에는 새로운 기능, 새로운 지원되는 개념, 새로운 구성 요소, 새로운 유틸리티 클래스 등이 포함됩니다.

Responsive Font Sizes가 이제 기본적으로 활성화되어 있습니다

Responsive Font Sizes(RFS)는 Bootstrap의 이전 버전에서 사용되었지만 기본적으로 비활성화되었습니다. Bootstrap 5는 RFS를 기본적으로 활성화하여 Bootstrap의 글꼴을 더 반응형으로 만듭니다. RFS는 초기에 글꼴 크기를 반응형으로 확장하고 조정하기 위해 Bootstrap에서 만든 보조 프로젝트입니다. 이제 RFS는 마진, 패딩, 박스 그림자 등과 같은 속성에 대해서도 동일한 작업을 수행할 수 있습니다.

RFS가 수행하는 작업은 기본적으로 브라우저 창의 크기에 따라 가장 적합한 값을 계산하고, 이러한 계산은 컴파일될 때 calc 함수로 변환됩니다. RFS를 사용함으로써 이전에 px를 사용하던 것을 rem을 사용하도록 전환하여 더 나은 반응성을 달성합니다.

Bootstrap용 Sass 파일을 사용하는 경우 font-size, margin, padding 등과 같은 RFS에서 만든 믹스인을 사용할 수 있으며, 이를 통해 구성 요소와 스타일이 반응형인지 확인할 수 있습니다.

오른쪽에서 왼쪽으로의 지원

Bootstrap 5에서는 RTLCSS를 사용하여 좌측에 가까운 방향(RTL) 지원을 추가했습니다. Bootstrap은 전 세계에서 사용되고 있으므로, 기본적으로 RTL 지원을 제공하는 것은 크고 중요한 단계입니다. 이를 위해 Bootstrap 5는 방향에 대한 특정 명명을 폐기하고(예: left와 right 사용), start와 end를 선호하게 되었습니다. 이를 통해 Bootstrap은 LTR(좌에서 우)와 RTL 웹사이트 모두에서 작동할 수 있는 유연성을 갖추게 되었습니다. 예를 들어, .dropleft는 이제 .dropstart가 되었고, .ml-*는 .ms-*가 되었으며, 그 외에도 많은 변경이 있었습니다.

Bootstrap이 웹사이트에서 RTL 스타일링을 인식하고 적용하도록 하려면, <html>의 dir을 rtl로 설정하고, 웹사이트의 RTL 언어에 해당하는 lang 속성을 추가해야 합니다. 예를 들어, lang="ar"입니다.

마지막으로, Bootstrap의 RTL CSS 파일을 포함시켜야 합니다:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

이렇게 하면 웹사이트가 RTL을 지원하게 됩니다.

새로운 브레이크포인트

Bootstrap 5는 너비가 1400px 이상인 기기를 대상으로 하는 새로운 브레이크포인트 xxl을 지원합니다. 이전에는 가장 높은 브레이크포인트가 xl로, 너비가 1200px 이상인 기기를 대상으로 했습니다. 이러한 변경으로 인해 더 큰 화면을 가진 기기에 대한 응답성이 향상되었으며, xl 브레이크포인트만으로는 충분하지 않았습니다.

새로운 브레이크포인트를 사용하는 것은 다른 모든 브레이크포인트들과 유사합니다. 예를 들어, 1400px 이상의 디바이스 너비에 패딩을 적용하려면 .p-xxl-2 클래스를 사용할 수 있습니다.

개선된 문서화

이는 라이브러리 자체의 일부가 아니지만, Bootstrap의 문서화가 개선되었다는 것을 언급하는 것이 좋습니다. Bootstrap 5의 문서는 내용의 구성이 더 체계적입니다. 자세한 내용이 포함된 구성 요소들은 이제 각각 자체 섹션을 가지고 있습니다. 예를 들어, Bootstrap 4의 Form 구성 요소는 모든 구성 요소가 한 페이지에 모여 있었습니다. Bootstrap 5에서는 Form 구성 요소의 문서화가 자체 섹션으로 나뉘어져 있으며, Form Control, Select, Input Groups 등의 다양한 하위 구성 요소들에 대한 하위 섹션이 있습니다.

또한, 문서 내의 탐색이 이제 사이드바를 통해 더 쉬워졌으며, 특히 작은 화면에서 더욱 효과적입니다. Bootstrap 4에서는 작은 디바이스에서 목차 사이드바를 볼 수 없어 페이지에서 필요한 섹션을 찾기 어려웠습니다. Bootstrap 5에서는 목차가 모든 화면 크기에서 항상 보입니다.

또한, Bootstrap 5에서는 각 구성 요소의 페이지에서 Sass 변수, 믹신 및 함수를 모두 찾을 수 있습니다. 이전에는 테마 변수를 변경하는 방법에 대한 일부 세부 정보만 있는 Theming 페이지가 있었습니다. 이제는 맞춤 설정 섹션이 자체로 있으며, Bootstrap 테마를 맞춤 설정하는 방법에 대한 더 자세한 정보가 포함되어 있습니다.

새로운 구성 요소

Bootstrap 5에서는 라이브러리에 새로운 컴포넌트들을 도입했습니다. 이 중 일부 컴포넌트는 다른 컴포넌트의 일부였으나 이제 독립적인 컴포넌트로 분리되었습니다.

아코디언

이전에는 아코디언이 축소 가능한 컴포넌트의 일부였으나, Bootstrap 5에서 아코디언은 새로운 독립 컴포넌트입니다. 아코디언과 함께 새로운 클래스인 .accordion이 추가되어 아코디언 아이템들의 목록을 감싸고 있습니다. 또한, Bootstrap 4의 이전 스타일과는 달리 아코디언에 새로운 스타일이 적용되었습니다. 아코디언 컴포넌트의 예시는 다음과 같습니다:

Bootstrap 5는 아코디언의 스타일을 변경하기 위한 클래스도 추가했습니다. 예를 들어, .accordion-flush는 배경이나 테두리 색상과 같은 기본 아코디언의 일부 스타일을 제거합니다. 또한, data-bs-parent 속성을 .accordion-collapse 요소에서 제거하여 아코디언 아이템을 항상 열린 상태로 만들 수 있습니다.

오프캔버스

또 다른 새로운 컴포넌트로는 오프캔버스가 있습니다. 이는 웹사이트에서 작은 기기에 메뉴를 표시하는 데 사용되는 오버레이 사이드바를 생성할 수 있습니다. .offcanvas-start를 사용하여 LTR에서 왼쪽에 배치하거나, .offcanvas-top를 사용하여 상단에, .offcanvas-end를 사용하여 LTR에서 오른쪽에, .offcanvas-bottom를 사용하여 하단에 배치할 수 있습니다. 또한, 오프캔버스에 백드롭 여부를 지정할 수 있습니다. 오프캔버스 컴포넌트 사용 예시는 다음과 같습니다:

플로팅 라벨

플로팅 라벨은 폼 컴포넌트의 새로운 부분입니다. 이를 사용하면 레이블이 처음에는 플레이스홀더처럼 보이는 입력을 만들 수 있으며, 입력이 포커스를 받으면 라벨이 입력 값 위로 떠오르며 입력 위로 라벨이 떠오릅니다. 또한 <select> 요소와 <textarea> 요소에도 작동합니다. 플로팅 라벨을 사용한 예시는 다음과 같습니다:

기타 추가

새로운 컴포넌트 외에도 기존 컴포넌트에 대한 새로운 클래스, 새로운 유틸리티 클래스, 새로운 도우미 클래스 등이 있습니다. 여기 부트스트랩 5의 다른 모든 새로운 추가 사항 목록이 있습니다:

열이 자연스러운 너비를 차지할 수 있도록 하는 .row-cols-auto 클래스가 추가되었습니다.
A new utility class has been added to justify content called .justify-content-evenly.
이전에는 열 사이의 간격을 간격 유틸리티를 사용하여 달성했습니다. 이제 새로운 거리 레이아웃 유틸리티를 사용하여 열 사이의 간격을 설정할 수 있습니다. 수평 간격을 설정하려면 .gx-*를 사용하고, 수직 간격을 설정하려면 .gy-*를 사용하고, 수평과 수직 모두 간격을 설정하려면 .g-*를 사용하십시오.
A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.
테이블에 수직 정렬 유틸리티 클래스를 사용할 수 있습니다.
A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.
Breadcrumb의 구분자를 CSS 변수 --bs-breadcrumb-divider를 사용하여 변경할 수 있는 옵션이 새로 추가되었습니다.

구분자를 >>로 변경하는 예시입니다:
캐러셀에 새로운 다크 변형이 추가되었으며, 클래스 .carousel-dark를 사용합니다. 또한 드롭다운에도 새로운 다크 변형이 추가되어 .dropdown-menu-dark를 사용합니다.
드롭다운에는 새로운 자동 닫기 옵션이 추가되어 기본 동작을 변경할 수 있습니다. 기본적으로 드롭다운 메뉴는 드롭다운 외부나 드롭다운 항목 중 하나를 클릭할 때 닫힙니다. data-bs-auto-close 데이터 속성을 inside로 설정하면 드롭다운 항목 중 하나를 클릭할 때 닫히고, 외부를 클릭할 때는 닫히지 않습니다. outside로 설정하면 드롭다운 외부를 클릭할 때만 닫힙니다. false로 설정하면 드롭다운 버튼을 다시 클릭할 때만 닫힙니다. 자바스크립트로 드롭다운을 초기화할 때는 데이터 속성 대신 autoClose 옵션을 사용할 수 있습니다. 사용 예는 다음과 같습니다:
폼에서 파일 입력에 대한 스타일링이 개선되었습니다.
A new color input has been added, using the class .form-control-color.
A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:
Sass 변수에 새로운 색상 음영과 그늘이 추가되었습니다.
.display-5와 .display-6의 두 가지 새로운 표시 헤딩 크기가 추가되었습니다.
.btn-close-white의 새로운 흰색 버전이 추가되었습니다.
<li> 요소로 감싼 .dropdown-items를 사용하여 Dropdown을 구성할 수 있습니다.
List groups의 항목은 새로운 클래스 .list-group-numbered를 사용하여 번호를 매길 수 있습니다.
Pagination 컴포넌트의 링크에는 transition 속성이 추가되어 스타일이 개선되었습니다.
바디의 배경색을 흰색으로 설정하는 새로운 .bg-body 클래스가 추가되었습니다.
요소의 top, left, right 또는 bottom 속성을 설정하는 새로운 위치 유틸리티 클래스들이 있습니다. 예를 들어, .top-0입니다.
절대 위치 요소를 각각 수평 및 수직으로 중앙에 쉽게 배치할 수 있는 새로운 .translate-middle-x 및 .translate-middle-y 클래스가 추가되었습니다.
새로운 테두리 너비 유틸리티 클래스 .border-*가 1에서 5까지 추가되었습니다.
새로운 표시 유틸리티 .d-grid와 새로운 간격 유틸리티 .gap이 추가되었습니다.
새로운 줄 간격 유틸리티 .lh-1, .lh-sm, .lh-base, .lh-lg가 추가되었습니다.
이전의 반응형 삽입 도우미를 대체하는 새로운 비율 도우미가 추가되었습니다. 클래스 이름은 embed-responsive를 ratio로, by를 x로 교체하여 변경되었습니다. 예를 들어, 이전의 .embed-responsive-16by9는 이제 .ratio-16x9입니다.
A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.
글꼴 크기를 위한 .fs-* 유틸리티가 있으며, RFS가 이제 기본적으로 활성화되어 있습니다.

결론

Bootstrap은 지난 10년 대부분을 선두 위치를 지켜온 주요 CSS 라이브러리 중 하나입니다. 개발자들이 쉽게 반응형 웹사이트를 구축하고 좋은 사용자 경험을 제공할 수 있도록 도와줍니다. Bootstrap 5의 추가 사항과 변경 사항으로 인해 이 과정은 더욱 쉬워질 것이며 웹사이트의 디자인을 개선하고 좋은 사용자 경험을 제공할 수 있습니다. Bootstrap 4를 사용 중이고 Bootstrap 5로 마이그레이션을 고려한다면, 마이그레이션은 쉽고 많은 변경을 필요로 하지 않을 것입니다.

Bootstrap 5에 대한 자주 묻는 질문 (FAQ)

Bootstrap 4와 Bootstrap 5의 주요 차이점은 무엇인가요?

Bootstrap 4와 Bootstrap 5의 가장 큰 차이점은 후자에서 jQuery가 제거되었다는 것입니다. Bootstrap 5는 이제 순수 JavaScript를 사용하므로 더 가볍고 빠릅니다. 또 다른 주요 변경 사항은 문서 정적 사이트 생성기에서 Jekyll에서 Hugo로 전환하는 것입니다. Bootstrap 5는 새로운 유틸리티 API, 확장된 색상 팔레트 및 업데이트된 폼 컨트롤을 소개합니다.

Bootstrap 4에서 Bootstrap 5로 어떻게 마이그레이션 할 수 있나요?

Bootstrap 4에서 Bootstrap 5로 이관하려면 여러 단계가 필요합니다. 먼저, jQuery를 제거하고 베이직 자바스크립트로 대체해야 합니다. 다음으로, Bootstrap CSS와 JS 링크를 최신 버전으로 업데이트합니다. 또한, Bootstrap 5에서 새로 도입된 새로운 클래스로旰 기존 클래스를 대체해야 합니다. 마지막으로, 폼 컨트롤을 업데이트하고 공식 Bootstrap 이관 가이드를 확인하여 추가 변경 사항이 있는지 확인하세요.

Bootstrap 5에서 새로운 기능은 무엇인가요?

Bootstrap 5는 여러 가지 새로운 기능을 도입했습니다. 베이직 자바스크립트를 사용하여 더 가벼워지고 빨라졌으며, 더 유연한 커스터마이징을 위한 새로운 유틸리티 API를 도입했습니다. 확장된 색상 팔레트, 업데이트된 폼 컨트롤, 새로운 SVG 아이콘 라이브러리를 추가했습니다. 문서도 Jekyll에서 Hugo로 전환하여 개선되었습니다.

Bootstrap 5의 새로운 유틸리티 API는 어떻게 작동하나요?

Bootstrap 5의 새로운 유틸리티 API는 더 유연한 커스터마이징을 가능하게 합니다. 자신만의 유틸리티 클래스를 생성하고, 생성되는 유틸리티를 제어하며, 기존 유틸리티를 수정할 수 있습니다. 이로 인해 Bootstrap을 자신의 특정 필요와 선호에 맞게 조정하는 것이 더 쉬워집니다.

Bootstrap 5의 확장된 색상 팔레트의 목적은 무엇인가요?

Bootstrap 5의 확장된 색상 팔레트는 커스터마이징의 더 많은 옵션을 제공합니다. 더 넓은 색상 범위를 포함하여, 더 다양하고 시각적으로 매력적인 디자인을 만들 수 있게 합니다. 이로 인해 웹사이트나 애플리케이션의 색상 스키ーム을 브랜드의 색상과 일치시키는 것이 더 쉬워집니다.

Bootstrap 5에서 폼 컨트롤은 어떻게 업데이트되었나요?

Bootstrap 5에서 폼 컨트롤은 성능과 단순성을 높이기 위해 CSS를 사용하는 대신 JavaScript를 사용했습니다. 또한 더 현대적이고 깨끗한 디자인으로 새로운 모습을 가지고 있습니다. 또한 더 일관성을 위해 사용자 정의 폼이 새로운 폼 컨트롤로 교체되었습니다.

Bootstrap 5의 새로운 SVG 아이콘 라이브러리는 무엇인가요?

Bootstrap 5의 새로운 SVG 아이콘 라이브러리는 1,000개 이상의 무료, 고품질 아이콘을 제공합니다. 이러한 아이콘은 사용자 정의 가능하며 버튼, 메뉴, 경고 등 웹 사이트 또는 애플리케이션의 다양한 부분에서 사용할 수 있습니다. 또한 접근성을 위해 최적화되어 있습니다.

Bootstrap 5에서 문서는 어떻게 개선되었나요?

Bootstrap 5에서 문서는 정적 사이트 생성기에서 Jekyll에서 Hugo로 전환하여 개선되었습니다. 이로 인해 문서가 더 빠르고 사용하기 쉬워졌습니다. 또한 더 많은 예제와 설명을 포함하여 Bootstrap을 효과적으로 사용하는 방법을 이해하는 데 도움이 됩니다.

Bootstrap 5는 모든 브라우저와 호환되나요?

Bootstrap 5는 Chrome, Firefox, Safari, Edge를 포함한 모든 주요 브라우저의 최신 버전과 호환됩니다. 그러나 Internet Explorer를 지원하지 않습니다. 이는 Internet Explorer가 구형이며 많은 최신 웹 기술을 지원하지 않기 때문입니다.

Bootstrap 5를 사용하려면 어떻게 시작해야 하나요?

Bootstrap 5를 사용하려면 공식 Bootstrap 웹사이트에서 다운로드할 수 있습니다. CDN을 사용하여 프로젝트에 Bootstrap을 포함시킬 수도 있습니다. Bootstrap을 얻으면 HTML 파일에서 클래스와 구성 요소를 사용할 수 있습니다. 추가 정보 및 예제는 공식 Bootstrap 문서를 확인하십시오.