디자인이 웹 브라우저에서 바뀌지 않습니다ㅠ

Question

http://soe1435.dothome.co.kr

 

노트패드를 이용해서 사이트의 디자인을 수정하고 있는데요.

크롬 웹 브라우저에서 수정한 사이트의 디자인 상태를 체크하고 있습니다. 그런데 링크의 색깔을 바꿨는데도 불구하고 디자인이 사이트에서는 안 바뀝니다. 왜 이러는건지 잘 모르겠습니다. 헤더도 안 바뀝니다. f12해서 확인했는데 아예 디자인이 수정되지 않은 상태로 나오네요.

바뀌지 않은 크롬 브라우저 상의 헤더 영역 css(첫번째), 수정한 디자인의 헤더 영역 css(두번째)입니다.)

Answer 1

일단 CSS 캐쉬로 인해 적용되지 않을 수 있습니다.

즉, 웹브라우저는 일정 시간 기존 CSS 파일을 그대로 적용하도록 하기 위해 로컬에 내려받아 저장한후 저장된 CSS 파일을 이용해서 처리해줍니다.

매번 서버에 요청하는 것이 비효율적이기 때문에 웹브라우저는 일정시간 로컬에 저장해서 적용하도록 합니다. 이것이 Cache(캐쉬)입니다.

자주 변경되는 파일이라면 별도의 처리가 필요하지만 그렇지 않는 경우라면 오히려 캐쉬 활용이 장점이 될 수 있습니다.

캐쉬를 업데이트 하려면 가장 빠른 방법은 ctrl + F5 키를 함께 눌러 새로고침하는 것입니다.

다른 방법은 link 태그의 href 속성 값(외부 CSS 파일의 경로)의 끝에 아래와 같이 추가하는 것입니다.

<link href="CSS 경로?1" type="text/css" rel="stylesheet" />

?를 붙이고 뒤에 아무 영문자나 숫자를 기존 값과 다르게 입력하시고 웹브라우저로 확인해 보시면 즉시 반영되어 처리됩니다. 

정리하자면 작업 중인 경우에는 ctrl + F5를 눌러 새로고침하거나 CSS 경로뒤에 "?영문자(또는 숫자)"를 붙여주면 웹브라우저는 서버로부터 새롭게 파일을 받아 반영해줍니다.