본문 바로가기
Study Hard/HW

Reset.css와 Bootstrap5의 충돌 (브라우저 초기화)

by 코플+ 2023. 4. 13.

애초 프로젝트 계획할때

부트스트랩5의 적용을 목표로 했다.

 

UI 레이아웃을 다만들고 부트스트랩을 적용했더니 문제가 생겼다.

 

애초에 레이아웃을 설계할때 브라우저css초기화를 reset.css를 먼저 불러온다음 어느정도 틀이만들어지고 부트스트랩5을 cdn에서 링크해 가져왔다.

 

그런데 레이아웃이 바뀌는 것이었다. 충돌의 원인을 개발자도구로 세세히 보니 

 

bootstrap5의 _reboot.scss 라는 놈이 문제였다.

 

이미 https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css 로 초기화한 브라우저를

부트스트랩의 방식대로 다시 초기화해서 이미 만들어진 레이아웃이 깨져버렸다.

 

reboot.scss는 reset.css처럼 부트스트랩만의 방식으로 초기화해주는 놈이다.

 

https://getbootstrap.kr/docs/5.1/content/reboot/

 

Reboot

단일 파일에 있는 요소별 CSS 변경 모음인 Reboot는 Bootstrap을 초기에 빌드하는 우아하고 일관되며 간단한 기준선을 제공합니다.

getbootstrap.kr

 

dosc를 보니 https://getbootstrap.com/docs/5.0/customize/sass/ 부트스트랩의 Sass를 통해서 reboot.scss를 제거한뒤 컴파일할 수 있지만 프로젝트 준비시간이 없는 관계로

부트스트랩5를 제거하고 사용하지 않는걸로 가닥을 잡았다.

부트스트랩5 적용 전 사이드 Nav

 

부트스트랩 5 적용 후

 

댓글