반응형
홈페이지를 운영하면서 지속적으로 최신 상태를 유지해야 하는 페이지(아직 개발 중이거나, 이미지의 변경이 자주 일어나는 페이지)는 웹 브라우저의 캐시를 막아야 원활하게 사용이 가능합니다.
이 경우 웹 서버에서 캐시를 막아도 되지만, 보통의 페이지는 캐시 덕분에 로딩 속도를 줄여줄 수 있어 특정 페이지마다 설정해야 하는 경우 HTML에서 meta 태그로 캐시를 막는 방법을 알려 드리겠습니다.
meta 태그를 이용한 캐시 막기 (HTML)
<head> 섹션에 meta 태그 추가
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>No-Cache Page</title>
</head>
<body>
<!-- 내용 -->
</body>
</html>
Cache-Control / no-cache, no-store, must-revalidate
no-cache
- 응답을 캐시에 저장할 수 있지만, 재사용하기 전에 원본 서버에서 유효성 검사 실시
- 브라우저는 캐시된 콘텐츠를 표시하기 전에 항상 최신 버전이 있는지 확인
no-store
- 클라이언트 요청이나 서버 응답의 어떤 부분도 캐시에 저장되지 않도록 설정
- 콘텐츠가 로컬(PC)에 저장되지 않아 웹 페이지에 접속할 때마다 다시 다운로드 실시
must-revalidate
- 캐시 항목이 오래되면 원본 서버에서 캐시 항목을 다시 검증 실시
Pragma / no-cache
- HTTP/1.0 헤더, 주로 이전 브라우저 및 프록시(Proxy)와의 하위 호환성을 위해 사용
- 브라우저가 페이지를 캐시하지 않도록 지시
Expires / 0
- 페이지의 만료 날짜를 과거 날짜(또는 0)로 설정하여 브라우저에 콘텐츠 즉시 만료로 인해, 캐시 불필요 알림
반응형
'웹 개발 > HTML' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 HTML 다른 페이지에 변수 전달 / 서버 스크립트 언어 안쓰고 변수 주고받기 (0) | 2025.08.29 |
|---|---|
| [HTML] RGB 색상 16진수 색상 코드 (RGB Color Code) (1) | 2025.08.26 |
| [HTML] 테이블 테두리 변경하기 한줄, 두줄 (테이블 속성 border, CSS) (1) | 2025.08.23 |
| [HTML] 블로그에 코드 및 결과 공유하기 / 코드펜 사용 방법 (CodePen) (6) | 2025.08.16 |
| [HTML] 파비콘(Favicon) 이미지 생성 및 적용 방법 / 티스토리 또는 웹 사이트에 적용하기 (2) | 2025.08.11 |
