부트스트랩 5와 4의 차이점
jQuery 제거
부트스트랩 5에서는 jQuery가 제거되었습니다. 부트스트랩 4에서는 jQuery가 필수 의존성으로 포함되어 있었지만, 부트스트랩 5에서는 순수 JavaScript로만 작성되었습니다. 이에 따라 부트스트랩 5는 더 가벼워지고, jQuery를 사용할 필요가 없기 때문에 성능이 향상됩니다. 이 변화는 React, Vue.js, Angular 같은 최신 JavaScript 프레임워크와의 호환성을 높이고, 더 빠른 로딩 속도를 제공합니다. 기존에 jQuery 의존성이 필요했던 기능들은 이제 순수 JavaScript로 대체되었습니다.
폼 컨트롤 개선
부트스트랩 5는 폼 요소와 관련된 많은 개선 사항을 도입했습니다. 부트스트랩 4에서는 폼 요소의 스타일링에 여러 가지 한계가 있었지만, 부트스트랩 5에서는 form-floating 클래스와 같은 새로운 기능을 추가하여 입력 필드를 더욱 직관적으로 만들 수 있게 되었습니다. 이 클래스는 입력 필드와 레이블을 겹쳐서 표시할 수 있게 해 주어, 깨끗하고 세련된 폼을 디자인할 수 있습니다. 또한, 라벨과 입력 필드의 스타일링이 더 일관되게 개선되었습니다.
그리드 시스템 개선
부트스트랩 5에서는 그리드 시스템에 몇 가지 중요한 변경사항이 있었습니다. col-* 클래스에서 자동으로 컬럼의 크기가 조정되는 새로운 시스템이 도입되었습니다. 부트스트랩 5에서는 g-* 클래스를 사용하여 간격을 직접 설정할 수 있게 되어, 요소들 사이의 간격을 더 정밀하게 제어할 수 있습니다. 이전 버전에서는 그리드의 간격을 설정하기 위해 margin이나 padding을 사용해야 했으나, 이제는 더 직관적인 방법으로 설정할 수 있습니다.
유틸리티 클래스의 확장
부트스트랩 5에서는 유틸리티 클래스가 확장되었습니다. 부트스트랩 4에서 제공되던 유틸리티 클래스는 한정적이었지만, 부트스트랩 5에서는 더 많은 유틸리티 클래스가 추가되어 다양한 스타일을 쉽게 적용할 수 있게 되었습니다. 예를 들어, spacing, text, background, border, position 등 다양한 속성에 대한 유틸리티가 추가되었습니다. 이를 통해 더 복잡한 스타일을 CSS를 직접 작성하지 않고도 빠르게 구현할 수 있습니다.
아이콘 시스템 변경
부트스트랩 5에서는 아이콘 시스템이 바뀌었습니다. 부트스트랩 4에서는 Font Awesome과 같은 외부 아이콘 라이브러리를 사용했지만, 부트스트랩 5에서는 Bootstrap Icons라는 자체 아이콘 라이브러리가 포함되었습니다. 이 아이콘 라이브러리는 벡터 기반으로, 더 직관적이고 유연한 방식으로 아이콘을 구현할 수 있습니다. 부트스트랩 5에서는 이제 별도로 외부 아이콘 라이브러리를 설치할 필요 없이 bi 클래스를 사용하여 손쉽게 아이콘을 적용할 수 있습니다.