Computer >> 컴퓨터 >  >> 프로그래밍 >> HTML

HTML http-equiv 속성 완벽 가이드: 메타 태그로 HTTP 헤더 정보 설정하기

HTML에서 http-equiv 속성은 <meta> 태그와 함께 사용되어, 콘텐츠(content) 속성의 정보를 HTTP 헤더처럼 동작하게 만들어 줍니다. 즉, 서버가 실제로 HTTP 헤더를 전송하지 않아도 브라우저가 해당 정보를 마치 HTTP 헤더인 것처럼 해석하도록 지시할 수 있습니다.

http-equiv 속성이란?

http-equiv는 'HTTP equivalent(HTTP 동등물)'를 의미하며, <head> 영역 안의 <meta> 태그에 추가됩니다. 이 속성을 사용하면 페이지 새로고침, 문자 인코딩 지정, 캐시 제어 등 다양한 브라우저 동작을 문서 자체에서 제어할 수 있습니다.

주요 http-equiv 값

  • refresh: 지정한 시간(초) 후에 페이지를 자동으로 새로고침하거나 다른 URL로 이동시킵니다.
  • content-type: 문서의 문자 인코딩과 콘텐츠 유형을 지정합니다. (예: UTF-8)
  • cache-control: 브라우저의 캐싱 동작을 제어합니다.
  • expires: 캐시된 문서가 만료되는 날짜와 시간을 설정합니다.

사용 예제

다음 코드는 http-equiv 속성을 활용하여 10초마다 페이지가 자동으로 새로고침되도록 구현한 예제입니다.

<html>
   <head>
      <title>HTML http-equiv attribute</title>
      <meta name = "keywords" content = "HTML, meta tag, metadata" />
      <meta name = "description" content = "Description of the document" />
      <meta http-equiv = "refresh" content = "10" />
   </head>
   <body style = "background-color:gray">
      Document content goes here
   </body>
</html>

코드 설명

위 예제에서 핵심 부분은 <meta http-equiv = "refresh" content = "10" />입니다. 이 코드는 10초 간격으로 현재 페이지를 자동으로 다시 불러오라는 명령을 브라우저에 전달합니다. 만약 특정 시간 후 다른 페이지로 이동하고 싶다면, content 값을 "5; url=https://example.com"처럼 작성하여 5초 후 해당 URL로 리디렉션할 수 있습니다.

정리

http-equiv 속성은 서버 설정 없이도 클라이언트 측에서 HTTP 헤더 수준의 제어를 가능하게 하는 강력한 도구입니다. 다만 최신 웹 표준에서는 일부 값(예: content-type)이 <meta charset="UTF-8"> 같은 더 간결한 방식으로 대체되었으므로, 필요한 기능에 맞게 적절히 활용하는 것이 좋습니다.