• 1:1 문의
  • 회원가입
  • 로그인

[intro] CSS - 수정내용이 반영안될때 살펴볼사항 (=점검사항 = 확인할사항) ★★★★★

[목차]
 
▒ 캐시 때문에 안 될 때
▒ 파일 덮어쓰기 안 되었을 때
▒ 다른 선택자 영향 받을 때 (= CSS 적용 우선순위 체크)
▒ 바른 지정 여부와 오타 유무 점검
▒ 클라우드플레어 CSS 작업 주의사항 (Cloudflare Https Stylesheet)

 
▒ 캐시 때문에 안 될 때
 
Ctrl + F5

 

Ctrl F5  캐시 및 메모리까지 새로 고침 - CSS나 파비콘 수정 확인 시 필요 ★

 

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

 


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

 

Overview  >  Development Mode 를 ON 상태로 설정

※ 3시간 후 자동으로 일반모드로 전환됨.


잉끼 님 https://sir.kr/qa/292088 
 
 
크롬 인터넷 임시 파일 제거

 

Ctrl  +  Shift  +  Del

 



※ 참고: OS별 작동 키

윈도우 : Ctrl F5

Mac OSX : Apple R   또는   Command R

리눅스 : F5

정보 출처: Loy 님

 

 

모바일 브라우저 경우

 

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

 

모바일 크롬 브라우저 경우

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

 

 

 

그누보드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

 

※ 무조건 되는 게 아니라, 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.'">

 

 


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

 

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

 

 

<?php

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


define('GML_JS_VER',  '180926');

define('GML_CSS_VER', '180926');

?>

 

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

 

 

 

 

 

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

퍼미션 (= 파일권한)

 

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.
다시 수정한 파일로 덮어쓰기

 

 

 

 

이미지 동영상 파일 확장자가 홈페이지에서 허용한 확장자 맞는지 체크


그누보드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.
오타 있는지 체크

 


 

즐겨찾기 (= 북마크) : Ctrl + D
홈페이지 제작
유지보수 관리

no_profile 부부구 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2017-05-03 (수) 10:00 1년전
좋은글감사해요 홈짱님은 항상 꾸준하시네요
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2017-05-03 (수) 21:40 1년전
댓글 감사합니다. 사이트 운영에 필요한 알찬 정보 많이 준비해 놓도록 하겠습니다. 자주 들려 주세요 ~~ ^^
주소
분류 제목
intro CSS - 정의와 장점 + CSS 기본 문법
intro CSS - 발전사 (CSS1 → .01 → CSS3)
intro CSS - 적용 방법 3가지 ★★★ - (인라인 스타일 / 내부 스타일 / 외부 스타일) 적용 순서 + 속…
selector CSS - 선택자 (Selector) 종류
selector CSS - 아이디(id) , 클래스(class) 선택자 ★★★★★
selector CSS - 전체선택자 (*)
selector CSS - 요소선택자 (요소)
selector CSS - 병렬선택자 (요소,요소) ★ - 요소 여러개 나열
selector CSS - 자손선택자 (요소 요소) ★ - 특정 요소 아래의 모든 자손 요소
목록

방문자 수

오늘 337
어제 471
최대 583
전체 438,671
Since 2012