• 회원가입
  • 로그인
  • 구글아이디로 로그인

[intro] CSS - 반영 안 될 때 살펴볼 사항 + CSS・JS 바로 반영시키기 (= 캐시 새로고침)★★★★★

목차
  1. 캐시 영향
  2. 파일 덮어쓰기 실패
  3. 다른 선택자 영향 / JS・JQEURY 영향
  4. CSS 바른 지정 여부와 오타 유무 점검

 

※ 현재 적용 중인 CSS (파일・선택자) 찾기

 

캐시 영향

1. Ctrl + F5  (캐시새로고침)

 

Ctrl + F5

캐시 및 메모리까지 새로 고침. (= CSS나 파비콘 수정 확인.)

 

Ctrl + Shift + R

크롬 캐시 초기화 ★

 

F5

단순 새로고침 - 새로운 데이터 내용만 불러들임.


F12 키  >  Network 탭  > Disable cache 체크 > F5 새로고침. 

캐시 사용 해제 

 

관리자 > 환경설정 > 캐시파일 일괄삭제

그누보드5(영카트5) 캐시 제거. 

 


2. Ctrl  +  Shift  +  Del (크롬 인터넷 임시파일 제거)

 

PS. OS별 캐시새로고침 작동 키

  • 윈도우 : Ctrl + F5
  • Mac OSX : Apple + R   또는,  Command + R
  • 리눅스 : F5

 


3. 모바일 브라우저 경우

 

모바일 삼성 브라우저
https://homzzang.com/b/free-4326

 

모바일 크롬 브라우저

https://homzzang.com/b/free-4444

 

iPhone, iPad 또는 iPod touch에서 Safari의 방문 기록 및 쿠키 지우기
https://support.apple.com/ko-kr/HT201265

 


4-1. 그누보드5(영카트5) 스타일파일 수정 후 모든 회원에게 바로 적용.

※ G54 이상 유저는 아래 PS3 방법 이용 권장. 

 

4-1-1. 

CSS・JS 외부링크 코드 뒤에 버전 상수 파란색 코드 추가.

 

CSS

<link rel="stylesheet" href=".../homzzang.css?ver=<?php echo G5_CSS_VER; ?>">


JS 파일

<script src=".../homzzang.js?ver=<?php echo G5_JS_VER; ?>"></script>

 

 

4-1-2. 

/extend/version.extend.php 파일 숫자 수정 (예: 오늘날짜 180926)

 

<?php

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가


define('G5_JS_VER',  '180926');

define('G5_CSS_VER', '180926');

?>

 

4-1-3 (아미나 경우)

/extend/apms.extend.php 파일 약 13라인 숫자 수정

define('APMS_SVER', '180820');

 

 

PS1.

위 소스를 아래처럼 반영할 경우, 자동으로 갱신됨.

다만, 새로 불러오므로 트래픽 ↑ ・ 로드 속도 ↓

 

<?php

if (!defined('_GNUBOARD_')) exit;

define('G5_JS_VER',  date("Y-m-dH:i:s"));

define('G5_CSS_VER', date("Y-m-dH:i:s"));

?>

홍땍땍 님 (181203) https://sir.kr/g5_tip/9754


또는,

 

<?hp

if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가

$mktime = mktime();

define('G5_JS_VER',  $mktime);

define('G5_CSS_VER', $mktime);

?>

xpem 님 (181230) https://sir.kr/qa/283439

 

PS2.

파일 수정 경우만 새로 불러오기. (특별회원 전용)
https://homzzang.com/b/g5-290

 

PS3.

모든 CSS, JS 파일에 버전 상수 적용하기 (G54 이상)

https://sir.kr/g5_plugin/10198

 


5. 클라우드플레어 CSS 주의사항 (Cloudflare Https Stylesheet)

 

Overview  >  Development Mode 를 ON 상태로 설정
※ 3시간 후 자동으로 일반모드로 전환됨.

 

잉끼 님 (190221) https://sir.kr/qa/292088


파일 덮어쓰기 실패

1. 수정해야 할 파일이 정말로 해당 경로 파일인지 체크.

 

간혹, 다른 경로의 파일을 수정해 덮어씌운 후 왜 안 바뀌지 하는 분들 계셈.

예를 들어, 
모바일테마로 제작된 반응형 테마 경우

/theme/basic/css/mobile.css 파일 수정해야 하는데,

/theme/basic/css/default.css 파일 열심히 수정해 덮어씌우는 분들 계심. ㅡㅡ;
반드시, 본인이 어떤 경로의 (테마・스킨)을 사용하고 있는지 확인 후 수정할 것 !!

 

https://homzzang.com/b/css-251

 


2. 퍼미션 (= 파일권한) 체크.

 

2-1.

업로드해서 덮어씌운 파일을 다시 다운받아 변경한 파일이 맞는지 확인.
만약, 변경한 파일이 아닐 경우, 퍼미션 변경 후 다시 업로드 하셔야 함.

2-2.

FTP로 퍼미션 변경하기 (예: 파일질라)

  • FTP 접속 후 파일 선택 
  • > 마우스 오른쪽 눌러 파일권한 클릭 
  • > 707 입력 후 확인  
  • > 다시 파일 업로드

FTP 자세한 설명서 보기. (※ 특별회원 이상 열람 가능.)

2-3.
PUTTY로 퍼미션 변경하기. (= FTP로 퍼미션 변경이 안 될 때 이용.)
  • PUTTY 다운
  • > 아이피 등록 후 접속
  • > SSH 정보 입력 후 로그인
  • > 해당 파일이 있는 경로로 이동
  • > 파일 퍼미션 변경:  chmod 707 파일명 (예)  chmod 707 style.css
  • > 폴더 퍼미션 변경:  chmod 707 폴더명 (예)  chmod 707 data
  • > 서브 폴더 및 파일까지 퍼미션 변경:  chmod -R 707 data

※ PUTTY 사용법 자세히 보기. (정회원 +)
https://homzzang.com/b/server?sca=PuTTY

2-4.
다시 수정한 파일로 덮어쓰기

 

 


3. 이미지 동영상 등이 제대로 재생안 될 때, 해당 파일의 확장자가 홈페이지에서 허용한 확장자 맞는지 체크.

 

G5 경우, (관리자  >  환경설정  >  기본환경설정)페이지 아래 사항 체크

 

  • 이미지 업로드 확장자 : gif|jpg|jpeg|png
  • 플래쉬 업로드 확장자 : swf
  • 동영상 업로드 확장자: asx|asf|wmv|wma|mpg|mpeg|mov|avi|mp3|mp4

 

 


다른 선택자 영향 / JS・JQEURY 영향 

1. 다른 선택자 영향 (= CSS 적용 순서)


1.
다른 선택자의 영향을 받고 있는지 확인 !!

https://homzzang.com/b/css-3

 
2.
아이디 지정 없이 클래스만으로 CSS 정의했는지 확인 ★
https://homzzang.com/b/css-5

 


2. js, jquery 스타일 관련 메서드

 

javascript나 jquery로 인해서 해당 css가 강제 변경되는건지 체크. (예)  css()

 


CSS 바른 지정 여부와 오타 유무 점검

1. CSS 선택자 체크.


1-1.

CSS 선택자 지정 방법
https://homzzang.com/b/css?sca=selector


1-2.
선택자를 숫자로 시작했거나 지원않는 특수문자 사용한건지 체크.

 


2. CSS 속성 체크.

 

2-1.

문서타입 (Doctype) 규칙에서 허용하는 CSS 속성만을 사용했는지 체크
예를 들어,
HTML5에서 더 이상 유효하지 않는 CSS 속성을 사용하진 않았는지 체크

2-2.
오타 있는지 체크

 

2-3.

CSS 외부링크 주소가 제대로 적혔는지 체크

 


3. CSS 속성값 체크.

 

3-1.

문서타입 (Doctype) 규칙에서 허용하는 CSS 속성값만을 사용했는지 체크
예를 들어,
HTML5에서 더 이상 유효하지 않는 CSS 속성값을 사용하진 않았는지 체크

 

3-2.

해당 속성에서 지원하는 속성값인지 체크
(예) float 속성엔 center 속성값 지원 않는데, float:center 라 넣진 않았는지 체크

3-3.
오타 있는지 체크 

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 부부구 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2017-05-03 (수) 10:00 7년전
좋은글감사해요 홈짱님은 항상 꾸준하시네요
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2017-05-03 (수) 21:40 7년전
댓글 감사합니다.
사이트 운영에 필요한 알찬 정보 많이 준비해 놓도록 하겠습니다.
자주 들려 주세요 ~~ ^^
주소
분류 제목
css CSS - mask-position 속성 -
css CSS - mask-repeat 속성 -
css CSS - mask-size 속성 -
css CSS - max-block-size 속성 -
css CSS - max-inline-size 속성 -
css CSS - min-block-size 속성 -
css CSS - min-inline-size 속성 -
css CSS - offset 속성 -
css CSS - offset-anchor 속성 -
css CSS - offset-distance 속성 -
css CSS - offset-path 속성 -
css CSS - offset-rotate 속성 -
css CSS - orphans 속성 - 페이지나 열의 하단에 남겨야 하는 최소 줄 수 지정 (= orphans속성…
outline CSS - outline-offset 속성 -
css CSS - overflow-anchor 속성 -
position CSS - overflow-x 속성 - 수평방향으로 넘치는 내용 처리 방법 지정 (= overflow-x속성…
position CSS - overflow-y 속성 - 수직방향으로 넘치는 내용 처리 방법 지정 (= overflow-y속성…
css CSS - overscroll-behavior 속성 -
css CSS - overscroll-behavior-block 속성 -
css CSS - overscroll-behavior-inline 속성 -
22/25
목록
찾아주셔서 감사합니다. Since 2012