2021. 7. 23. 16:54ㆍWeb/CSS
열심히 코딩을 하다 보면 이전까지 잘 되던 CSS파일의 변경사항이 갑자기 적용이 안 돼
난처한 상황이 생기곤 합니다.
제가 실제로 겪었던 문제이고 이 문제를 해결하느라 시간을 많이 썼던 기억이 남아
작지만 모르는 분들에게 도움을 드리고자 이렇게 공유합니다.
실제 코딩을 하다 보면 아래와 비슷한 상황을 겪게 되실 것 같은데요.
예시로 저는 content class에 backgroun-color를 주도록 하겠습니다.
- HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 적용 문제</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content">
<span>Hello CSS!</span>
</div>
</body>
</html>
|
cs |
- CSS
|
1
2
3
|
.content {
background-color: orange;
}
|
cs |
- 결과 화면
이렇게 CSS 파일 적용이 안 되는 경우에 내가 설정을 잘못 했나 싶은 생각이 드는데 HTML 파일에 직접적으로 style을 주게 되면 적용이 되는 걸 볼 수 있습니다.
- HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 적용 문제</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content" style="background-color: orange;">
<span>Hello CSS!</span>
</div>
</body>
</html>
|
cs |
- 결과 화면
이러한 문제의 원인은 브라우저가 이전에 사용한 CSS를 캐시에 보관해 사용하다
변화된 순간을 파악하지 못해 발생하는 것입니다.
이제 해결 방법 3가지를 알려드리겠습니다.
1. 브라우저 캐시 삭제
크롬 브라우저 기준 방문기록 -> 인터넷 사용 기록 삭제로 들어가서
쿠키 및 기타 사이트 데이터에 체크를 확인하고 삭제하면 됩니다.
2. ?after 추가
HTML 파일 내 CSS를 불러오는 <link> 태그에서 CSS 파일명 뒤에 ?after를 추가해
기존의 파일이 아닌 다른 파일임을 인식하도록 합니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 적용 문제</title>
<link href="style.css?after" rel="stylesheet" type="text/css">
</head>
<body>
<div class="content" style="background-color: orange;">
<span>Hello CSS!</span>
</div>
</body>
</html>
|
cs |
3. 캐시 비우기 및 강력 새로고침
가장 확실하고 편리한 방법입니다.
브라우저에서 F12를 눌러 개발자 도구를 킨 다음 좌측 상단의 새로고침 아이콘을 오른쪽 클릭합니다.
그 중 캐시 비우기 및 강력 새로고침을 하면 CSS 파일이 적용되는 걸 볼 수 있습니다.
개발자 도구를 켜야 오른쪽 클릭이 되는 점, 참고해주세요!
'Web > CSS' 카테고리의 다른 글
| [CSS] 마우스를 올렸을 때 이미지 확대/축소하기 (0) | 2021.08.16 |
|---|---|
| [CSS] 폰트 어썸(Font Awesome) 사용법 (0) | 2021.07.30 |
| [CSS] 햄버거 메뉴 버튼 만들기 (0) | 2021.05.23 |
| [CSS] jpg파일로 움직이는 텍스트 애니메이션(text animation) 만들기 (0) | 2021.05.22 |
| [CSS] bootstrap 사용법 (0) | 2021.05.19 |