CSS 파일이 변경 후 적용이 안될 때

CSS 파일이 변경 후 적용이 안될 때

시간을 많이 잡아먹어서, 문제 해결 후 기록합니다.

<div class="row">
  <div class="col-md-4">.col</div>
  <div class="col-md-4">.col</div>
  <div class="col-md-4">.col</div>
</div>

현재 저는 그리드를 만들려 합니다.

이 그리드에 스타일을 주기 위해 링크를 한 CSS 파일을 선택자로 수정해 주었습니다.

일단 선택이 잘 되는지 확인해보기 위해 테두리도 넣어보고 색도 아무거나 넣어봤습니다.

.row {
    border: solid #2B81AF thick;
    background-color: #710909; 
}

그런데 결과는?

변화가 없습니다.

설정이 잘못됐을까요?

그리드에 직접 스타일을 넣어봅시다.

<div class="row" style="background-color: #00aa88">
  <div class="col-md-4">.col</div>
  <div class="col-md-4">.col</div>
  <div class="col-md-4">.col</div>
</div>

넣고 확인해보면

잘 됩니다.

선택자 문제라 생각해서 이것저것 해보고, 안되서 검색해보니

CSS 파일 링크문제더군요.

이전에 사용한 CSS를 브라우저가 캐쉬에 보관해놓고 사용하기에

링크된 CSS 변화점을 기억하지 못하는 것이라고 합니다.

해결방법은 두가지입니다.

먼저

브라우저의 캐시를 삭제합니다. 

브라우저가 참조할 파일이 없다면 새로운 CSS를 캐시에 보관하겠죠?

다른 방법으로는

<link rel="stylesheet" href="../../resources/CSS/main.css" type="text/css" 
      media="screen" title="no title" charset="utf-8"/>

제 링크 코드입니다.

이 링크코드에서

<link rel="stylesheet" href="../../resources/CSS/main.css?after" type="text/css" 
      media="screen" title="no title" charset="utf-8"/>

?after 부분을 추가해줍니다.

문자열은 아무거나 상관이 없습니다.

요는 브라우저가 다른 CSS를 인식하게끔만 하면 되니까요.