Bootstrap Card 컴포넌트와 FullCalendar 스타일 충돌 (admin)_1131

문제 상황

문제 화면

해결 화면

문제상황

Bootstrap의 .card 컴포넌트 내부에 FullCalendar를 구현 했을 때 의도하지 않은 스타일 적용이 발생함.

기존의 파란색 테마가 Boostrap의 기본 흰색 배경으로 덮어씌워지는 현상 발생

원인 분석

Bootstrap CSS가 전역 스타일을 적용하면서 기존에 설정된 커스텀 스타일을 덮어쓰는 것이 확인됨
특히 .card 컴포넌트의 background-color: #fff 속성이 주요 원인
Bootstrap의 스타일 우선순위가 FullCalendar의 스타일보다 높게 적용됨

해결 방법

Bootstrap CSS 로드 제거:

html
Copy
<head>
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
    <script src='<https://cdn.jsdelivr.net/npm/[email protected]/index.global.min.js>'></script>
    <script src='<https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js>'></script>
    <script src='<https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/locales/ko.global.min.js>'></script>
<!-- Bootstrap CSS 제거 -->
    <%--<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet">--%>
</head>

head부분의 부트스트랩 css스크립트를 제거함.