(웹) 브라우저 캐시가 헷갈려요. Cache-Control이랑 ETag는 각각 어떻게 도는 건가요?

배포하고 나서 CSS 고쳤는데 사용자 화면엔 옛날 게 그대로 나오는 문제를 겪고 캐시 공부를 시작했어요. 근데 헤더가 종류가 많아서 뭐가 뭔지 정리가 안 됩니다.

일단 응답 헤더에 이런 게 있는 건 봤어요.

Cache-Control: max-age=3600
ETag: "abc123"

Cache-Control의 max-age는 이 시간 동안은 서버에 안 물어보고 브라우저가 저장해둔 걸 그냥 쓴다 이 뜻으로 이해했는데 맞나요? 그럼 max-age 지나면 그때부터는 매번 다시 다운받는 건가요?

그리고 ETag는 뭔가 파일이 바뀌었는지 확인하는 용도 같은데, max-age랑 같이 있으면 둘이 어떻게 협력하는 건지를 모르겠어요. 시간 지나면 브라우저가 ETag 값을 서버에 보내서 안 바뀌었으면 304(Not Modified) 주고 바뀌었으면 새로 준다 이런 식인가요?

304가 오면 본문은 안 받으니까 빠르다는 것 같은데, 그럼 아예 max-age를 길게 주는 거랑 ETag로 매번 확인하는 거랑 실무에선 어떻게 조합해서 쓰나요? 예를 들어 자주 안 바뀌는 이미지랑 자주 바뀌는 HTML은 캐시 정책을 다르게 가져가야 하는 건지 궁금합니다.