• 이용 문의
  • 회원가입
  • 로그인

[intro] CSS - 반영안될때 살펴볼사항 (=점검사항 = 확인할사항) + CSS바로바로반영 (캐시새로고침)★★★★★

5,141  
현재 적용 중인 CSS 선택자 찾기
 
[목차] 
▒ 캐시 때문에 안 될 때
▒ 파일 덮어쓰기 안 되었을 때
▒ 다른 선택자 영향 받을 때 (= CSS 적용 우선순위 체크)
▒ 바른 지정 여부와 오타 유무 점검
 
 
▒ 캐시 때문에 안 될 때 점검사항
 
1.
Ctrl + F5  (캐시새로고침)

 

Ctrl F5  캐시 및 메모리까지 새로 고침 - CSS나 파비콘 수정 확인 시 필요 ★
Ctrl + Shift  : 크롬 캐시 초기화 ★

 

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

 


 

[참고] 캐시 사용 해제하기

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

 


2.
크롬 인터넷 임시 파일 제거 (= 캐시 제거)

 

Ctrl  +  Shift  +  Del

 


 

※ 참고: OS별 작동 키

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

 

정보 출처: Loy 님

3.

모바일 브라우저 경우

 

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

 

모바일 크롬 브라우저 경우

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

 

 

4-1.

그누보드5, 영카트5 스타일파일 수정 후 바로 적용 (= 일반회원 바로적용)

 

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


 

<?php

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


define('G5_JS_VER',  '180926');

define('G5_CSS_VER', '180926');

?>

 

 

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

다만, 매번 새로 불러와야 하므로 속도 저하 원인됨.

 

<?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"));

?>

 

홍땍땍 님 https://sir.kr/g5_tip/9754

또는,

 

 

<?hp

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

$mktime = mktime();

define('G5_JS_VER',  $mktime);

define('G5_CSS_VER', $mktime);

?>


xpem 님 https://sir.kr/qa/283439

 


 

파일 수정한 경우에만 새로 불러오려면 아래 좌표 참고.
https://homzzang.com/b/g5-290

 

※ 무조건 되는 게 아니라, JS 및 CSS 추가할 때 아래처럼 버전 상수를 추가해야 적용 됨.

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

<link rel="stylesheet" href="'.G5_CSS_URL.'/'.(G5_IS_MOBILE?'mobile':'default').'.css?ver='.G5_CSS_VER.'">


4-2.

그누보드M 스타일파일 수정 후 바로 적용 (= 일반회원 바로적용)

 

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

 

 

<?php

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


define('GML_JS_VER',  '180926');

define('GML_CSS_VER', '180926');

?>

 

※ 그누M도 그누5와 같은 방식으로 수정 가능.


 

5.

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

 

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

 

잉끼 님 https://sir.kr/qa/292088

 

 

 

▒ 파일 덮어쓰기 안 되었을 때

 

1.

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

 

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

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

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

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

 

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

 

 

2.

퍼미션 (= 파일권한)

 

1.

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

2.

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

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

FTP 자세한 설명서 보기
https://homzzang.com/b/g5-17 (FTP 연결법)
https://homzzang.com/b/g5-1 (퍼미션 변경법)

3.
PUTTY로 퍼미션 변경하기 (= FTP로 퍼미션 변경이 안 될 때 이용)

→ PUTTY 다운
→ 아이피 등록 후 접속
→ SSH 정보 입력 후 로그인
→ 해당 파일이 있는 경로로 이동
→ 파일 퍼미션 변경:  chmod 707 파일명  (예)  chmod 707 style.css
→ 폴더 퍼미션 변경:  chmod 707 폴더명  (예)  chmod 707 data
→ 서브 폴더 및 파일까지 퍼미션 변경:  chmod -R 707 폴더명  (예)  chmod -R 707 data

PUTTY 자세한 사용법은 아래 좌표 참고
https://homzzang.com/b/server?sca=PuTTY

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

 

 

3.

이미지 동영상 등이 제대로 재생안 될 때,

해당 파일의 확장자가 홈페이지에서 허용한 확장자 맞는지 체크


그누보드5 경우,

관리자  >  환경설정  >  기본환경설정 페이지에서 아래 사항들 체크

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

 



 

 

▒ 다른 선택자 영향 받을 때

 

1. CSS 적용 순서

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

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

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

 

 

 

 

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

 

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

 

 

 

 

 

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


1. 

CSS 선택자


1.

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


2.
선택자를 숫자로 시작했거나 지원않는 특수문자 사용하진 않았는지 체크

 

 

2. 

CSS 속성


1.

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

2.
오타 있는지 체크

 

 

3. 

CSS 속성값


1.

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

 

2.

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

3.
오타 있는지 체크 


 


2017-05-03 (수) 10:00 2년전
좋은글감사해요 홈짱님은 항상 꾸준하시네요
주소 답글
     
     
2017-05-03 (수) 21:40 2년전
댓글 감사합니다.
사이트 운영에 필요한 알찬 정보 많이 준비해 놓도록 하겠습니다.
자주 들려 주세요 ~~ ^^
주소 답글
이름
비밀번호
자동등록방지
분류 제목
intro CSS - CSS정의・CSS장점・CSS구문・CSS초기화
intro CSS - 발전사 (CSS1 → CSS2.01 → CSS3)
intro CSS - 적용 방법 3가지 ★★★ - (인라인스타일 / 내부스타일 / 외부스타일) CSS적용순서 + 속성 강제 적용 !important
selector CSS - 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항)
selector CSS - ID선택자 (= 아이디선택자) , class선택자(= 클래스선택자) + CSS적용 우선순위 ★★★★★
selector CSS - * 전체선택자 - 모든요소 (요소선택자)
selector CSS - element 요소선택자 - 지정요소 (요소선택자)
selector CSS - element,element 병렬선택자 ★ - 나열된요소 (= 여러요소, 요소선택자)
1/20
목록

방문자 수

오늘 993
어제 1,416
최대 2,081
전체 657,558
Since 2012