[CSS]CSS가 안먹을때 해볼만한 것들

유지보수를 하다 보면 내가 정확히 쓴 것 같은데 CSS가 안 먹힐 때가 많다. 그럴 때 해볼 만 것들을 적어보려고 한다. 

CSS가 안먹을 만한 이유

01. 캐시문제

02. 그전에 쓰였던 CSS와 충돌

03. 겹쳐서 안 보이는 경우

 

해결책

01. 캐시 문제

css를 고쳤는데도 그전과 똑같이 보인다면, 브라우저가 저장해놓은 캐시를 사용하기 때문에 그전에 내용을 그대로(수정되기 전) 보이는 경우가 많다. 해결책으로는 브라우저의 캐시를 지우거나, 파일명을 변경해주는 방법이 했다. 

 

A. 크롬 브라우저 캐시 삭제 방법

브라우저 오른쪽 상단 점버튼 > 도구 더보기 > 인터넷 사용 기록 삭제 클릭

크롬브라우저 오른쪽 상단 점버튼

인터넷 사용기록 삭제

여기서 쿠키 및 기타 사이트 데이터, 캐시된 이미지 및 파일을 삭제해준다. 

그리고 다시 CSS가 먹는지 확인!

 

B. link된 css의 파일명에 버전 붙이기

기존 link

기존에 링크돼있는데 css파일에 버전명을 쿼리스트링 형태로 붙어줍니다.

"?ver=1 " 버전명 붙여준 링크

css의 파일명 뒤에 ?ver=넘버 형태로 붙여주면  브라우저가 기존 url과 다른 url로 인식해서 새로 파일을 불어오게 됩니다.

 

02. 그전에 쓰였던 css와 충돌

css파일을 많이 만들거나 여러 사람이 만졌던 css 또는 워드프레스처럼 자체적으로 많이 css가 적용된 상태에서는 내가 쓴 css가 그전에 쓰였던 것과 충돌하여 적용이 안 되는 경우가 있다. 그럴 때 내 css가 우선 적용되도록 해야 한다. 

 

A. !important 붙여주기

적용됐으면 하는 css속성 값 뒤에 붙여주어서 내가 쓴 css가 더 우선 적용되도록 한다. 

"  !important "

너무 남용하면 안좋겠지만 적용이 안될 때 아주 유용하다. 

 

B. css 선택자 정교하기 쓰기

임포턴트를 썼는데도 내 css가 우선순위가 올라간 느낌이 안들 때 사용해보곤 했던 방법이다. 내 css의 선택자를 더 정교하게(부모를 더 붙여서) 불러온다. 특히 워드프레스에서 잘 먹힘

예를 들어

이렇게 쓰는 것보다,

이렇게 부모도 더 붙여주고, '>'도 넣어줘서 내 css를 좀 더 잘 찾아갈 수 있도록 한다. 

 

03. 겹쳐서 안 보이는 경우

html에 여러 요소들이 있다 보니, 위에 물체에 겹쳐서 css가 적용되었는데 적용되지 않는 것처럼 보일 때가 있다. 

내가 css를 적용시키고 싶은 객체는 div.a02인데 div.a01에 가려 있는데 없는것처럼 보임.

A. z-index 적용

div.a02에게 z-index값을 div.a01보다 높게 준다. 

 

요기에 다 해결책이 있지는 않겠지만

이렇게 다 해보다 보면 이게 아니더라고 문제점을 발견하게 된당...