부트스트랩 사용하는 템플릿이랑 fullcalendar 가 충돌하는 것 같아요

Question

현재 타일즈가 부트스트랩 활용 탬플릿으로 구성 돼 있는데 fullcalendar가 화면에 제대로 나오지 않습니다 폰트 같은 게 흰색으로 나오는 등.. 물론 jsp파일을 먼저 로드하게 하면 풀캘린더가 정상적으로 나오지만 그럼 모든 화면이 jsp파일이 우선 로드 돼서 문제인데요.. 특정 파일에서만 풀캘린더의 css 가 우선적으로 먹게 하는 방법 없을까요??

kenu,전독시 · Answer

부트스트랩과 함께 사용하는 템플릿에서 FullCalendar의 CSS가 제대로 적용되지 않는 문제를 해결하기 위해, FullCalendar의 CSS를 특정 파일에서만 우선적으로 적용되게 하는 방법을 찾고 있다면, 다음과 같은 방법들을 고려해 볼 수 있습니다:CSS 변수 사용하기: FullCalendar는 CSS 변수를 사용하여 스타일을 커스터마이징할 수 있습니다. 이를 통해 특정 요소의 스타일을 더 세밀하게 조정할 수 있습니다. 예를 들어, 다음과 같이 :root 선택자에 사용자 정의 속성을 설정하여 FullCalendar의 스타일을 변경할 수 있습니다::root { --fc-border-color: black; --fc-daygrid-event-dot-width: 5px; } 이 방법을 사용하면 FullCalendar의 기본 스타일을 덮어쓰는 데 필요한 속성만 선택적으로 변경할 수 있습니다 1.CSS 우선순위 조정: FullCalendar의 CSS가 다른 스타일시트보다 먼저 로드되도록 하거나, 특정 요소에 대한 CSS 선택자의 우선순위를 높여 원하는 스타일이 적용되도록 할 수 있습니다. 이를 위해 CSS 선택자의 특정성을 높이거나, !important 규칙을 사용할 수 있습니다. 하지만 !important는 가능한 한 사용하지 않는 것이 좋습니다 12.CSS 오버라이드: FullCalendar의 스타일을 덮어쓰기 위해 필요한 요소의 CSS를 직접 오버라이드할 수 있습니다. 이를 위해 Chrome DevTools 등의 개발자 도구를 사용하여 원하는 요소의 현재 활성 CSS 문장을 확인하고, 이를 기반으로 새로운 CSS 문장을 작성할 수 있습니다. 이 방법은 FullCalendar의 CSS가 변경될 경우 추가적인 조정이 필요할 수 있으므로 유연성이 떨어질 수 있습니다 12.PostCSS 사용하기: 빌드 시스템을 사용하는 경우, PostCSS와 같은 도구를 사용하여 FullCalendar의 CSS 변수를 커스터마이징할 수 있습니다. 이를 통해 프로젝트의 생성된 CSS를 다양한 방법으로 변환할 수 있습니다. 예를 들어, postcss-custom-properties 플러그인을 사용하여 CSS 변수를 컴파일하고, 새로운 값을 가진 CSS 파일을 작성할 수 있습니다 2.이러한 방법들을 통해 특정 파일에서만 FullCalendar의 CSS가 우선적으로 적용되도록 할 수 있습니다. 하지만, 이 과정에서 부트스트랩과의 충돌이나 스타일 적용의 복잡성을 고려해야 할 수도 있으므로, 필요에 따라 적절한 조정이 필요할 수 있습니다.from: https://www.phind.com/search?cache=jl7z4yt6oqivovi44h6y5hlw

부트스트랩 사용하는 템플릿이랑 fullcalendar 가 충돌하는 것 같아요

1개의 답변

#tiles 목록