Header가 사라지고, 메뉴가 깨지고, 글자가 겹치고, CSS가 적용되지 않습니다. 페이지가 깨지는 현상은 비교적 흔하게 만나는 문제입니다. 중요한 것은 어느 부분부터 문제가 시작됐는지 확인하는 것입니다.
범위 확인
모든 페이지가 이상하다Theme · 전역 CSS · Plugin · Cache를 의심합니다.
특정 페이지만 이상하다그 페이지의 콘텐츠 · 특정 Block · Custom CSS를 확인합니다.
모바일만 이상하다Responsive CSS나 모바일 전용 설정을 확인합니다.
가장 먼저 Cache
CSS나 JavaScript를 바꿨는데 화면이 그대로라면 Browser Cache나 서버 Cache일 수 있습니다. 다른 브라우저나 Incognito 모드에서 확인하고, 필요하면 Cache를 비운 뒤 다시 봅니다.
Theme 업데이트 직후라면 Theme 변경사항과 호환성을 확인합니다. Custom CSS나 Template을 많이 수정한 사이트라면 특히 주의해야 합니다. 특정 Plugin이 CSS나 JavaScript를 바꾸면서 다른 요소와 충돌하는 경우도 있습니다.
개발자 도구를 여십시오
브라우저의 Developer Tools에서 CSS 오류 · JavaScript 오류 · Network 오류를 확인할 수 있습니다. 처음에는 모든 내용을 이해할 필요가 없습니다. 빨간색 Error가 있는지 보는 것부터 시작하십시오.
진단 순서는 전체 페이지인가 → 특정 페이지인가 → PC/모바일 → Cache → Theme → Plugin → Custom CSS → JavaScript입니다.