표준 지원을 사용하는 방법

최근 버전의 Windows Internet Explorer에서는 HTML5, CSS3, SVG 등의 다양한 기존 표준과 새로 등장하는 표준의 지원이 향상되었습니다. 이러한 표준과 그 밖의 최신 표준의 기능을 통합한 웹 페이지를 표시하려면 웹 페이지를 표준 모드로 표시해야 합니다.

여기서는 Internet Explorer를 통해 웹 페이지가 표시되는 방식을 제어하는 문서 모드에 대해 설명합니다. 또한 표준 지원을 사용하는 방법, 문서 모드 문제를 인식하는 방법 및 이러한 문제를 해결하는 방법에 대해서도 설명합니다.

소개

Internet Explorer에서 볼 때 표준 모드로 표시되는 웹 페이지를 만들려면 다음 코드 예제에서처럼 HTML5 문서 종류 지시어를 사용하세요.


<!DOCTYPE html>
<html>
<head>
  <title>Enabling Standards Support</title>
</head>
<body>
  <p>
     Because this webpage uses the HTML5 document 
     type, it is displayed in IE9 Standards mode.
  </p>
</body>


HTML5 문서 종류 지시어는 웹 브라우저에 웹 페이지를 표준 모드로 표시하도록 지정합니다. 특히, 이 예제의 !DOCTYPE directive는 표준 기반 문서 종류를 지정합니다. 따라서 Internet Explorer에서 이 웹 페이지는 표준 모드로 표시됩니다. 이렇게 하면 기존 표준과 새로운 표준에 사용할 수 있는 최고 수준의 지원이 가능하며 Internet Explorer는 다음 목록과 같은(하지만 이에 국한되지는 않음) 기능을 포함하는 웹 페이지를 표시할 수 있습니다.

웹 페이지에서 표준 모드가 필요한 하나 이상의 기능을 사용하고 표준 규격 !DOCTYPE directive를 포함하지 않는 경우에는 결과 동작이 웹 페이지를 보는 데 사용되는 Internet Explorer의 버전에 따라 달라집니다.

  • Internet Explorer 10은 웹 페이지를 쿼크 모드로 표시하지만, 페이지가 레거시 문서 모드로 표시되는 경우가 아니면 최신 표준에 정의된 기능을 지원합니다.
  • Windows Internet Explorer 9, Windows Internet Explorer 8, Windows Internet Explorer 7 및 Microsoft Internet Explorer 6에서는 마치 브라우저의 구형 버전을 통해 표시될 때처럼 웹 페이지가 표시됩니다.
  • JavaScript를 사용하는 Windows 스토어 앱은 웹 페이지를 표준 모드로 표시합니다. JavaScript를 사용하는 Windows 스토어 앱은 레거시 문서 모드를 지원하지 않습니다.

짐작하시는 대로, 이로 인해 예기치 않은 결과가 발생할 수 있습니다. 하지만 위에 표시된 HTML5 예제와 같이 웹 페이지에 표준 규격 doctype 지시어가 포함된 경우에는 모든 Internet Explorer 버전에서 웹 페이지가 표준 모드로 표시됩니다. 따라서, 브라우저의 해당 버전에 사용할 수 있는 표준에 대한 최상의 지원을 제공하는 셈입니다. 자세한 내용은 문서 호환성 정의를 참조하세요.

문서 모드 이해

!DOCTYPE directive는 웹 페이지의 문서 모드를 제어합니다. 웹 페이지에 !DOCTYPE directive를 포함하지 않거나 웹 페이지가 비표준 모드 문서 종류를 지정하는 경우, Internet Explorer는 웹 페이지를 IE5(쿼크) 모드로 표시합니다. 이렇게 되면, Internet Explorer는 웹 페이지에서 표준 모드를 필요로 하는 기능을 무시합니다.

다음 이미지는 각각 개체 세 개가 포함된 웹 페이지 두 개를 보여줍니다.

IE9 표준 모드로 표시된 웹 페이지와 IE5(쿼크) 모드로 표시된 동일한 웹 페이지를 보여주는 그림

이 두 이미지는 유사하지만 눈에 띄는 차이점이 있습니다. 예를 들어, 왼쪽 웹 페이지는 둥근 모서리를 사용하여 개체를 표시하고 오른쪽 이미지는 일반적인 사각형 모서리를 사용합니다. 개체의 위치와 크기도 웹 페이지마다 다릅니다.

이러한 차이에도 불구하고 각 웹 페이지는 거의 동일한 태그를 사용합니다. 다음 코드 예제는 IE9 표준 모드로 표시된 왼쪽 웹 페이지의 태그를 보여줍니다.


<!DOCTYPE html>
<html>
  <head>
    <title>IE9 Standards Mode Example</title>
    <link rel="stylesheet" type="text/css" href="rectangles.css"> 

    <style>
      div { border-radius : 8px; }
    </style>

  </head>
  <body>

  <div id="divOuter">Outer Object
    <div id="divMiddle">Middle Object
      <div id="divInner">Inner Object</div>
    </div>
  </div>
</body>
</html>


다음 코드 예제는 IE5 모드로 표시된 오른쪽 이미지의 태그를 보여줍니다.


<html>
  <head>
    <title>IE5 Quirks Mode Example</title>
    <link rel="stylesheet" type="text/css" href="rectangles.css"> 

    <style>
      div { border-radius : 8px; }
    </style>

  </head>
  <body>

  <div id="divOuter">Outer Object
    <div id="divMiddle">Middle Object
      <div id="divInner">Inner Object</div>
    </div>
  </div>
</body>
</html>


예제를 비교해 보면 제목 요소를 제외하고는 각 페이지 간의 유일한 차이점이 첫 번째 예제가 !DOCTYPE directive를 사용하여 표준 기반 문서 종류를 선언한다는 것입니다. 두 번째 예제는 문서 종류를 선언하지 않습니다.

또한 웹 페이지에 있는 각 div 요소에 대해 둥근 모서리를 정의하기 위해 border-radius 특성을 지정하는 style element가 각 페이지에 포함되어 있음을 알 수 있습니다. border-radius 특성은 CSS3(Cascading Style Sheets, Level 3) 사양의 일부로 정의되므로 표준 모드로 표시된 웹 페이지에 대해서만 지원됩니다.

하지만 오른쪽 웹 페이지(두 번째 예제)는 문서 종류를 선언하지 않습니다. 그 결과, Internet Explorer는 이전 버전의 브라우저에서 지원되는 기능만 지원하도록 설계된 문서 모드인 IE5 모드로 웹 페이지를 표시합니다.

!DOCTYPE directive는 표준 기반 웹 사이트에 대한 중요한 고려 사항으로, 웹 페이지의 유효성을 확인하는 데 필요합니다. 최상의 결과를 얻으려면 다음 예제에 표시된 HTML5 문서 종류와 같은 표준 모드를 사용하도록 하는 !DOCTYPE directives가 공개 웹 사이트에 포함되어야 합니다.


<!DOCTYPE html>


자세한 내용은 문서 호환성 정의를 참조하세요.

이 조항의 내용

항목설명

문서 모드 문제 조사

이 항목은 F12 도구를 사용하여 웹 페이지 문서 종류와 관련한 문제를 조사 및 식별하는 방법을 확인하는 데 유용합니다.

 

 

 

표시:
© 2014 Microsoft