HTML에 meta 속성 중 http-equiv은 무엇을 의미할까요?

최근 Remix를 학습하면서, 그리고 레이어 서비스에서 동적 오픈그래프 태그를 대응하면서, HTML의 메타 태그에 대해 조금씩 알아보는 시간을 가졌다. 보통 많이 사용하는 title, viewport 등 많이 사용하는 요소들만 확인을 하다보니 익숙치 않는 몇몇 이름들이 보였는데, 그 중 http-equiv의 refresh 속성에 대해 알아보면서 http-equiv 속성에는 무엇들이 있는지 다루어보려고 합니다.

 

http-equiv 란?

먼저, HTML의 meta 태그는 문서의 부가적인 정보를 제공하는 태그입니다.

meta 태그의 http-equiv 속성은 HTTP 헤더에 정보 또는 값을 제공하는 content 속성입니다.

주로 사용하는 용도는 HTML 문서에서 사용할 문서의 종류나 페이지 이동(새로 고침) 등에 사용을 할 수 있습니다.

HTML에는 아래와 같은 문법을 통해 선언이 가능합니다.

<meta http-equiv="content-security-policy|content-type|default-style|refresh">

 

http-equiv에 들어가는 속성은 다양하게 구성을 하고 있는데 속성들은 아래와 같이 이루어져있습니다.

http-equiv 속성이 명시되어있다면, 반드시 content 속성도 함께 명시가 되어야합니다.

• content-security-policy 
  · 문서에 대한 콘텐츠 정책을 지정합니다
• content-type
  · 문서의 character ecoding을 지정합니다.
• default-style
  · 사용할 선호 스타일 시트를 지정합니다.
• refresh
  · 문서가 자동으로 새로 고쳐지는 시간 간격(초 단위)를 정의합니다.

html-equiv의 다양한 속성

content-security-policy

문서에 대한 콘텐츠 보안 정책을 지정합니다.

현재 페이지의 콘텐츠 정책을 정의할 수 있습니다.

대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드 포인트를 지정해 사이트 간 XSS 방어에 도움을 줍니다.

<meta http-equiv="content-security-policy" content="script-src 'self' https://api.google.com">

 

content-type

문서의 character encoding을 지정합니다.

지정을 하게 될 경우 특성의 값은 반드시 text/html; charset=UTF-8 이어야합니다.

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

 

default-style

사용할 선호 스타일 시트를 지정합니다.

기본 CSS 스타일 시트 세트의 이름을 지정할 수 있습니다.

content 속성의 값은 동일한 문서에 존재하는 link 요소의 title 속성 값과 일치하거나, 동일한 문서에 존재하는 style 요소의 title 속성 값과 일치해야만 합니다.

<meta http-equiv="default-style" content="the document's preferred stylesheet">

 

refresh

문서가 자동으로 새로 고쳐지는 시간 간격(초 단위)를 정의합니다.

url이 없으면 현재 자기 자신의 페이지가 새로고침 됩니다.

<meta http-equiv="refresh" content="5; url=이동할 라우팅 주소">

마치며

Remix를 공부하면서 정말 신기한 태그들을 많이 배우고 있습니다. 오픈 그래프를 만들면서도 생각을 했던 부분은 단순히 meta 태그의 경우, 코드 한 줄을 작성했음에도 불구하고 내부적으로는 많은 것들이 변환되어 개발자 또는 사용자에게 보여지는구나 라는 생각을 했습니다. 자바스크립트를 활용한 웹 서비스를 만드는 것도 좋지만, Remix의 원초적이고 시맨틱한 철학을 베이스로 기술을 배우다보니 이런 원초적인 HTML과 Link 태그에 대한 부분들에 깊이있게 접근하여 확인을 할 수 있었던 것 같습니다.

레퍼런스

[HTML] <meta> http-equiv 속성 알아보기

<meta>: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN