웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

meta 태그 http-equiv 설정방법과 차이점

Last Modified : 2018-02-24 / Created : 2016-03-23
27,080
View Count

웹브라우저의 헤드 영역에 다음과 같이 meta 태그와 함께 사용된 http-equiv 속성을 볼 수 있다. 이 속성은 왜 사용되고 각각의 태그마다 차이점을 알아보고자 한다.



! 왜 http-equiv를 사용하는가?

마이크로소프트에서 만든 익스플로러 브라우저는 호환성 보기 모드가 존재하는데 이는 사용자가 지원하는 브라우저에 따라 오래된 브라우저에서 정상적으로 출력되지 않는 이슈가 발생할 수 있다.

이런 이슈들은 최신 브라우저만 지원하는 환경이라면 사실 이 태그를 사용하는 의미가 크지 않다. 하지만 일부 웹사이트는 오래된 버젼의 브라우저까지 모두 지원하기도 하는데 이런 경우 특히 필요한 메타 태그이다.

한국의 경우 IE 8 또는 IE 9 유저가 많기 때문에 이를 지원하기 위해서 더더욱 필요할 것이다. 결국 오래된 브라우저 지원을 위해서 아래 태그들은 가히 필수적이라 할 것이다.


!! http-equiv 사용 방법 및 차이점 보기

이 태그는 다양한 형태가 존재하는데 아래와 같이 사용된다.
<meta http-equiv="X-UA-Compatible" content="IE=9" />

이렇게 메타태그에 등록하면 IE 9에서의 렌더링이 호환성보기를 무시하게됩니다. 참고로, 다음과 같이 세미콜론을 사용하여 여러개를 한번에 등록할 수도 있습니다.
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7" />


더 간편한 방법으로 아래처럼 사용하는 경우 모든 IE 브라우저에 호환성보기를 무시해줍니다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />


아래 방법은 가장 많이 사용되는 방법으로 뒤에 Chrome=1을 추가해줍니다. 이 경우 Chromeframe을 사용하는 유저에게 렌더링합니다.
<meta http-equiv="X-UA-Compatible" content="IE=Edge; chrome=1" />


Previous

iOS 아이폰 input 태그에 기본 둥근 테두리 및 그림자 제거 방법

Previous

[html] table 태그 summary 속성 알아보기