[초보자용 먼지 팁] 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가 수정될 때마다 버전 값을 변경해주는 방법
등이 있습니다.
소중한 시간을 쪼개 질문에 답해주는 고수들에게 왜 안돼는지 되묻기 전에 이런 작은 부분을 먼저 살펴보는 것도 좋을 듯 싶네요.
초보 마음은 초보가 잘 알기에 팁도 아닌데 팁처럼 올려봅니다. :)
댓글 17개
브러운아이
6년 전
유용한 정보네요 감사합니다.
6년 전
감사합니다.
6년 전
유용한 팁을 올려주신 무와보님께 감사를 드립니다.
이 팁이 아니었으면 아직도 헤메고 있었을 1인이었습니다.
그런데, 저도 초보라 1,2,3번에 대한 접근방법도 모르겠어요~~
조금 더 자세히 접근방법도 알려주시면 감사하겠습니다.^^
이 팁이 아니었으면 아직도 헤메고 있었을 1인이었습니다.
그런데, 저도 초보라 1,2,3번에 대한 접근방법도 모르겠어요~~
조금 더 자세히 접근방법도 알려주시면 감사하겠습니다.^^
6년 전
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'); ?>">
처럼 사용합니다.
6년 전
@무와보 자세한 설명 감사합니다.^^
6년 전
아, 1번은 방금 터득했습니다.
개발자모드 진입(F12키) - Settings 진입(F1키) - 중간쯤 Network 항목에 Disable cashe (while DevTools is open) 활성화.
개발자모드 진입(F12키) - Settings 진입(F1키) - 중간쯤 Network 항목에 Disable cashe (while DevTools is open) 활성화.
6년 전
개발단계에서는 간단하게 CTRL+F5 하는방법도 있긴하죠..ㅎㅎ
단지 방문자에게는 캐쉬 자동 갱신이 안되니 무와보님 말씀대로 하는것이 좋긴하구요.
단지 방문자에게는 캐쉬 자동 갱신이 안되니 무와보님 말씀대로 하는것이 좋긴하구요.
6년 전
네 쉽게 캐시를 갱신하는 방법을 설명하고자 했었습니다 ^^
6년 전
CTRL + F5로 안되는 경우가 많더라구요^^
6년 전
이렇게 해도 안 될 때 저는 소스보기 해서 해당 css를 브라우저에 띄워놓고 소스 수정 > css 새로고침 > 페이지 새로고침을 해봐요. 그것마저 안 되면 찌꺼기 파일을 한번 지워주고요.. 하하...
6년 전
이런 방법까지는 생각해보질 않았네요 ㅎㅎ
6년 전
찌꺼기 파일이라 함은 어떤걸 이야기하시는지요?
혹시 temp파일, 0byte파일 같은건가요?
혹시 temp파일, 0byte파일 같은건가요?
6년 전
브라우저 내에 남아 있는 해당 도메인에 대한 임시파일 등을 말씀하시는 것 같습니다.
6년 전
네 그런거요.. 인터넷 사용기록 삭제? 뭐 그런거... ㅎㅎ
6년 전
감사합니다.^^
6년 전
좋은 정보를 알려주셔서 감사합니다.
JKWang
5년 전
CTRL + SHIFT + F5
도 있습니다.
도 있습니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 21816 | |
| 21804 | |
| 21803 | |
| 21802 | |
| 21801 | |
| 21791 | |
| 21773 | |
| 21768 | |
| 21758 | |
| 21753 | |
| 21750 | |
| 21729 | |
| 21712 | |
| 21686 | |
| 21682 | |
| 21675 | |
| 21671 | |
| 21669 | |
| 21657 | |
| 21637 | |
| 21633 | |
| 21631 | |
| 21623 | |
| 21594 | |
| 21592 | |
| 21589 | |
| 21580 | |
| 21567 | |
| 21565 | |
| 21542 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기