문서 모드 문제 조사

표준 지원 사용 항목에서는 웹 페이지의 문서 종류가 웹 페이지에서 지원하는 기능을 제어한다는 것을 배웠습니다. Windows Internet Explorer 및 기타 최신 브라우저에서 지원되는 모든 기능을 사용할 수 있도록 하려면 웹 페이지가 표준 모드로 표시되어야 합니다. 다음 코드 예제에서처럼 표준 기반 문서 종류를 선언하여 웹 페이지를 표준 모드로 설정합니다.


<!DOCTYPE html>


웹 페이지에 표준 기반 문서 종류가 선언되지 않으면 표준 지원이 필요한 기능이 Internet Explorer에서 표시되지 않습니다. 웹 페이지가 제대로 표시되지 않으면 F12 개발자 도구를 사용하여 문제를 해결할 수 있습니다. 대부분의 경우 이와 같은 문제는 웹 페이지가 !DOCTYPE 지시어를 사용하여 표준 기반 문서 종류를 선언하도록 하면 해결됩니다.

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

표준 지원 사용 항목은 다음 이미지에서와 유사한 웹 페이지를 포함하여 두 개의 웹 페이지를 비교했습니다.

IE5 쿼크 모드로 표시된 웹 페이지

이 웹 페이지 디자인에는 둥근 모서리를 표시하는 CSS3(Cascading Style Sheets, Level 3) 특성인 border-radius 특성이 포함되어 있습니다. 하지만 현재 예제에서 개체의 모서리는 일반적인 사각형 모서리로 표시됩니다. 이는 Internet Explorer가 웹 페이지 표시에 사용된 문서 모드가 지원하지 않는 CSS 스타일시트 속성은 무시하기 때문입니다.

IE5(쿼크) 모드에서 border-radius 속성을 지원하지 않으므로 Internet Explorer는 웹 페이지가 해당 문서 모드로 표시될 때 이 속성을 무시합니다.

F12 도구를 사용하여 Internet Explorer에 표시된 웹 페이지를 탐색할 수 있습니다. 이렇게 되면 이전 이미지에 표시된 사각형 모서리와 같은 문제를 해결하고 식별할 수 있습니다. 이 항목은 유사한 문제를 식별하는 한 가지 방법을 보여주며 다음 정보도 제공합니다.

CSS 특성 값 확인

웹 페이지에 있는 개체의 CSS 특성 값을 확인하려면 다음과 같이 하세요.

  1. F12 키를 눌러 F12 도구를 엽니다.

    F12 키를 눌러 F12 개발자 도구를 엽니다.
  2. 클릭으로 요소 선택 단추를 클릭한 다음 확인할 CSS 속성이 들어 있는 개체를 클릭합니다.

    클릭으로 요소 선택 도구나 HTML 트리를 사용하여 검토할 개체를 선택합니다.
  3. 추적 스타일 단추를 클릭하고 관심 있는 속성의 특성을 검토합니다.

    추적 스타일 도구는 웹 페이지에서 선택한 개체의 CSS 특성을 표시합니다.

이 예에서는 border-radius 특성 특히, border-bottom-left-radius, border-bottom-right-radius, border-top-left-radiusborder-top-right-radius의 자식 특성 값에 대해 살펴봅니다. 하지만 이 예제에서 이러한 특성은 표시되지 않습니다.

웹 페이지가 IE5 모드로 표시되기 때문입니다. Windows Internet Explorer 9에서 border-radius 속성은 IE9 표준 모드에서만 지원됩니다. IE5 모드에서 border-radius 속성을 지원하지 않으므로 Internet Explorer는 CSS 특성을 표시할 때 이 속성을 무시합니다.

다음 단원은 웹 페이지의 현재 문서 모드를 변경하여 이를 확인하는 방법을 보여줍니다.

웹 페이지를 다양한 문서 모드로 표시

F12 도구를 사용하여 웹 페이지를 다양한 문서 모드로 표시하려면 다음과 같이 하세요.

  1. F12 도구가 아직 열리지 않았으면 F12 키를 눌러 도구를 여세요. 현재 문서 모드는 F12 도구 창의 메뉴 모음 오른쪽에 표시됩니다.

    웹 페이지의 문서 모드는 F12 개발자 도구 창의 상단 모서리에 표시됩니다.
  2. 문서 모드 메뉴 단추를 클릭하면 웹 페이지를 표시하는 데 사용할 수 있는 추가 문서 모드가 표시됩니다.

    문서 모드 컨트롤을 클릭하여 웹 페이지에 사용할 수 있는 추가 문서 모드 메뉴가 표시됩니다.
  3. 메뉴에서 Internet Explorer 9 표준 옵션을 클릭하여 웹 페이지를 IE9 모드로 표시합니다. 이전에 선택한 개체의 스타일 특성을 추적하는 경우 이제 border-radius 자식 특성이 CSS 특성과 함께 나타납니다.

    Internet Explorer 9 표준 명령은 웹 페이지를 IE9 표준 모드로 표시합니다.
  4. 웹 페이지가 적절한 문서 모드로 표시되면 웹 페이지가 원하는 대로 나타나고 div 요소가 둥근 모서리로 표시됩니다.

    웹 페이지가 IE9 표준 모드로 표시되면 모서리가 둥글게 표시됩니다.

F12 도구는 현재 Internet Explorer가 웹 페이지를 표시하는 방식만 변경하고 웹 페이지의 원본 소스 코드는 수정하지 않습니다.

이것이 프로덕션 웹 페이지 관련 문제일 경우에는 다음 코드 예제에서처럼 표준 기반 문서 종류를 지정하는 !DOCTYPE 지시어를 포함하도록 기본 태그를 수정하세요.


<!DOCTYPE html>


참고  "X-UA-Compatible" 헤더를 사용하여 웹 페이지의 문서 모드를 지정할 수도 있습니다. 자세한 내용은 문서 호환성 정의를 참조하세요.

F12 도구는 웹 페이지 문제를 신속하게 해결하고 식별하는 데 유용한 많은 도구를 제공합니다. 이 예제에서는 이러한 도구를 사용하여 웹 페이지의 문서 모드 관련 문제를 결정합니다. F12 도구에 대한 자세한 내용은 웹 페이지 디버그 및 문제 해결을 참조하세요.

관련 항목

표준 지원 사용

 

 

표시:
© 2014 Microsoft