테크정보
[프레임워크] Bootstrap 4 vs Bootstrap 5 차이점과 개선된 부분
부트스트랩Bootstrap최신버전비교
Front-End
2024.04.11 115 회 읽음
Front-End
24.04.11 115
부트스트랩은 모바일과 데스크탑에 맞게 반응형으로 작동하는 홈페이지 서비스가 활성화 되면서 함께 인기를 끌고 있는 오픈 소스 프레임 워크입니다. 모바일을 우선으로 접근하는 방식을 이용하여 다양한 기기에서 더 빠르고 쉽게 디자인할 수 있는 강점이 있습니다. HTML, CSS, JS에서 사용할 수 있으며 PHP, Node와 같은 프론트 엔드 UI/UX 구성에도 도움이 됩니다. 디자인 적인 요소가 기본 적용되기 때문에 개발자는 관리자 이외에도 쉽고 간편하게 활용됩니다.
사람들은 왜 부트스트랩을 이용하나요?
빠르면서도 쉽게 사용이 가능합니다.
모바일을 우선 적용하는 디자인으로 심플한 구조 입니다.
무료로 사용이 가능합니다.
다양한 브라우저 지원이 가능합니다.
다양한 화면 크기를 지원 합니다. (576px, 768px, 992px, 1200px)
Bootstrap4 와 Bootstrap5 차이점
| 구분 | Bootstrap4 | Bootstrap5 |
| Grid | 5개 계층 xs, sm, md, lg, xl 사용 | 6개 계층 xs, sm, md, lg, xl, xxl |
| Color | 정해진 몇가지 색상만 사용 | 추가된 색상과 팔레트와 음영 지원 |
| jQuery | 모든 관련 플러그인 사용 | jQuery 제거 |
| IE | IE 10, IE 11 모두 지원 | IE 10, IE 11 지원 종료 |
| Form | 라디오 버튼, 체크박스는 OS를 따르고 기본 브라우저를 따릅니다. | 폼 양식이 OS나 브라우저에 따라 변경되지 않으며 양식 컨트롤의 추가할 수 있고 브라우저에 |
| API | 유틸리티 수정이 불가 | 자유롭게 수정하고 생성 가능 |
| 아이콘 | 미지원 Font Awesome 활용 | 자체 SVG 아이콘 지원 |
| Nav | 인라인 블럭 속성이 있고 dropdown-menu-dark Class는 기본값으로 흰색 드롭다운이 표시 | 인라인 블록 속성 제거, dropdown-menu-dark 기본값으로 검은색 드롭다운이 표시 |
| Flexbox | 열과 행을 쉽게 구현하고 justify-center-content 클래스 요구에 따라 정렬을 직접 사용 | 고급 그리드 시스템 사용과 상대적 위치가 없다. |
| RTL | 오른쪽에서 왼쪽 전환 비활성화 | 오른쪽에서 왼쪽으로 전환 가능 |
처음 사용하면서 느꼈던 부분은 bootstrp4의 경우 기본 폰트사이즈가 커서 small 테그를 이용해서 사용했으나 bootstrap5의 경우 다시 기본사이즈가 작게 적용이 되었습니다.
클래스 중에도 -left와 -right로 사용하던 클래스가 -home -end로 변경이 되고 여백처리에서 가로 x 세로 y 와 같은 형식도 추가되고 select에서 사용하는 클래스와 같이 이전 버전과는 다른 부분이 있어 문서를 참고하는게 좋습니다.
