[초보자용 먼지 팁] css 수정후 반응이 없다면 먼저 확인해보세요 정보
[초보자용 먼지 팁] css 수정후 반응이 없다면 먼저 확인해보세요본문
팁이라고 할 수도 없는 먼지 부스러기입니다.
질답 게시판을 눈팅하다보면 자주 나오는 댓글 중
수정하라는 대로 css를 수정했느데 변화가 없네요.
css 수정이 안먹혀요
css 수정이 안되는 것 같습니다
와 같은 내용이 심심찮게 올라옵니다.
대부분 수정한 내용의 반영을 확인하지 않는 경우입니다.
브라우저 새로고침만으로 css(또는 js)가 반영되지 않는 경우는 캐시 때문일 가능성이 높습니다.
그누보드에서도 캐시의 변경을 위해 "add_stylesheet" 함수에서 css뒤에 "G5_CSS_VER"를 사용하고 있는데 실제 이 부분을 놓치는 (저와 같은) 초보자들이 있을 것 같네요.
1. 가장 편한 방법 중 하나는 브라우저 개발자모드를 열고 작업하는 경우 "Disable cashe (while DevTools is open)-크롬의 경우"와 같이 캐시 사용을 막는 방법
2. 버전을 바꾸기 위해 css 수정 후 /extend/version.extend.php에서 버전 값을 변경해주는 방법
3. ***.css?ver=<?php echo filemtime(./***.css) ?> 와 같이 해당 css가 수정될 때마다 버전 값을 변경해주는 방법
등이 있습니다.
소중한 시간을 쪼개 질문에 답해주는 고수들에게 왜 안돼는지 되묻기 전에 이런 작은 부분을 먼저 살펴보는 것도 좋을 듯 싶네요.
초보 마음은 초보가 잘 알기에 팁도 아닌데 팁처럼 올려봅니다. :)
추천
7
7
댓글 17개
유용한 정보네요 감사합니다.
감사합니다.
유용한 팁을 올려주신 무와보님께 감사를 드립니다.
이 팁이 아니었으면 아직도 헤메고 있었을 1인이었습니다.
그런데, 저도 초보라 1,2,3번에 대한 접근방법도 모르겠어요~~
조금 더 자세히 접근방법도 알려주시면 감사하겠습니다.^^
이 팁이 아니었으면 아직도 헤메고 있었을 1인이었습니다.
그런데, 저도 초보라 1,2,3번에 대한 접근방법도 모르겠어요~~
조금 더 자세히 접근방법도 알려주시면 감사하겠습니다.^^
2. 그누보드 /extend/version.extend.php 파일에서
define('G5_JS_VER', '190501-1');
define('G5_CSS_VER', '190501-1');
이 부분 숫자를 바꿔주시면 됩니다. 대부분 수정한 날짜를 기억하기 위해 년월일로 기입하는 경우가 많지요.
3. filemtime 함수를 이용해서 해당 파일의 수정날짜를 자동으로 기입하도록 하는 방법입니다.
예시를 보여드리는 것이 이해가 더 쉬울 것 같네요.
<?php add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/default.css?ver='.filemtime(G5_CSS_PATH.'/default.css').'">', 1); ?>
또는
<link rel="stylesheet" href="<?php echo G5_CSS_URL; ?>/default.css?v=<?php echo filemtime(G5_CSS_PATH.'/default.css'); ?>">
처럼 사용합니다.
define('G5_JS_VER', '190501-1');
define('G5_CSS_VER', '190501-1');
이 부분 숫자를 바꿔주시면 됩니다. 대부분 수정한 날짜를 기억하기 위해 년월일로 기입하는 경우가 많지요.
3. filemtime 함수를 이용해서 해당 파일의 수정날짜를 자동으로 기입하도록 하는 방법입니다.
예시를 보여드리는 것이 이해가 더 쉬울 것 같네요.
<?php add_stylesheet('<link rel="stylesheet" href="'.G5_CSS_URL.'/default.css?ver='.filemtime(G5_CSS_PATH.'/default.css').'">', 1); ?>
또는
<link rel="stylesheet" href="<?php echo G5_CSS_URL; ?>/default.css?v=<?php echo filemtime(G5_CSS_PATH.'/default.css'); ?>">
처럼 사용합니다.
@무와보 자세한 설명 감사합니다.^^
아, 1번은 방금 터득했습니다.
개발자모드 진입(F12키) - Settings 진입(F1키) - 중간쯤 Network 항목에 Disable cashe (while DevTools is open) 활성화.
개발자모드 진입(F12키) - Settings 진입(F1키) - 중간쯤 Network 항목에 Disable cashe (while DevTools is open) 활성화.
개발단계에서는 간단하게 CTRL+F5 하는방법도 있긴하죠..ㅎㅎ
단지 방문자에게는 캐쉬 자동 갱신이 안되니 무와보님 말씀대로 하는것이 좋긴하구요.
단지 방문자에게는 캐쉬 자동 갱신이 안되니 무와보님 말씀대로 하는것이 좋긴하구요.
네 쉽게 캐시를 갱신하는 방법을 설명하고자 했었습니다 ^^
CTRL + F5로 안되는 경우가 많더라구요^^
이렇게 해도 안 될 때 저는 소스보기 해서 해당 css를 브라우저에 띄워놓고 소스 수정 > css 새로고침 > 페이지 새로고침을 해봐요. 그것마저 안 되면 찌꺼기 파일을 한번 지워주고요.. 하하...
이런 방법까지는 생각해보질 않았네요 ㅎㅎ
찌꺼기 파일이라 함은 어떤걸 이야기하시는지요?
혹시 temp파일, 0byte파일 같은건가요?
혹시 temp파일, 0byte파일 같은건가요?
브라우저 내에 남아 있는 해당 도메인에 대한 임시파일 등을 말씀하시는 것 같습니다.
네 그런거요.. 인터넷 사용기록 삭제? 뭐 그런거... ㅎㅎ
감사합니다.^^
좋은 정보를 알려주셔서 감사합니다.
CTRL + SHIFT + F5
도 있습니다.
도 있습니다.