CSS | 스타일 파일 로드 에러 체크리스트 6가지
요약
CSS 파일이 로드가 되지 않을 경우 체크리스트를 가져왔습니다.
개발자 모드 진입
먼저 크롬, 엣지, 파이어폭스와 같은 브라우저를 실행해야 합니다.
개발자 모드(F12, 마우스 우측 버튼 클릭 후 검사)를 켠 다음부터 DevTools 창을 활용할 수 있게됩니다.
여기서 왠만한 모든 문제를 찾을 수 있습니다.
- 코드가 정상적인지 확인
- 파일 로드되었는지 확인
- 파일 인코딩이 정상적으로 되어있는지 확인
- 파일 경로 확인
- 파일 업로드 되었는지 확인
- 캐시 제거
크게는 다섯가지로 나누어 CSS 로드에 대한 문제를 해결할 수 있습니다.
<link rel="stylesheet" type="text/css" href="css/style.css">일반적인 적용 방법입니다. css 폴더의 style.css 파일에 접근하게 됩니다.
<style type="text/css">
@import url("css/style.css");
</style>@import 를 사용하여 입력하는 방법이 있지만, 속도의 문제로 추천드리지는 않습니다
파일 경로 확인
FTP로 자료를 올렸을 경우 경로가 /var/www/html 로 시작될 가능성이 높습니다. 해당 경로가 아닌 경우는 Nginx, Apache 설정파일에 들어가 경로를 확인하여야 합니다.
(카페24나 일반적인 웹 호스팅의 경우는 /www 에서 자료를 업로드 하면 될겁니다.)
해당 경로에서 업로드를 하고 연결했음에도 로딩이 되지 않는다면 개발자모드(F12) 에 들어가 에러가 있는지 체크해보세요. 로딩에 실패했습니다 뉘앙스의 문구가 있다면 경로가 제대로 들어가지 않았을 가능성이 높습니다.
인코딩 체크하기
파일 인코딩이 다르더라도 코드가 해석하여 읽을줄 알았지만 아니었어요. 파일이 읽히지 않는 경우는 인코딩이 정상적으로 되어있는지 확인하시면 좋습니다.
특히나 예전 파일의 경우는 euc-kr 로 되어있는 경우가 많은데, 이 때 utf-8 와 같은 방식의 포맷으로 변경하면 해결될 것이라 생각됩니다.
강력 새로고침
일반적으로 캐시 제거라 불리는 강력 새로고침 방법입니다. 컨트롤 + 쉬프트 + R 을 누르면 적용 됩니다.
기타 방법은 컨트롤 + 쉬프트 + N 을 통해 시크릿 모드에서 창을 띄우는 방법과, 설정에서 캐시를 지우는 방법 등이 있습니다.