html meta tag

문제 상황 !
초기 설계 단계에서 html meta 태그 중 http-equiv = "X-UA-Compatible"라는 것을 접하게 됨

  • 참고:

  • IE8이 등장하면서 ‘호환성 보기’라는 새로운 버튼이 생겨났는데 이 버튼은 IE8이 웹 페이지에 접근했을 때 어떤 렌더링 엔진을 사용할 것인지를 선택하게 하는 용도의 버튼이다.


  • 과거 IE6나 IE7이 브라우저 점유율의 대부분을 차지하고 있을 때 제작된 웹 페이지는 웹 표준들에 맞지 않게 제작되었고, 이러한 오류들을 우회하면서 제작되었기 때문에 현재의 웹 표준과는 다른 방식으로 렌더링된다. 이로 인해 최신 브라우저에서 웹 표준을 지키지 않은 웹 페이지에 방문하게 되면 레이아웃이 깨지거나 작동하지 않는 버그가 발생한다.


  • 현재의 웹 표준을 지키는 브라우저들을 기준으로 제작된 웹 페이지들은 호환성 보기 버튼이 필요하지 않고, 해당 브라우저의 최신 렌더링 모드로 작동을 강제할 필요가 생겼는데 <meta>태그를 사용해서 어떤 렌더링 엔진을 사용할 것인지 전달할 수 있게 되었다.


1
<meta http-equiv="X-UA-Compatible content="IE=edge">
  • 브라우저 모드
    • 표준모드(Standard Mode) : 모든 표준이 엄격하게 지켜짐
    • 관용모드(Quirks Mode) : 구버전 브라우저의 렌더링을 흉내냄
  • content에 들어갈 수 있는 값들
    • IE=5: 관용모드로, 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식 사용
    • IE=7: IE7 표준모드로, 지정된 DOCTYPE에 상관없이 IE7 표준모드 렌더링 방식 사용
    • IE=EmulateIE7: IE7 에뮬레이션 모드로, 지정된 DOCTYPE에 따라 IE7 표준모드나 관용모드로 렌더링 됨
    • IE=8: IE8 표준모드로, 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링
    • IE=EmulateIE8: IE8 에뮬레이션 모드로, 지정된 DOCTYPE에 따라 IE8 표준모드나 관용모드로 렌더링 됨
    • IE=edge: 최신모드로, 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링