프로젝트 배포 전에 마지막 테스트 하는데 갑자기 멀쩡하게 동작했던 SweetAlert2에 문제가 발생했다!(ㅜㅜ)
SweetAlert2는 이전 사용법 글에 적었듯이 원래 기본 아이콘 5가지를 제공해준다.
분명 기본 아이콘이 정상적으로 표시됐었는데, 배포 직전에 확인하니 아이콘의 CSS가 깨져있었다.
정상적인 아이콘
깨진 아이콘
폭풍 구글링을 통해 브라우저 버전이나 인코딩 세팅, SweetAlert2의 버전 차이로 인해 이러한 문제가 발생할 수 있다는 점을 알 수 있었으나, 해당 부분을 전부 살펴보았을 때 전혀 문제가 없었다.
코드를 한참 뜯어본 후에야 그 원인을 알 수 있었는데...!
글로벌 스타일을 통해 CSS를 리셋 시켜둔걸 내가 잊고 있었던 것이다...!!!!!!!!
개발자 도구를 통해 살펴 봤을 때, 상단의 리셋 부분 때문에 하단의 아이콘 CSS들이 무효화된 것을 확인할 수 있다.
리셋을 지워주면 바로 해결될 문제지만, 이미 리셋을 적용한 상태로 개발을 마친 터라 지울 수 없었다.
그래서
https://github.com/sweetalert2/sweetalert2/releases
sweetAlert2 깃허브에서 CSS 파일을 가져와 글로벌 스타일 코드에서 {reset} 아래 붙여넣었다.
이를 통해 기본 스타일은 리셋되지만, sweetAlert2의 스타일이 다시 적용되어 리셋으로부터 보호되도록 했다.
즉, CSS reset을 유지하면서도 sweetAlert2의 스타일은 덮어씌워서 그대로 유지할 수 있게 된 것이다!!!
나중에 Normalize.css를 배우면 해결 쉽게 해결 될 문제라고 하는데 아직 배우지 않았기에 일단은 현 상황에서 해결할 수 있는 방법을 통해 해결 완료 😎
