Skip to main content

개발자용 Internet Explorer 9 가이드

2011년 3월 14일

개발자용 Internet Explorer 9 가이드에서는 Internet Explorer 9의 기능과 향상된 기능을 소개합니다. 이 가이드를 통해 웹 개발자와 디자이너는 이러한 향상된 기능을 이용하는 데 필요한 정보를 얻을 수 있습니다. 또한 개발자는 Internet Explorer Test Drive (영문)를 사용하여 플랫폼이 실제로 어떻게 작동하는지 살펴볼 수 있습니다.

소개

Windows Internet Explorer 9을 사용해 주셔서 감사합니다. 개발자는 자신과 고객이 사용하는 브라우저에 대한 최신 정보를 알고 싶을 것입니다. Internet Explorer 9은 세계에서 가장 많이 사용되는 웹 브라우저의 최신 버전입니다. Internet Explorer 9은 미래형 웹을 위한 플랫폼, 도구 및 기능을 제공하여 웹 개발 커뮤니티에서 상호 운용성 있고 표준을 준수하는 풍부한 웹 응용 프로그램을 만들 수 있도록 지원합니다.

이 문서에서는 Internet Explorer를 사용하는 고객을 대상으로 하는 웹 개발자에게 새로 추가된 이러한 향상된 기능을 웹 사이트와 응용 프로그램에서 사용하는 방법을 보여 줍니다. Test Drive 사이트에서 이러한 기능이 실제로 어떻게 작동하는지를 보여 주는 데모도 확인해야 합니다. Internet Explorer 9의 새로운 기능에 대해 자세히 알아보고 의견을 보내려면 릴리스 정보(영문)와 함께 MSDN의 Internet Explorer 9의 새로운 기능(영문)을 참조하십시오. Internet Explorer 9에 대한 최신 뉴스를 보려면 IE 팀 블로그(영문)를 참조하십시오. Internet Explorer에 대한 최신 개발자 정보는 MSDN의 Internet Explorer Developer Center를 참조하십시오.

Internet Explorer 9은 다음과 같은 플랫폼 차원에서 Internet Explorer 9이 어떻게 발전했는지를 개발자가 쉽게 이해할 수 있도록 도와줍니다.

  • 다양한 브라우저 성능
  • 동일한 태그가 서로 다른 브라우저에서 동일한 방식으로 작동할 수 있도록 도와주는 웹 표준 지원
  • Windows PC의 장점을 활용하는 새 그래픽 기능

다양한 브라우저 성능

브라우저 성능은 브라우저 내의 수많은 하위 시스템과 관련이 있습니다. 각 사이트는 물론 동일한 사이트 내에서도 각 활동에 따라 브라우저에 대한 다양한 작업과 요구가 있습니다. 예를 들어 Windows Live 메일, Microsoft Office Web Apps 등의 웹 응용 프로그램은 Bing News, Digg 등의 뉴스 집계 사이트와는 전혀 다른 방식으로 브라우저 하위 시스템을 사용합니다.

새 JavaScript 엔진인 "Chakra" 소개

스크립트 엔진 성능은 전체 브라우저 성능의 한 요소일 뿐입니다. 스크립트 성능은 Internet Explorer 7에 비해 Internet Explorer 8에서 훨씬 향상되었으며 Internet Explorer 9에서도 새 JavaScript 엔진인 "Chakra"를 통해 더욱 향상되었습니다. Chakra 엔진은 병렬 방식으로 코드를 해석, 컴파일 및 실행하며 사용 가능한 경우 CPU 코어를 여러 개 이용합니다. 자세한 내용은 IE 팀 블로그의 " Internet Explorer 9의 새 JavaScript 엔진"(영문)을 참조하십시오.

물론 Internet Explorer 팀은 모든 브라우저 하위 시스템의 성능 특성을 실제 사이트에서 사용할 때를 기준으로 검토하고, 벤치마크뿐 아니라 실제 사이트의 전체 성능을 향상시키는 것을 목적으로 합니다.

동일한 태그에 대한 웹 표준 지원

Internet Explorer는 상호 운용성 있는 풍부한 기능을 웹 개발자에게 제공합니다. 여러 번 반복해서 웹 사이트를 다시 작성하고 테스트하기를 원하는 개발자는 없으므로 브라우저 공급업체가 표준을 채택하면 이러한 목적을 효율적으로 달성할 수 있습니다.

Internet Explorer 팀은 Internet Explorer 8에서 상호 운용성이 높은 CSS 2.1을 구현했으며 동시에 7200회가 넘는 테스트로 구성된 테스트 모음을 W3C(World Wide Web Consortium)에 기부했습니다. 이것은 중요한 사항인데, 유효성 검사 테스트가 없을 경우 일관성 있는 표준 구현이 힘들기 때문에 사이트 개발자가 표준을 쉽게 사용할 수 없습니다.

Internet Explorer 9은 표준 지원과 상호 운용성에 중점을 두고 있습니다. 예를 들어 Internet Explorer 9에는 새로운 HTML5 지원, 많은 CSS3 기능에 대한 향상된 지원 및 Internet Explorer에 처음 추가된 SVG 기본 지원이 모두 포함되어 있습니다.

Windows 기반 PC의 장점을 활용하는 새 그래픽 기능

Windows 에코시스템에서는 하드웨어가 크게 혁신됩니다. Internet Explorer 9을 사용하면 웹 개발자가 이러한 혁신을 이용하여 하드웨어를 기반으로 그래픽과 텍스트를 렌더링할 수 있습니다.

Internet Explorer 9은 Windows API(응용 프로그래밍 인터페이스)의 DirectX 제품군을 사용하여 웹 개발자에게 유용한 몇 가지 고급 기능을 제공합니다. Direct2D 및 DirectWrite를 통해 모든 그래픽 및 텍스트 렌더링을 CPU에서 그래픽 카드로 이동했습니다. 그래픽 하드웨어 가속은 Windows에서 그래픽을 많이 사용하는 다양한 콘텐츠의 사이트가 CPU를 덜 사용하여 더 빨리 렌더링될 수 있음을 의미합니다. 뿐만 아니라 이전에 사용한 것과 동일한 표준으로 사이트를 작성하는 동안 이러한 변경 사항을 자동으로 이용할 수 있습니다.

새로운 기능 목록

편의상, 이 목록에는 Internet Explorer 9에 새로 추가된 모든 개발자 기능이 포함되어 있습니다. Internet Explorer 9 시험판 빌드에서 변경된 내용에 대한 자세한 설명은 개정 기록을 참조하십시오.

  • 고급 CSS3 지원
    • border-radius 속성을 통한 둥근 모서리
    • CSS3 배경 및 테두리 기능
    • opacity 속성
    • RGBA, HSL 및 HSLA 색 모델
    • CSS3 글꼴 속성 및 새로운 웹 글꼴 형식
    • CSS3 미디어 쿼리
    • CSS3 네임스페이스
    • CSS3 값 및 단위
    • CSS3 선택기
  • 향상된 데이터 URI 지원
  • DOM(문서 개체 모델) 향상
    • 고급 DOM 기능
    • XML과 DOM 간의 구문 분석 및 직렬화
    • 새로운 DOM L2(수준 2) 및 L3(수준 3) 지원과 업데이트된 동작
      • DOM 코어(L2, L3) 및 보기(L2)
      • DOM 요소 통과
      • DOM 이벤트(L2, L3)
      • DOM L2 HTML
      • DOM L2 스타일
      • DOM L2 Traversal 및 Range
    • 새로운 공백 처리 동작
  • ECMAScript 기능 향상
  • HTML5 지원 추가
    • 지리적 위치
    • videoaudio 요소
    • canvas 요소
    • Selection 인터페이스
    • HTML 요소의 향상된 구문 분석
    • 텍스트 선택 API
  • 이미지에 대한 ICC v2 및 v4 색 프로필 지원
  • msMatchesSelector 메서드에 대한 새로운 선택기 API 수준 2 지원
  • SVG 기능
    • 기본 모양: 사각형, 원, 타원, 선, 폴리라인 및 다각형
    • 자르기, 마스킹 및 작성
    • 좌표계, 변환 및 단위
    • 문서 구조, 메타데이터 및 확장성 기능
    • 그라데이션 및 패턴
    • 대화형 작업
    • 연결 및 보기
    • 그림 및 색
    • path 요소와 d 특성의 전체 기능을 포함하는 경로
    • 텍스트
  • 추가 플랫폼 버전 관리 기능
    • 고정된 사이트
    • 새 문서 모드
    • 새 UA(사용자 에이전트) 문자열
  • 개발자 도구 추가
    • 성능 향상
    • 콘솔
    • 네트워크
    • UA 전환기 도구
    • 실제 성능 측정

표준 지원을 통한 상호 운용성 향상

중요   Internet Explorer 9의 새로운 표준 지원을 사용하려면 브라우저가 Internet Explorer 9 표준 모드("IE9 모드")에 있어야 합니다. 이렇게 하는 가장 좋은 방법은 X-UA-Compatible 메타 태그나 HTTP 헤더 없이 표준 !DOCTYPE 지시어를 사용하는 것입니다. IE9 모드를 호출하는 !DOCTYPE은 다음과 같습니다.

<!DOCTYPE html>

물론 X-UA-Compatible 메타 태그나 HTTP 헤더와 함께 !DOCTYPE을 사용하여 기본값을 원하는 대로 변경할 수도 있습니다.

현재 문서 모드를 확인하려면 F12를 눌러 Internet Explorer 개발자 도구를 연 다음 메뉴 모음의 오른쪽을 살펴봅니다. 문서 모드를 재정의하려면 문서 모드 메뉴에서 Internet Explorer 9 표준을 클릭합니다.

Internet Explorer 9의 문서 모드 동작에 대한 업데이트는 이 가이드의 플랫폼 버전 관리 섹션을 참조하십시오.

CSS3(CSS 스타일시트, 수준 3)

Internet Explorer 9에서는 CSS(CSS 스타일시트) 지원이 이전 Microsoft 브라우저보다 강화되었습니다. Internet Explorer 8에서는 CSS2.1 사양을 완전히 준수하게 되었는데, 이를 계승하는 Internet Explorer 9에서는 CSS3의 여러 구성 요소에 대한 지원이 추가되었습니다.

참고  많은 CSS3 모듈은 여전히 규격 초안(Working Draft) 또는 최종 검토(Last Call) 단계에 있으며, 권장 기술 후보(Candidate Recommendation) 단계에 도달할 때까지 대폭 변경될 수 있습니다. 자세한 내용은 최신 CSS3 초안 모듈(영문)을 참조하십시오.

CSS3 2D 변환

Internet Explorer 9에서는 CSS3 2D 변환에 대한 지원이 추가되었습니다. CSS 2D 변환을 사용하면 CSS에 의해 렌더링된 요소가 2차원 공간에서 변환될 수 있습니다.

Internet Explorer 9은 다음 2D 변환 속성을 지원합니다.

  • -ms-transform 속성은 하나 이상의 2차원 변환 함수를 요소에 적용합니다.
  • -ms-transform-origin 속성은 요소에 대한 변환 원점을 설정합니다. 이 속성은 기본 원점(가운데)을 변경하려는 경우 유용합니다.

참고   CSS 2D 변환 모듈이 W3C에서 권장 기술 후보(Candidate Recommendation)를 아직 받지 못했으므로 Internet Explorer 9에서 인식할 수 있도록 transformtransform-origin 속성 모두 -ms- 접두사와 함께 사용해야 합니다. 공급업체별 접두사에 대한 자세한 내용은 IE 팀 블로그의“ IE9, 공급업체 접두사 및 개발자”(영문)를 참조하십시오.

Internet Explorer 9은 -ms-transform 속성과 함께 사용할 수 있도록 다음 변환 함수를 지원합니다.

  • matrix(a,b,c,d,e,f) 함수는 6개 값(a ~ f)의 변환 행렬 형태로 2D 변환을 지정합니다. 
  • translate(tx,[ty]) 함수는 벡터 [tx,ty]로 2D 변환을 지정합니다. 여기서 tx는 첫 번째 변환-값 매개 변수이며 ty는 선택적인 두 번째 변환-값 매개 변수입니다. ty가 지정되지 않은 경우 이 값은 0입니다. (변환-값 매개 변수는 백분율 또는 길이일 수 있습니다.)
  • translateX(tx) 함수는 x 방향의 지정된 양으로 변환을 지정합니다.
  • translateY(ty) 함수는 y 방향의 지정된 양으로 변환을 지정합니다.
  • scale(sx,[sy]) 함수는 두 매개 변수에 의해 지정된 [sx,sy] 배율 벡터로 2D 배율 연산을 지정합니다. 두 번째 매개 변수가 제공되지 않은 경우 첫 번째 매개 변수와 같은 값을 사용합니다.
  • scaleX(sx) 함수는 [sx,1] 배율 벡터를 사용하여 배율 연산을 지정합니다. 여기서 sx는 매개 변수로 지정됩니다.
  • scaleY(sy) 함수는 [1,sy] 배율 벡터를 사용하여 배율 연산을 지정합니다. 여기서 sy는 매개 변수로 지정됩니다.
  • rotate(angle) 함수는 transform-origin 속성에서 정의된 대로 요소의 원점에 대한 매개 변수에 지정된 각도로 2D 회전을 지정합니다.
  • skewX(ax) 함수는 지정된 각도로 x 축을 따라 기울이기 변환을 지정합니다.
  • skewY(ay) 함수는 지정된 각도로 y 축을 따라 기울이기 변환을 지정합니다.
  • skew(ax,[ay]) 함수는 xy 축을 따라 기울이기 변환을 지정합니다. 첫 번째 각도 매개 변수는 x 축에서 기울이기를 지정합니다. 두 번째 각도 매개 변수는 y 축에서 기울이기를 지정합니다. 두 번째 매개 변수가 지정되지 않은 경우 0 값이 y 각도에 사용됩니다(즉 y 축에서 기울이기 없음).

-ms-transform-origin 속성은 한 개 또는 두 개의 값을 허용합니다. 각 값은 키워드, 길이 또는 백분율일 수 있습니다. -ms-transform-origin 속성이 설정되지 않은 경우 변환은 가운데(-ms-transform-origin 값의 50% 50%와 같음)에서 시작됩니다.

  • 첫 번째 값은 가로 위치(x 축에 있는 위치)를 나타내며 음수일 수 있습니다. 이 값은 길이 값( 지원되는 길이 단위 중 하나), 백분율(총 상자 길이의 백분율) 또는 다음 세 가지 키워드 중 하나일 수 있습니다: 왼쪽(0%와 같음 또는 0 길이), 가운데(50%와 같음 또는 상자 길이의 반) 또는 오른쪽(100%와 같음 또는 전체 상자 길이)
  • 두 번째 값은 세로 위치(y 축에 있는 위치)를 나타내며 음수일 수 있습니다. 이 값은 길이 값( 지원되는 길이 단위 중 하나), 백분율(총 상자 높이의 백분율) 또는 다음 세 가지 키워드 중 하나일 수 있습니다. 위(0%와 같음 또는 0 높이), 가운데(50%와 같음 또는 상자 높이의 반) 또는 아래(100%와 같음 또는 전체 상자 높이).

하나의 값만 지정되는 경우 두 번째 값은 가운데로 가정합니다.

다음 표시를 고려하십시오.

div {
-ms-transform: translate(200px, 100px) scale(.75, .75) rotate(40deg);
-ms-transform-origin: 60% 100%;
}

Internet Explorer 9에서 -ms-transform-origin 속성을 60% 100%로 설정하면 변환의 원점이 변환될 요소를 기준으로 길이의 60% 및 높이의 100%로 설정됩니다. -ms-transform 속성은 먼저 x 방향으로 200픽셀 그리고 y 방향으로 100픽셀 요소를 이동합니다. 그런 다음 75%로 요소를 조정합니다. 마지막으로 -ms-transform-origin 속성에서 설정된 원점 주위에서 시계 방향으로 40도 요소를 회전합니다.

CSS3 2D 변환에 대한 자세한 내용은 MSDN을 참조하십시오.

CSS3 배경 및 테두리 모듈

Internet Explorer 9에서는 CSS3 배경 및 테두리 모듈의 여러 기능에 대한 지원이 추가되었습니다. 가장 주목할 만한 새로운 기능은 border-radius 속성으로, 가장 많이 요청된 CSS 테두리 기능이기도 합니다. Internet Explorer 9은 다음과 같은 새로운 CSS3 속성도 지원합니다.

또한 Internet Explorer 9은 다음과 같은 기존의 CSS 배경 및 테두리 속성에 기능을 추가합니다.

border-radius 속성

border-radius 속성을 사용하면 각진 모서리를 quarter-ellipse로 "대체"하고 각 타원의 반지름을 지정하여 테두리 모서리를 둥글게 만들 수 있습니다. 속성은 다음 항목으로 구성되어 있습니다.

예를 들어 다음 태그를 살펴보십시오.

border-radius: 100px 66.66px 200px 50px;
border:
10px blue double;
padding: 24px;
width: 400px;height: 125px;

이 태그를 텍스트 블록에 적용하면 다음 결과가 생성됩니다.

CSS3 색 모듈

Internet Explorer 9에서는 CSS3 색 모듈에 대한 지원이 추가되었습니다. 이 모듈에는 RGBA, HSL 및 HSLA 색 모델, opacity 속성 및 currentColor 키워드에 대한 지원이 확장되었습니다. 또한 Internet Explorer 9에서는 transparent 키워드에 대한 지원이 확장되었습니다.

RGBA 색 모델

RGB 색 모델이 알파 채널 또는 투명도를 포함하도록 확장되었습니다. RGBA 값의 형식은 rgba(red,green,blue,alpha)입니다. red, greenblue 구성 요소는 RGB 색 모델의 구성 요소와 동일하며, 정수 또는 백분율로 표현됩니다. alpha 구성 요소는 0.0(완전 투명)과 1.0(완전 불투명) 사이의 값으로 표현됩니다.

예를 들어 배경색을 투명도가 50%인 빨강으로 설정하려면 다음 두 개의 CSS 선언 중 하나를 스타일시트에 포함할 수 있습니다.

background-color: rgba(255,0,0,0.5);
background-color: rgba(100%,0%,0%,0.5);

RGB 값은 16진수 표기법을 지원하지만 RGBA 값은 지원하지 않습니다.

HSL 색 모델

Internet Explorer 9은 CSS3 색 모듈의 HSL(색상-채도-명도) 색 값을 지원합니다. HSL 색 모델에서 "색상"은 색상표에 표시된 색의 각도로 정의됩니다(예: 빨강은 0 또는 360, 녹색은 120, 파랑은 240). "채도""명도"는 백분율로 표현됩니다. 예를 들어 다음 CSS 선언은 빨강 배경을 정의합니다.

background-color: hsl(0,100%,50%);
HSLA 색 모델

또한 Internet Explorer 9은 알파 채널을 사용하여 HSL 색 모델을 확장합니다. RGBA 모델과 마찬가지로, 알파 채널은 0.0과 1.0 사이의 값으로 표현됩니다. 예를 들어 다음 CSS 선언은 투명도가 50%인 빨강 배경을 정의합니다.

background-color: hsla(0,100%,50%,0.5);
opacity 속성

Internet Explorer 9에서는 CSS3 색 모듈의 opacity 속성이 추가되었습니다. 이 속성을 사용하여 요소 수준에서 투명도를 제어할 수 있습니다. RGBA 값의 alpha 구성 요소와 마찬가지로 opacity 값은 0.0(완전 투명)과 1.0(완전 불투명) 사이의 숫자입니다. opacity 속성은 모든 요소에서 사용할 수 있습니다.

다음 예제는 불투명도 값이 0에서 1까지 0.2 증분으로 표현되는 짙은 파란색의 opacity 속성을 보여 줍니다.

<div class="opacity_sample">
    <div style="background: navy; opacity: 0;"></div>
    <div style="background: navy; opacity: 0.2;"></div>
    <div style="background: navy; opacity: 0.4;"></div>
    <div style="background: navy; opacity: 0.6;"></div>
    <div style="background: navy; opacity: 0.8;"></div>
    <div style="background: navy; opacity: 1;"></div>
</div>

이 예제는 25×125픽셀 div에 대해 다음 출력을 생성합니다.

색 키워드

CSS3 색 모듈은 CSS의 색 키워드 목록을 SVG 1.0과 동일하게 설정합니다. SVG 지원은 Internet Explorer 9에서 새로 추가되었지만 이 변경 사항은 Internet Explorer 8에서 구현되었습니다.

Internet Explorer 9에서는 CSS3 색 모듈의 currentColor 키워드가 추가되었습니다. 이 키워드는 color를 허용하는 임의 속성에 대한 color 속성(영문)의 현재 값을 나타냅니다. color 속성 자체에 설정된 경우 currentColor 는 다음과 같습니다. color:inherit.

또한 Internet Explorer 9에서는 transparent 키워드 사용이 border-color background-color 속성 이외의 범위까지 확장되었습니다. 이제 color 속성을 허용하는 모든 속성에 이 키워드를 사용할 수 있습니다.

CSS3 글꼴 모듈

인쇄 제어 향상은 새 버전의 CSS가 출시될 때마다 일관성 있게 유지된 기능이었습니다. 상호 운용성 있는 웹 글꼴 형식이 없을 경우 문제가 발생할 수 있습니다. Internet Explorer 9에서는 CSS 글꼴에 대한 기존 지원이 향상되어 CSS3 글꼴 모듈을 준수합니다. 또한 WOFF(Web Open Font Format) 및 원시 TrueType 글꼴에 대한 지원이 추가되었습니다.

글꼴 속성

Internet Explorer 9에서 CSS3 글꼴 모듈에 지정된 대로 글꼴 두께를 계산하도록 font-weight 속성이 업데이트되었습니다.

또한 각 키워드의 배율 인수가 CSS3 글꼴 모듈에 정의된 대로 지정되도록 font-size 속성이 업데이트되었습니다. 이제 키워드 및 HTML 제목 크기가 CSS3 글꼴 모듈에 지정된 대로 매핑됩니다.

font-stretch 속성은 Internet Explorer 9의 새로운 기능이며 글꼴 패밀리에서 보통 글꼴, 좁은 글꼴 또는 확장 글꼴을 선택합니다. 이 속성은 @font-face 규칙 설명자로도 사용할 수 있습니다.

@font-face 규칙

@font-face 규칙은 글꼴 연결을 사용하도록 설정합니다. 즉, 스타일시트는 브라우저가 다운로드 및 사용하도록 특정 글꼴 파일을 참조할 수 있습니다. 예를 들어 다음 태그를 살펴보십시오.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf)
      format("embedded-opentype");
}
p {font-family: MyFont, serif;
}

이 예제에서 @font-face 규칙은 브라우저가 src 설명자에 지정된 URL로 이동하여 특정 글꼴이 포함된 글꼴 파일을 다운로드하도록 지정합니다. Internet Explorer 8 이전 버전에서는 앞의 예제와 같이 선택적 format 문자열을 포함하는 src 설명자가 무시되었는데, 이것은 잘못된 동작입니다. Internet Explorer 9에서는 src 설명자가 예상대로 구문 분석됩니다.

또한 Internet Explorer 9에서는 unicode-range 설명자에 대한 지원도 추가되었습니다. 이 설명자를 사용하면 특정 글꼴이 지원하는 유니코드 문자 범위를 지정할 수 있습니다. 예를 들어 다음 코드 예제는 기본 ASCII 문자의 범위를 지정합니다.

@font-face {
   font-family: MyFont;
   src: url(http://mysite/fonts/MyFont.ttf);
   unicode-range: U+0-7F;
}
웹 글꼴 형식

Microsoft는 웹 글꼴 선택을 최대화할 수 있도록 Internet Explorer 9을 만들었습니다. 이러한 목적을 위해 다음과 같은 기능이 구현되었습니다.

  • EOT(Embedded OpenType)를 계속 지원하는 동시에 이전 버전과의 호환성 보장
  • WOFF(Web Open Font Format)에 대한 지원 추가. WOFF는 각 테이블을 ZIP 압축 형식으로 압축하여 sfnt 기반 글꼴 파일(TrueType, OpenType 및 Open Font Format 글꼴)을 다시 패키징합니다.
  • 설치 가능한(포함 사용 권한 비트가 설정되어 있지 않음) 원시 TrueType 글꼴에 대한 지원 추가

Internet Explorer 9의 웹 글꼴 예를 보려면 Internet Explorer Test Drive(영문)의 " 웹 글꼴"(영문) 또는 " 추가 웹 글꼴"(영문) 데모를 참조하십시오.

Internet Explorer 9의 CSS3 글꼴에 대한 자세한 내용은 MSDN을 참조하십시오.

CSS3 미디어 쿼리 모듈

CSS3 미디어 쿼리 모듈(영문)은 웹 개발자가 스타일시트 범위를 특정 장치 기능 집합으로 지정할 수 있는 방법을 지정합니다. 예를 들어 모바일 장치(작은 화면, 제한된 색상표, 낮은 해상도 등), 노트북(작은 화면, 전체 색상표, 높은 해상도 등), 표준 컴퓨터(큰 화면, 전체 색상표, 높은 해상도 등)에서 탐색하는 사용자용 페이지를 각각 다르게 디자인할 수 있습니다. CSS3 미디어 쿼리에서 지원하는 전체 미디어 속성 목록에는 width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome 및 resolution이 포함됩니다.

다음 선언은 @media 규칙을 사용하는 일반적인 미디어 쿼리입니다.

@media screen and (max-width:400px) {div {border:none;}}

이 경우 screen 은 대상 미디어 유형을 나타내고, max-width 는 대상 미디어 속성입니다. 이 선언에서는 지정된 규칙( div 요소에 테두리 없음)이 너비가 400픽셀 이하의 화면에서 페이지가 표시되는 경우에만 적용되도록 지정합니다. 미디어 속성을 함께 사용하여 다음과 같은 보다 구체적인 쿼리를 만들 수 있습니다.

@media screen and (max-width:400px) and (max-height:600px) {…}

이 선언은 너비가 400픽셀 이하이고 높이가 600픽셀 이하인 화면이 미디어인 경우 지정된 규칙을 적용합니다.

Internet Explorer Test Drive(영문) 사이트에서 미디어 쿼리가 어떻게 작동하는지 확인합니다.

Internet Explorer 9은 CSS, HTML, XML 및 XHTML 형식의 미디어 쿼리를 지원합니다. Internet Explorer 9의 미디어 쿼리에 대한 자세한 내용은 MSDN을 참조하십시오.

CSS3 네임스페이스 모듈

Internet Explorer 9은 CSS3 네임스페이스 모듈을 대부분 지원합니다. 개발자는 CSS 네임스페이스를 통해 CSS 파일의 기본 네임스페이스를 선언할 수 있습니다. 즉, 요소 또는 특성 선택기도 기본적으로 해당 네임스페이스를 사용합니다.

또한 개발자는 CSS 네임스페이스를 통해 나중에 CSS 파일 내에서 사용할 수 있는 네임스페이스 접두사를 만들 수 있습니다. Internet Explorer 9을 사용하여 SVG 요소를 대상으로 하는 네임스페이스를 선언할 수도 있습니다.

@namespace at-rule

@namespace at-rule은 XML 네임스페이스(및 선택적으로 해당 접두사)를 선언하고 네임스페이스 이름을 나타내는 문자열과 연결합니다. 예를 들어 다음 규칙은 기본 네임스페이스를 선언합니다.

@namespace "http://www.w3.org/1999/xhtml";

기본 네임스페이스는 명시적 네임스페이스 구성 요소가 없는 이름에 적용됩니다.

접두사를 사용하여 @namespace 규칙이 선언된 경우 네임스페이스로 한정된 이름에 접두사를 사용할 수 있습니다. 예를 들어 prfx 네임스페이스에 대해 다음 네임스페이스 선언이 지정된 경우...

@namespace prfx "http://prfx.contoso.com";

…다음 선택기는 prfx 접두사가 참조하는 네임스페이스의 E 요소를 일치시킵니다.

prfx|E

다음 예제는 조금 더 복잡합니다.

@namespace prfx "http://prfx.contoso.com";
@namespace msft "http://msft.example.com";

p {background-color:red;}
prfx|p {background-color:blue;}
msft|p {background-color:green;}

이 예제에서는 두 개의 네임스페이스 접두사가 만들어집니다. 먼저 모든 네임스페이스의 p 요소에 빨간색이 지정됩니다. 그런 다음 p 요소가 prfx 네임스페이스에 있는 경우 파랑으로 색이 변경되고 p 요소가 msft 네임스페이스에 있는 경우 녹색으로 색이 변경됩니다.

다음 예제는 SVG 요소의 스타일을 지정합니다.

@namespace svg "http://www.w3.org/2000/svg";
svg|circle {fill:red;}

이 예제의 네임스페이스와 선언을 사용하면 SVG로 만든 모든 원에 빨강 채우기가 지정됩니다.

자세한 내용은 MSDN의 @namespace 규칙 참조 페이지를 참조하십시오.

CSS3 값 및 단위 모듈

Internet Explorer 9에서는 CSS3 값 및 단위 모듈(영문)에 설명된 많은 새 값과 단위에 대한 지원이 추가되었습니다. 이러한 새 값과 단위는 대부분 이 문서에 설명된 다른 CSS3 기능을 지원하는 데 필요합니다.

Internet Explorer 9에서는 다음과 같은 새 값과 단위에 대한 지원이 추가되었습니다.

  • deg: Degrees(각도 단위)
  • grad: Grads(각도 단위)
  • rad: Radians(각도 단위)
  • turn: Turns(각도 단위)
  • ms: 밀리초(시간 단위)
  • s: 초(시간 단위)
  • rem: 루트 요소의 글꼴 크기(상대 길이 단위)
  • vw: 뷰포트 너비(상대 길이 단위)
  • vh: 뷰포트 높이(상대 길이 단위)
  • vm: 뷰포트 너비 또는 높이의 더 적은 값(상대 길이 단위)
  • ch: 0 너비(렌더링 글꼴에서 너비가 0인 문자 모양, 상대 길이 단위)

또한 Internet Explorer 9에서는 생성된 콘텐츠에 사용되는 attr() 함수가 업데이트되었습니다. 이제 이 함수는 모든 속성에 적용될 수 있으며 여러 개의 인수를 허용할 수 있습니다.

다음과 같은 CSS3 함수는 Internet Explorer 9의 새로운 기능입니다.

  • calc(): 산술 연산자를 사용하여 값을 계산하며 길이 값이 허용되는 경우 항상 사용될 수 있습니다.

CSS 함수에 대한 자세한 내용은 MSDN의 CSS 값 및 단위 참조(영문)를 참조하십시오.

CSS3 선택기

Internet Explorer 9은 CSS3 선택기 제안 권장 사항(영문)에 지정된 CSS 선택기 구문에 대한 추가를 지원합니다. 여기에는 Internet Explorer 9에 새로 추가된 선택기가 나열되어 있습니다. Internet Explorer의 선택기 지원에 대한 자세한 내용은 MSDN의 CSS 호환성 및 Internet Explorer(영문)를 참조하십시오.

자세한 내용은 MSDN의 CSS 선택기(영문) 참조 섹션을 참조하십시오.

CSS3 선택기가 어떻게 작동하는지 확인하려면 Internet Explorer Test Drive(영문) 사이트를 참조하십시오.

구조 의사 클래스

구조 의사 클래스를 사용하면 단순 선택기나 조합기를 사용하여 선택할 수 없는 항목을 문서 트리의 추가 정보를 기준으로 선택할 수 있습니다.

다음 구문은 문서의 루트인 E 요소를 선택합니다.

E:root 

다음 구문은 부모의 n번째 자식인 E 요소를 선택합니다.

E:nth-child(n)

다음 구문은 마지막 자식부터 계산하여 부모의 n번째 자식인 E 요소를 선택합니다.

E:nth-last-child(n) 

다음 구문은 해당 유형의 n번째 형제인 E 요소를 선택합니다.

E:nth-of-type(n) 

다음 구문은 마지막 형제부터 계산하여 해당 유형의 n번째 형제인 E 요소를 선택합니다.

E:nth-last-of-type(n)

다음 구문은 부모의 마지막 자식인 E 요소를 선택합니다.

E:last-child 

다음 구문은 해당 유형의 첫 번째 형제인 E 요소를 선택합니다.

E:first-of-type 

다음 구문은 해당 유형의 마지막 형제인 E 요소를 선택합니다.

E:last-of-type 

다음 구문은 부모의 유일한 자식인 E 요소를 선택합니다.

E:only-child

다음 구문은 해당 유형의 유일한 형제인 E 요소를 선택합니다.

E:only-of-type

다음 구문은 텍스트 노드를 포함하여 자식이 없는 E 요소를 선택합니다.

E:empty
target 의사 클래스

target 의사 클래스는 참조하는 URI의 대상 요소를 선택합니다. 조각 식별자는 페이지 내의 위치를 식별하는 데 사용되며 숫자 기호 뒤에 앵커 식별자를 사용하여 구성됩니다(예: http://www.example.com/mypage.html#section_3).

다음 구문은 참조하는 URI의 대상 요소인 important 클래스의 div 요소를 선택합니다. 문서의 URI에 조각 식별자가 없는 경우 대상 요소가 없습니다.

div.important:target
UI 요소 상태 의사 클래스

UI 요소 상태 의사 클래스는 특정 상태(사용, 사용 안 함 또는 선택됨)에 있는 UI 요소(라디오 단추, 확인란 등의 양식 컨트롤)를 선택하는 데 사용됩니다.

다음 구문은 사용하도록 설정된 E 양식 컨트롤 요소를 선택합니다.

E:enabled

다음 구문은 사용하지 않도록 설정된 E 양식 컨트롤 요소를 선택합니다.

E:disabled 

다음 구문은 선택된 E 양식 컨트롤 요소를 선택합니다.

E:checked 

: indeterminate 의사 클래스는 토글 상태를 확인할 수 없는 라디오 단추 및 확인란을 선택합니다. 선택된 상태도 아니고 선택 취소된 상태도 아닙니다. 다음 구문은 상태를 확인할 수 없는 E 양식 컨트롤 요소를 선택합니다.

E:indeterminate

참고   :indeterminate 의사 클래스는 현재 CSS3 사양에 더 이상 정의되어 있지 않지만 많이 사용되는 여러 브라우저에서 지원됩니다.

negation 의사 클래스

negation 의사 클래스는 단순 선택기를 인수로 사용하여 해당 인수에서 선택되지 않은 요소를 선택합니다. 다음 구문은 단순 선택기 s와 일치하지 않는 E 요소를 선택합니다.

E:not(s)
UI 요소 조각 의사 요소

UI 요소 조각 의사 요소인 ::selection은 편집 가능한 텍스트 필드 내의 텍스트를 포함하여 사용자가 강조 표시한 페이지 부분을 선택하는 데 사용됩니다. 이 의사 요소는 color background-color 속성에 적용할 수 있습니다. 다음 구문은 E 요소 내의 사용자 선택 텍스트를 선택합니다.

E::selection 

참고   ::selection 의사 요소는 현재 CSS3 사양에 더 이상 정의되어 있지 않지만 많이 사용되는 여러 브라우저에서 지원됩니다.

추가 CSS 기능

Internet Explorer 9에서는 CSS OM(개체 모델) 보기 모듈 규격 초안(Working Draft)에 대한 일부 지원이 구현되었습니다.

CSSOM 보기 모듈

CSSOM 보기 모듈(영문)은 웹 개발자가 레이아웃 상자 위치 지정, 뷰포트 너비, 요소 스크롤 등 문서의 시각적 속성과 해당 콘텐츠를 검사하고 프로그래밍 방식으로 변경할 수 있도록 하는 API를 정의합니다. Internet Explorer 8에서 이 모듈에 대한 일부 지원이 추가되었습니다. Internet Explorer 9에서는 CSSOM 보기 API에 대한 지원이 확장되었습니다.

데이터 URI

데이터 URI를 사용하면 웹 페이지의 컨텍스트에 직접 데이터를 포함할 수 있습니다. 가장 일반적인 예는 웹 페이지에 포함된 다음과 같은 작은 이미지입니다.

data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP

img 요소의 src 특성에 이 텍스트를 넣으면 실제로 이미지가 페이지의 태그에 포함됩니다. Internet Explorer 8에서 데이터 URI가 Internet Explorer에 추가되었습니다.

Internet Explorer 9에서는 개발자가 script 요소의 src 특성에 데이터 URI를 사용할 수 있습니다. 또한 데이터 URI의 크기 제한이 Internet Explorer 8에서는 32KB였는데 Internet Explorer 9에서 4GB로 증가되었습니다.

DOM(문서 개체 모델) 향상

Internet Explorer 9은 훨씬 향상된 DOM(문서 개체 모델)을 제공합니다. W3C(World Wide Web Consortium) DOM L2(수준 2) 및 L3에 대한 추가 지원 외에도 Internet Explorer 9은 고급 DOM과 향상된 공백 처리 기능을 제공합니다.

고급 DOM 소개

Internet Explorer 9의 고급 DOM은 새 JavaScript 엔진인 "Chakra"와 Trident 레이아웃 엔진 사이에 있는 스크립트 엔진 계층의 속도를 높이고 DOM의 진입점을 Chakra 엔진으로 이동하여 Internet Explorer 9 표준 모드(IE9 모드)의 전체 성능을 향상시킵니다. IE9 모드에 대한 자세한 내용은 이 문서의 표준 지원을 통한 상호 운용성 향상을 참조하십시오. 또한 고급 DOM은 W3C DOM L2 및 L3 사양에 지정된 대로 올바른 DOM 상속 개체 계층을 동시에 제공합니다.

Internet Explorer 9 표준 모드로 페이지를 실행하는 경우 이제 고급 DOM 개체 유형이 F12 개발자 도구에 반영됩니다. Internet Explorer 9의 새 F12 개발자 도구에 대한 자세한 내용은 이 문서의 F12 개발자 도구를 참조하십시오. IE9 모드 페이지는 Interface 및 Disp-object 모음으로 구성된 레거시 COM 기반 유형을 표시하는 대신 W3C DOM L2 및 L3 표준을 준수하는 Chakra 엔진에서 사용 중인 실제 고급 DOM 개체 유형 이름을 보고합니다(예: NodeList, DocumentType, HTMLBodyElement 등).

Internet Explorer 9의 고급 DOM을 사용하면 Internet Explorer 9과 다른 브라우저 간의 상호 운용성 상태가 훨씬 개선됩니다. 이와 동시에 네이티브 JavaScript 개체로 표현되는 DOM 개체로 인해 여러 시나리오에서 성능도 향상됩니다.

고급 DOM은 다음을 포함하여 새 JavaScript 엔진인 "Chakra"가 제공하는 여러 가지 새로운 기능을 DOM이 제공하는 개체 및 API에까지 확장합니다.

  • 선택적 DOM 개체 확장성(Object.preventExtensions 사용)
  • DOM API 가변성(DOM API의 속성 설명자 변경 또는 전체 속성 삭제)
  • DOM 개체의 JSON 지원
  • 상속을 통한 네이티브 JavaScript 개체 기능(hasOwnProperty, toString 등)
  • 상속을 통한 네이티브 JavaScript 함수 기능(call, apply, bind)

이러한 기능은 JavaScript 엔진의 네이티브 개체와 DOM 간의 프로그래밍 환경을 통합합니다. 또한 다음과 같은 새로운 DOM 기능이 추가되었습니다.

  • W3C DOM 예외: DOM 예외는 DOM API 오류 결과로 발생하는 새로운 유형의 오류 개체입니다. 이러한 예외의 오류 코드는 예외 자체에서 정의된 상수에 매핑됩니다.
  • W3C DOM "const" 속성(예: Node.ELEMENT_NODE): const 속성은 다른 DOM API에서 반환되는 많은 일반적인 숫자 값에 대해 이름을 제공하는 단순 필드입니다. 예를 들어 nodeType DOM API에서 반환된 숫자를 상수와 비교하여 보다 읽기 쉬운 코드를 만들 수 있습니다. if (myElement.nodeType == Node.ELEMENT_NODE)

XML과 DOM 간의 구문 분석 및 직렬화

Internet Explorer는 XML과 네이티브 DOM 간의 구문 분석 및 직렬화를 이미 지원하지만 스크립트가 HTML 문서 내에서 이 기능에 쉽게 액세스할 수 없었습니다. 이런 이유로 Internet Explorer 9에서는 DOMParser XMLSerializer 인터페이스에 대한 지원이 추가되었습니다. 두 인터페이스는 많이 사용되는 다른 브라우저에서 널리 지원됩니다.

다음 스크립트 예제는 DOMParser 인터페이스를 사용하여 문자열을 XML 문서로 구문 분석하는 방법을 보여 줍니다.

var parser = new DOMParser();
var doc = parser.parseFromString("<test>Some XML</test>", "text/xml");

다음 스크립트 예제는 XMLSerializer 인터페이스를 사용하여 DOM 노드(HTML 문서의 노드 포함)를 XML 문자열로 직렬화하는 방법을 보여 줍니다.

var serializer = new XMLSerializer();
var xmlString = serializer.serializeToString(doc);

DOM(문서 개체 모델) 수준 2 및 3

Internet Explorer 9에서는 DOM L2(문서 개체 모델 수준 2) 및 DOM L3(수준 3)에 대한 추가 지원이 제공되며 Internet Explorer의 기존 구현에 비해 DOM L2 지원이 향상되었습니다. 또한 WebIDL 규격 초안(Working Draft) 사양(영문)에 대한 지원이 추가되었습니다.

Internet Explorer 9은 다음과 같은 DOM 기능을 지원합니다.

DOM 코어(L2, L3) 및 보기(L2)

Internet Explorer 9에서는 다음을 포함하여 많은 새로운 DOM L2 코어(영문)에 대한 지원이 추가되었습니다.

또한 *NS 메서드 및 네임스페이스 관련 속성(createElementNS, namespaceURI, localName, prefix 등) 지원 등 DOM 네임스페이스에 대한 상호 운용성 있는 지원이 추가되었습니다. Internet Explorer 9은 가장 많이 사용하는 DOM L3 코어(영문) 메서드 및 속성도 대부분 지원합니다. 예를 들면 다음과 같습니다.

  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

Internet Explorer 9은 DOM L2 보기(영문) 속성을 완전히 지원합니다.

자세한 내용은 MSDN의 DOM 코어 및 보기(영문) 참조 섹션을 참조하십시오.

DOM 요소 통과

요소 통과(영문) 사양은 ElementTraversal 인터페이스를 정의합니다. 이 인터페이스를 사용하면 HTML, XML 또는 SVG 문서의 요소 노드와 같은 DOM 트리의 요소 스크립트를 통해 탐색할 수 있습니다. Internet Explorer 9은 ElementTraversal 인터페이스 및 5개의 해당 속성을 지원합니다.

DOM L2 및 L3 이벤트

DOM 이벤트 사양은 DOM 이벤트 시스템에 대해 설명합니다. 이 시스템은 이벤트 처리기 등록을 가능하게 하고, 문서 트리를 통한 이벤트 흐름을 설명하며, 이벤트에 대한 컨텍스트 정보를 정의합니다. 이벤트 모델에 대한 자세한 내용은 MSDN의 이벤트 모델 이해(영문)를 참조하십시오.

Internet Explorer 9의 이벤트 시스템은 W3C에서 지정된 상호 운용성 있는 시스템을 준수하는 것을 목적으로 합니다. 이렇게 하면 Internet Explorer의 소유에 속하는 attachEvent 모델에서 벗어날 수 있으므로 다른 브라우저에 맞게 코드를 분기할 필요가 없습니다.

참고   DOM 변이 이벤트는 완성을 위해 포함되지만 W3C 표준에서 사용되지 않습니다.

DOM L2 HTML

Internet Explorer 9에서는 getElementsByClassName, characterSet 등의 HTML5 API를 포함하여 이전 버전의 Internet Explorer에서 사용할 수 없었던 DOM L2 HTML API에 대한 지원이 추가되었습니다. Internet Explorer 9에서는 특히 요소 추가 또는 제거에 대한 DOM 작업과 관련하여 테이블의 개체 모델이 향상되었습니다.

getElementsByClassName

getElementsByClassName 메서드는 클래스 특성이 입력 문자열과 일치하는 모든 요소 노드를 반환합니다. 이 메서드의 기능은 getElementsByTagName 메서드와 유사합니다.

characterSet

characterSet 특성은 현재 문서의 문자 인코딩에 대한 기본 설정 MIME 이름을 반환합니다.

DOM L2 스타일

DOM L2 스타일(영문) 사양은 규칙을 제거하거나 수정하여 프로그래밍 방식으로 개별 요소 및 전체 스타일시트의 스타일을 모두 액세스 및 변경하는 API를 정의합니다. 이전 버전의 Internet Explorer에서는 소유에 속하는 메서드를 사용하여 이러한 작업을 수행할 수 있었지만 Internet Explorer 9에서는 DOM L2 스타일 사양에 정의된 표준화된 API에 대한 지원이 추가되었습니다. 뿐만 아니라 getComputedStyle 메서드와 같이 Internet Explorer에 해당하는 기능이 없는 표준화된 API에 대한 지원도 추가되었습니다. getComputedStyle 메서드가 어떻게 작동하는지 확인하려면 Internet Explorer Test Drive(영문) 사이트를 참조하십시오.

자세한 내용은 MSDN의 DOM 스타일(영문)을 참조하십시오.

DOM L2 Traversal 및 Range

DOM L2 Traversal 및 Range(영문) 사양의 DOM Range(영문) 부분에서는 한 쌍의 경계 지점 사이에 있는 문서 콘텐츠를 선택하는 일반적인 방법을 정의합니다. 경계 지점은 컨테이너(지점이 포함된 부모 요소) 및 오프셋(지점이 있는 컨테이너 내 위치)으로 지정됩니다. HTML5 Selection 인터페이스와 함께 DOM Range 기능을 사용하면 프로그래밍 방식의 범위 검색, 자식 선택 및 선택 항목 삭제 등의 기능을 수행할 수 있습니다.

Internet Explorer 9은 모든 DOM L2 Range API와 이미 널리 사용되고 있는 setSelectionRange 메서드 같은 모든 HTML5 선택 API를 지원합니다.

자세한 내용은 MSDN의 DOM Range(영문)를 참조하십시오.

DOM L2 Traversal 및 Range(영문) 사양의 DOM Traversal(영문) 부분에서는 문서 내에서 이동하고 필요에 따라 노드를 필터링하는 방법을 정의합니다. Internet Explorer 9은 W3C 사양에 정의된 대로 DOM을 통과하는 두 가지 방법(NodeIteratorTreeWalker)과 노드를 필터링하는 두 가지 방법(whatToShowNodeFilter)을 모두 지원합니다.

자세한 내용은 MSDN의 DOM Traversal(영문)을 참조하십시오.

DOM 공백 처리

Internet Explorer에서는 DOM의 공백 노출이 다른 브라우저와는 다르게 처리되었으며, 이 영역의 상호 운용성 부족은 웹 개발자에게 문제가 되었습니다. 이전 버전의 Internet Explorer에서는 발견한 공백이 축소되고 DOM의 텍스트 노드에 삽입되지 않았습니다. Internet Explorer 9에서는 공백이 유지되고 예상대로 DOM 내의 텍스트 노드에 삽입됩니다. 이 동작은 다른 주요 브라우저와 일치합니다.

ECMAScript 5

Internet Explorer 9에서는 JavaScript 성능이 향상되었을 뿐 아니라 JavaScript 언어 기능도 향상되었습니다. 2009년 12월에 ECMA는 Fifth Edition of ECMA-262를 Third Edition의 후속판으로 승인했으며(Fourth Edition은 게시되지 않음), Microsoft는 2009년 Internet Explorer 8에 JavaScript 개체에 대한 네이티브 JSON 지원을 추가하고 Internet Explorer 8에 DOM 개체에 대한 접근자 지원을 추가함으로써 ES5(ECMAScript 5) 요소 지원을 처음 선보였습니다. 그러나 ES5는 JSON 및 DOM 접근자 지원 외에도 JavaScript 언어에 대한 많은 향상된 기능을 표준화합니다.

Internet Explorer 9에는 다음을 포함하여 많은 중요한 ECMAScript 5 기능이 구현되어 있습니다.

또한 Internet Explorer 9에서는 Internet Explorer의 이전 JavaScript 구현에 있었던 여러 가지 문제가 수정되었습니다. 자세한 내용은 Internet Explorer 팀 블로그(영문)를 참조하십시오. ECMAScript 5 지원이 어떻게 작동하는지 확인하려면 Internet Explorer Test Drive(영문) 사이트를 참조하십시오.

HTML5

Internet Explorer 8에서는 다음을 포함하여 HTML5 규격 초안(Working Draft) 사양(영문)의 일부 기능에 대한 지원이 추가되었습니다.

Internet Explorer 9은 Internet Explorer 8의 HTML5 준수를 계승하며 다음과 같은 새로운 기능을 구현합니다.

참고  이 문서가 작성될 당시 HTML5 사양은 여전히 규격 초안(Working Draft) 단계에 있으며, 권장 기술 후보(Candidate Recommendation) 단계에 도달할 때까지 대폭 변경될 수 있습니다. 자세한 내용은 최신 HTML5 규격 초안(Working Draft)(영문)을 참조하십시오.

HTML5 지리적 위치

Internet Explorer 9에서는 지리적 위치에 대한 지원이 추가되었습니다. 지리적 위치 API를 사용하면 웹 응용 프로그램에서 Internet Explorer를 실행하는 PC의 현재 지리적 위치에 액세스할 수 있습니다. 그러면 웹 페이지의 사용자 환경이 이 위치에 따라 구성됩니다. 예를 들어 지도에 위치를 표시하거나 날씨나 뉴스 같은 최신 지역 정보를 표시할 수 있습니다. 위치 데이터는 위도 및 경도 좌표를 사용하여 반환됩니다. Internet Explorer 9의 지리적 위치 API는 지리적 위치 API 사양(영문)에 설정된 표준을 준수합니다.

지리적 위치가 어떻게 작동하는지 확인하려면 Internet Explorer 9 Test Drive(영문) 사이트를 참조하십시오.

지리적 위치에 대한 자세한 내용은 MSDN(영문)을 참조하십시오.

HTML5 video 및 audio 요소

현재 Internet Explorer 9에서 지원되는 가장 중요한 두 가지 HTML5 기능은 새로운 video audio 요소입니다. videoaudio 요소는 모두 HTML5 사양의 포함된 콘텐츠 섹션에서 정의됩니다.

기본적으로 videoaudio 요소는 비디오 및 오디오 콘텐츠를 HTML 페이지에 포함할 수 있도록 합니다. 웹 개발자는 두 요소에 대한 여러 특성을 지정할 수도 있습니다. 예를 들어 다음 태그를 살펴보십시오.

<video width="400"
    height="300"
    src="video.mp4"
    poster="frame.png"
    autoplay
    controls
    loop>
    This content appears if the video tag or the codec is not supported.
</video>

Internet Explorer 9에서 이 태그는 비디오 콘텐츠가 로드되는 동안 400×300 공간(widthheight 특성)에 "frame.png" 이미지 파일을 표시합니다(poster 특성). 비디오 파일 "video.mp4" (src 특성)는 페이지 로드 시 자동으로 재생을 시작하며(autoplay 특성), 비디오 제어 컨트롤이 표시됩니다(controls 특성). 완료되면 비디오가 반복됩니다(loop 특성). 비디오 형식이 지원되지 않는 경우 video 요소 내의 텍스트("This content appears…")가 대신 표시됩니다. video 요소는 최상의 사용자 환경에 대한 웹 개발자의 의도를 브라우저에 알리는 preload 요소도 지원합니다.

video 요소가 어떻게 작동하는지 확인하려면 Internet Explorer Test Drive(영문) 사이트의 " 비디오 파노라마"(영문) 데모를 참조하십시오.

Internet Explorer 9은 각각 자식 요소 source로 지정된 여러 원본을 포함하는 video 요소도 지원합니다. 예를 들어 다음 태그를 살펴보십시오.

<video width="400" height="300" poster="frame.png" autoplay controls loop>
    <source src="video.ogv" type='video/ogg; codecs="theora,
     vorbis"'>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
     mp4a.40.2"'>
</video>

여기서 Internet Explorer 9은 처음에 나열된 지원되는 형식(이 경우 두 번째 source 요소)을 선택하고 연결된 원본 파일을 재생합니다.

audio 요소는 video 요소와 비슷하게 정의되지만 width, heightposter 특성이 없습니다. audio 요소가 어떻게 작동하는지 확인하려면 Internet Explorer Test Drive(영문) 사이트를 참조하십시오.

Internet Explorer 9은 다음과 같은 콘텐츠 형식을 지원합니다.

요소 이름지원되는 형식
비디오

MP4 컨테이너, H.264 비디오, 모든 프로필—AAC 또는 MP3 오디오

WebM 비디오(VP8 코덱을 설치한 경우)

audioAAC 또는 MP3

자세한 내용은 MSDN의 HTML5 video 및 audio(영문)를 참조하십시오.

HTML5 canvas 요소

Internet Explorer 9에 새로 추가된 또 다른 중요한 HTML5 기능은 canvas 요소로, Canvas 2D API와 함께 사용됩니다. HTML5 사양(영문)에 정의된 canvas 요소를 사용하면 해상도에 종속된 비트맵 캔버스에 그래픽을 렌더링할 수 있습니다. 캔버스에 그리기 위해 W3C Canvas 2D API 사양(영문)에 지정된 Canvas 2D 컨텍스트와 같은 "컨텍스트"가 사용됩니다. Internet Explorer 9은 2D Canvas 그리기 API를 컨텍스트로 사용하여 canvas 요소를 지원합니다. Internet Explorer 9에서 Canvas 2D 컨텍스트는 CanvasRenderingContext2D 개체 또는 ICanvasRenderingContext2D 인터페이스로 표시됩니다. Internet Explorer 9의 모든 그래픽과 마찬가지로, canvas는 Windows 및 GPU를 사용하여 하드웨어로 가속화됩니다.

Canvas는 사각형, 경로, 선, 채우기, 호, 베지어 및 이차 곡선을 포함하는 그리기 시나리오를 지원합니다. 또한 Internet Explorer 9의 canvas 요소는 width height 특성을 지원합니다. width 및 height의 기본값은 각각 300픽셀과 150픽셀이고 기본 색은 투명 검정입니다.

Canvas를 통해 웹에 그래픽을 프로그래밍할 수 있습니다. canvas 태그는 "즉시 모드"(그리기 명령이 그래픽 하드웨어에 직접 전송됨) 2D 그리기 화면으로, 별도의 플러그 인을 다운로드하지 않고도 실시간 그래프, 애니메이션 또는 대화형 게임을 제공하는 데 사용할 수 있습니다. CanvasRenderingContext2D 개체에 정의된 API를 통해 canvas는 다음을 포함하는 그리기 시나리오를 지원합니다.

JavaScript를 사용하여 캔버스 그리기를 애니메이션하거나 키보드 입력, 마우스 클릭 또는 브라우저 이벤트에 반응하는 대화형 환경을 만들 수 있습니다. 예를 들어 Internet Explorer Test Drive 사이트의 이 예제(영문)는 몇 줄의 JavaScript만 사용하여 임의로 배치되고 색이 지정된 빛나는 선을 생성합니다.

Internet Explorer 9의 canvas 요소는 width 및 height 특성을 지원합니다. width 및 height의 기본값은 각각 300픽셀과 150픽셀이고 기본 색은 투명 검정입니다.

Internet Explorer 9은 다음의 Canvas 2D 컨텍스트 API( CanvasRenderingContext2D 개체로 노출되는 구성원)를 지원합니다.

Internet Explorer 9의 HTML5 Canvas에 대한 자세한 내용은 MSDN(영문)을 참조하십시오. canvas 요소의 추가 데모를 보려면 Internet Explorer Test Drive(영문) 사이트를 참조하십시오. Internet Explorer 9의 canvas 요소에 대한 기술 정보는 MSDN의 canvas(영문) 요소 참조 페이지를 참조하십시오.

HTML 구문 분석 향상

Internet Explorer 9의 HTML 구문 분석은 HTML5 초안 사양에 설명된 동작과 더욱 일치하도록 향상되었습니다.

HTML의 SVG 구문 분석

Internet Explorer 9은 HTML에 직접 포함된 SVG를 지원합니다. SVG에 대한 자세한 내용은 이 가이드의 SVG(Scalable Vector Graphics)를 참조하십시오.

XHTML 구문 분석

Internet Explorer 9은 mime-type이 application/xhtml+xml인 문서를 XHTML로 구문 분석합니다.

일반 요소

이전에는 Internet Explorer에서 인식할 수 없는 요소를 "알 수 없는" 요소로 구문 분석했습니다. 이러한 요소는 정상적인 CSS 스타일 지정 규칙이 적용되지 않도록 평면화되고 HTML5 초안 사양을 준수하지 않았습니다. Internet Explorer 9에서는 이 동작이 변경되었으며, 이제 인식할 수 없는 요소를 "일반" 요소로 구문 분석하여 정상적인 요소처럼 동작할 수 있도록 합니다. 이렇게 하면 document.createElement를 호출하여 Internet Explorer가 요소를 인식하도록 강제하는 등의 개발자 해결 방법이 필요 없게 됩니다.

다음은 일반 요소의 간단한 예입니다. 이 경우 mydiv라는 정의되지 않은 요소가 사용됩니다.

<style type="text/css">
mydiv {
     color: blue;
     font-weight: bold;
}
</style>

...

<p>I am using a <mydiv>generic element</mydiv> in this sentence.</p>

Internet Explorer 8에서는 mydiv 태그 및 연결된 CSS 규칙이 무시되므로 이 문장이 다음과 같이 렌더링됩니다.

Internet Explorer 9은 mydiv 태그를 예상대로 구문 분석하고 다음과 같이 렌더링합니다.

겹치는 태그

HTML에 겹치는 태그가 포함되어 있는 경우 Internet Explorer 8 이전 버전에서는 구문 분석 시 해당 태그를 해결하지 않습니다. 이 동작은 HTML5 초안 사양에 지정된 동작과 일치하지 않습니다. 여기에 설명된 요소와 같이 일부 요소를 스크립팅 용도로 겹친 경우 불확실한 스크립팅 오류가 발생할 수 있습니다. Internet Explorer 9은 HTML5 초안 사양에 따라 구문 분석 시 겹치는 태그를 해결합니다.

다음은 겹치는 ib 태그 사이의 텍스트를 빨강으로 바꾸는 스크립트의 간단한 예입니다.

<script type="text/javascript">
function load()
{
     var elms = document.getElementsByTagName("i");
     for(var i = 0; i < elms.length; i++)
     {
          var elm = elms[i];
           if(elm.parentNode.tagName.toLowerCase() == "b")
                elm.style.color = "red";
     }
}
  </script>

...

<body onload="load();">
You should be aware of how <b>this <i>affects</b> script</i>.
</body>

Internet Explorer 8 이전 버전에서 이 태그를 사용하면 의도하지 않은 방식으로 렌더링됩니다.

Internet Explorer 9에서는 태그가 예상대로 렌더링됩니다.

script 및 style 블록에 대한 변경 내용 구문 분석

Internet Explorer 8 이전 버전에서는 script(영문) 또는 style(영문) 블록의 텍스트가 DOM의 텍스트 노드로 지속되지 않습니다. Internet Explorer 9은 script 또는 style 블록의 텍스트를 예상대로 DOM에 텍스트 노드로 지속시킵니다. 이렇게 하면 DOM에서 소스 코드를 텍스트 노드로 사용할 수 있으므로 스크립트를 사용하여 소스 코드를 조작할 수 있습니다.

HTML5 선택 API

Internet Explorer 9에서는 HTML5 텍스트 선택 API에 대한 지원이 추가되었습니다. Selection(영문) 개체는 Internet Explorer 9에서 DOM L2 Range(영문) 지원이 새로 추가되면서 사용할 수 있게 된 Range 개체 목록을 나타냅니다. 자세한 내용은 이 문서의 앞부분에 있는 DOM(문서 개체 모델) 향상을 참조하십시오.

getSelection 메서드

getSelection 메서드는 현재 선택한 텍스트를 나타내는 창의 Selection 개체를 반환합니다.

selectionStart 속성

selectionStart 속성은 현재 선택한 텍스트의 시작 부분에 대한 오프셋을 가져오며 선택 영역의 시작 부분도 설정할 수 있습니다.

selectionEnd 속성

selectionEnd 속성은 현재 선택한 텍스트의 끝 부분에 대한 오프셋을 가져오며 선택 영역의 끝 부분도 설정할 수 있습니다.

HTML5 의미 체계 요소

Internet Explorer 9은 여러 가지 HTML5 의미 체계 요소를 지원하도록 향상되었습니다. 여기서 “의미 체계” 요소는 요소의 태그 이름이 해당 콘텐츠를 설명하는 것으로 정의되지만, 특별한 동작이 포함되지는 않습니다. 의미 체계 태그는 특히 접근성에 유용할 수 있습니다.

Internet Explorer 9에서는 의미 체계 요소 지원에 대한 다음 사항이 변경되었습니다.

  • HTML5 사양에 정의된 대로 이제 해당 요소는 HTMLUnknownElement 인터페이스가 아닌 HTMLElement 인터페이스에서 상속됩니다.
  • 기본적으로 이제 해당 요소는 HTML5 사양에 정의된 대로 스타일이 지정됩니다.

이제 다음 의미 체계 요소가 인식됩니다.

  • section
  • nav
  • article
  • aside
  • hgroup
  • header
  • footer
  • figure
  • figcaption
  • 기호

ICC 색 프로필

ICC(International Color Consortium)는 소프트웨어와 하드웨어의 색 특성을 모두 설명하는 색 프로필을 게시합니다.

Internet Explorer 9은 ICC 사양에 정의된 대로 이미지에 대한 ICC v2 및 v4 색 프로필을 지원합니다.

선택기 API 수준 2

선택기 API 수준 2 사양(영문)은 DOM(문서 개체 모델)의 선택기를 평가하는 데 사용할 수 있는 일련의 API(응용 프로그래밍 인터페이스)를 정의합니다.

Internet Explorer 8에는 querySelector querySelectorAll이라는 선택기 API가 구현되어 있습니다. Internet Explorer 9에서는 msMatchesSelector 메서드에 대한 지원이 추가되었습니다.

SVG(Scalable Vector Graphics)

SVG(Scalable Vector Graphics) 지원은 Internet Explorer에 구현되도록 가장 많이 요청된 기능 중 하나로, 이 지원을 사용하면 플러그 인이나 별도의 뷰어 없이도 작고 간단한 시각 요소에서 크고 복잡한 시각 요소에 이르기까지 쉽게 확장 가능한 고화질 시각 요소를 웹 사이트에 추가할 수 있습니다.

Internet Explorer 9은 기본 SVG 기능 집합을 지원합니다. Internet Explorer 9의 SVG 지원은 데스크톱 브라우저용 SVG 1.1(Second Edition) 사양 권장 사항(영문)을 기반으로 합니다. 다음과 같은 기능이 구현되었습니다.

  • 대부분의 SVG 문서 구조, 대화형 작업(스크립팅 이벤트) 및 스타일 지정(인라인 및 CSS 사용)
  • 다음을 포함하는 많은 프레젠테이션 요소 및 해당 특성과 DOM 인터페이스
    • 기본 모양
    • 채우기, 스트로크, 마커 및 색
    • 그라데이션 및 패턴
    • 경로
    • 텍스트

Internet Explorer 9은 다음과 같은 SVG 태그 표시 방법을 지원합니다.

  • 외부 개체를 사용하지 않고 HTML5 포함에 SVG 조각 표시(즉, HTML에 <svg> 태그 포함)
  • SVG를 전체 문서 유형(.svg 파일 확장명)으로 표시
  • XML 또는 XHTML에 SVG 표시(HTML5 방법과 유사하며 XML 또는 XHTML 파일에만 사용)
  • SVG를 CSS 이미지로 표시
  • 다음과 같이 object 요소를 사용하여 SVG 표시(type, heightwidth 특성 확인):
    <object data="rect2.svg" width="100%" height="400px"
        type="image/svg+xml"></object>

  • 다음과 같이 img, embed, iframe 또는 frame 요소를 사용하여 SVG 표시
    <embed id="Smiley" src="smiley.svg" type="image/svg+xml">

Internet Explorer 9의 SVG 지원에 대한 자세한 내용은 MSDN(영문)을 참조하십시오.

SVG에 대한 자세한 내용은 MSDN의 svg 요소 참조 페이지를 참조하십시오.

기본 모양

Internet Explorer 9은 SVG 1.1(Second Edition) 사양의 기본 모양 모듈(영문)에 지정된 대로 모든 기본 모양 요소, 해당 특성, 연결된 DOM 인터페이스의 구문 분석 및 렌더링을 지원합니다. Internet Explorer 9에서 지원하는 기본 모양 집합은 다음과 같은 모양 요소로 구성됩니다.

Internet Explorer 9은 이러한 요소의 연결된 DOM 인터페이스도 지원합니다.

다음은 앞에서 설명한 각 모양 요소의 예입니다. 태그 뒤에는 Internet Explorer 9에 표시되는 해당 결과의 스크린 샷이 있습니다.

사각형: rect 요소
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

<rect fill="orange"
    stroke="black"
    width="150"
    height="75"
    x="50"
    y="25" />


</svg>

<rect fill="orange"
    stroke="black"
    width="150"
    height="100"
    x="50"
    y="25"
    rx="10"
    ry="50"/>

자세한 내용은 MSDN의 rect(영문) 요소 참조 페이지를 참조하십시오.

원: circle 요소
<circle fill="orange"
    stroke="black"
    stroke-width="3"
    cx="40"
    cy="25"
    r="20"/>

자세한 내용은 MSDN의 circle(영문) 요소 참조 페이지를 참조하십시오.

타원: ellipse 요소
<ellipse stroke="orange"
    cx="100"
    cy="60"
    rx="75"
    ry="50"/>

자세한 내용은 MSDN의 ellipse(영문) 요소 참조 페이지를 참조하십시오.

선: line 요소
<!-- vertical -->
<line x1="0.7cm"
    y1="1cm"
    x2="0.7cm"
    y2="2.0cm"
    style="stroke:
    blue;"/>


<!-- diagonal -->
<line x1="30"
    y1="30"
    x2="150"
    y2="85"
    stroke="red"
    stroke-width="4"/>


<!-- horizontal -->
<line x1="50pt"
    y1="25pt"
    x2="150pt"
    y2="25pt"
    stroke="yellow"
    stroke-width="3"/>

자세한 내용은 MSDN의 line(영문) 요소 참조 페이지를 참조하십시오.

폴리라인: polyline 요소

"polyline"은 SVG에서 여러 개의 연결된 선으로 정의되며, "열린" 모양, 즉 하나 이상의 면이 누락된 다각형이나 볼록하지 않은 모양을 구성하는 경우가 많습니다.

<polyline points="15, 5, 100 8,3 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

자세한 내용은 MSDN의 polyline(영문) 요소 참조 페이지를 참조하십시오.

다각형: polygon 요소

다각형은 닫힌 모양입니다.

<polygon points="15, 5, 100 8,6 150"
    fill="orange"
    stroke="black"
    stroke-width="4"/>

자세한 내용은 MSDN의 polygon(영문) 요소 참조 페이지를 참조하십시오.

자르기, 마스킹 및 작성

Internet Explorer 9은 SVG 1.1(Second Edition) 사양의 자르기, 마스킹 및 작성 모듈(영문)에 지정된 대로 SVG 자르기, 자르기 경로, 마스킹 및 불투명도를 지원합니다. SVG 경로에 대해서는 이 문서의 경로 섹션에서 설명합니다.

자르기

자르기 경로는 색, 패턴 또는 이미지를 그릴 수 있는 영역을 잘라내거나 "자릅니다". 자르기 경로 외부에 있는 그래픽 요소의 모든 부분은 그려지지 않습니다. 자르기 경로는 완전 불투명이므로, 자르기 경로 외부에 있는 그래픽 요소 부분은 전혀 표시되지 않습니다.

SVG에서 overflowclip 속성은 콘텐츠가 표시될 초기 자르기 경로 또는 모양을 설정합니다. 기본적으로 초기 자르기 경로는 SVG 뷰포트 또는 SVG 콘텐츠가 표시되는 페이지의 사각형 영역으로 정의됩니다.

자르기 경로는 clipPath 요소로 정의됩니다. 그런 다음 clip-path 속성을 사용하여 자르기 경로를 참조합니다. clip-rule 속성은 clipPath 요소 내의 그래픽 요소에 적용되고, clipPathUnits 특성은 clipPath 콘텐츠의 좌표계를 정의합니다. 자르기 경로는 텍스트, 색, 패턴 및 이미지에 적용할 수 있습니다.

SVGClipPathElement DOM 인터페이스를 사용하여 프로그래밍 방식으로 자르기 기능에 액세스할 수 있습니다.

다음은 SVG 자르기 경로의 간단한 예입니다.

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="100">
<clipPath id="clip1">
    <circle id="clipShape" cx="60" cy="60" r="50" />
</clipPath>
<rect x="20" y="20" width="100" height="100" fill="blue"
    clip-path="url(#clip1)" />
</svg>

이 예제는 clipPath 요소를 사용하여 원 모양으로 자르기 경로를 정의합니다. 그런 다음 clip-path 속성을 사용하여 자르기 경로를 사각형에 적용합니다. Internet Explorer 9에서는 다음과 같은 결과가 생성됩니다.

마스킹

mask는 반투명이라는 점을 제외하고 자르기 경로와 비슷합니다. 마스크는 전경 개체를 현재 배경에 작성하는 데 주로 사용됩니다.

마스크는 mask 요소로 정의됩니다. 그런 다음 mask 속성을 사용하여 마스크를 참조합니다.

다음은 SVG 마스크의 간단한 예입니다.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 800 300" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example mask01 - three different colored circles used to mask the color of a rectangle
  </desc>
  <defs>
     <g id="circles">
            <g stroke="white" stroke-width="2" >
                <circle cx="100" cy="50" r="50" fill="rgb(255,0,0)" />
                <circle cx="50" cy="135" r="50" fill="rgb(0,255,0)" />
                <circle cx="150" cy="135" r="50" fill="rgb(0,0,255)" />
        </g>       
        </g>       
        <mask id="myMask" >
            <use xlink:href="#circles" />
        </mask>
  </defs>
     <rect x="0" y="0" width="100%" height="100%" fill="purple"
          mask="url(#myMask)" />
</svg>

이 예제는 mask 속성을 사용하여 각각 다른 색이 지정된 3개의 인접한 원 모양으로 마스크를 정의합니다. 그런 다음 mask 속성을 사용하여 마스크를 자주 사각형에 적용합니다. Internet Explorer 9에서는 다음과 같은 결과가 생성됩니다.

좌표계, 변환 및 단위

Internet Explorer 9은 SVG 1.1(Second Edition) 초안 사양의 좌표계, 변환 및 단위 모듈(영문)에 지정된 대로 SVG 좌표계, 변환 및 단위를 지원합니다. Internet Explorer 9에서 지원되는 기능은 다음과 같습니다.

  • 단위 및 백분율
  • 요소에 대한 임의 변환 및 transform 특성
  • viewBoxpreserveAspectRatio 속성(overflow 속성과의 상호 작용 포함)
  • 변환 및 변환 목록 유형 지원

Internet Explorer 9은 SVG 좌표계 및 변환과 연결된 DOM 인터페이스도 지원합니다.

문서 구조

Internet Explorer 9은 SVG 1.1(Second Edition) 사양의 문서 구조(영문), 메타데이터(영문) 및 확장성(영문) 모듈에 지정된 대로 SVG 문서 구조, 메타데이터 및 확장성 기능을 지원합니다. Internet Explorer 9에서 지원되는 요소는 다음과 같습니다.

Internet Explorer 9은 이러한 요소의 연결된 DOM 인터페이스도 지원합니다.

그라데이션 및 패턴

SVG는 색, 그라데이션 또는 패턴을 사용하여 모양과 텍스트를 그리거나 스트로크하는 기능을 제공합니다. Internet Explorer 9은 SVG 1.1(Second Edition) 사양의 그라데이션 및 패턴 모듈(영문)에 지정된 대로 SVG 그라데이션 및 패턴을 지원합니다.

그라데이션

그라데이션 지원은 그라데이션 요소( linearGradient radialGradient)와 특성( gradientUnits gradientTransform)을 통해 제공됩니다. 그라데이션 색은 stop 요소로 정의됩니다. 그라데이션 요소는 SVG 모양의 fill stroke 속성에 사용할 수 있습니다. 예를 들어 다음 태그를 살펴보십시오.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      <linearGradient id="MyGradient">
        <stop offset="10%" stop-color="yellow" />
        <stop offset="90%" stop-color="blue" />
      </linearGradient>
  </defs>

    <rect fill="url(#MyGradient)" stroke="black" stroke-width="5" 
          x="20" y="20" width="300" height="100"/>
</svg>

이 태그는 선형 그라데이션이 있는 사각형을 정의합니다. 두 개의 stop 요소는 색 전환을 위한 벡터와 함께 색 중지를 지정합니다. 10% 지점에서 노랑으로 전환되고 90% 지점에서 파랑으로 전환됩니다. Internet Explorer 9에서는 다음과 같이 표시됩니다.

패턴

패턴 지원은 pattern 요소와 해당 특성을 통해 제공됩니다. 그라데이션과 마찬가지로, 패턴 요소는 SVG 모양의 fill stroke 속성에 사용할 수 있습니다. 예를 들어 다음 태그를 살펴보십시오.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="mycircleandsquare" patternUnits="userSpaceOnUse"
        x="0" y="0" width="150" height="100">
      <circle cx="50" cy="50" r="10" fill="yellow" stroke="blue"
        />
      <rect x="100" y="0" width="50" height="50" fill="blue"   
        stroke="yellow" />
    </pattern>
  </defs>
  <ellipse fill="url(#mycircleandsquare)" stroke="black"
     stroke-width="5" cx="400" cy="200" rx="350" ry="150" />
</svg>

이 예제에서 pattern 요소는 교대로 작은 파랑 사각형과 작은 노랑 원으로 구성된 패턴을 정의합니다. 지정한 타원에 패턴 채우기가 적용됩니다. 다음 이미지는 Internet Explorer 9에서 어떻게 표시되는지를 보여 줍니다.

대화형 작업

SVG 콘텐츠는 대화형, 즉 사용자 입력에 응답하여 변경될 수 있습니다. Internet Explorer 9은 다음을 포함하여 SVG 1.1(Second Edition) 사양의 대화형 작업 모듈(영문)에 지정된 대로 SVG 대화형 작업 기능을 지원합니다.

Internet Explorer 9은 대화형 작업 모듈의 SVGCursorElement DOM 인터페이스도 지원합니다.

또한 Internet Explorer 9은 SVG Tiny 1.2 사양(영문)의 대화형 작업 모듈에 지정된 focusable 특성을 지원합니다.

다음 태그는 SVG 대화형 작업이 어떻게 작동하는지를 보여 주는 간단한 예입니다.

<svg xmlns=http://www.w3.org/2000/svg
    xmlns:xlink="http://www.w3.org/1999/xlink" width="600"
    height="600">
  <script type="text/ecmascript">
    <![CDATA[

           // object representing circle
           var redcircle;

           // variable representing circle's radius
           var r;
    
           window.onload = function() {
                redcircle = document.getElementById('redcircle');
            r = parseInt(redcircle.getAttribute("r"));
           }
    
           var grow = function() {
            r = 2*r;
                redcircle.setAttribute("r",r);
           }

           var shrink = function() {
            r = r/2;
                redcircle.setAttribute("r",r);
           }
     
    ]]>
  </script>
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
        onmousedown="grow()" onmouseup="shrink()"/>
</svg>

이 코드 조각을 로드하면 작은 빨강 원이 표시됩니다.

원을 클릭하면 두 배 크기로 확장됩니다.

mouseovermouseout 이벤트를 사용하여 동일한 효과를 얻을 수 있습니다. 커서를 개체 위에 두거나 개체 외부에 두면 원이 확장되거나 축소됩니다.

...
  <circle id="redcircle" cx="100" cy="100" r="50" fill="red"
    onmouseover="grow()" onmouseout="shrink()"/>
...

연결 및 보기

SVG는 SVG 콘텐츠에서 다른 페이지로의 연결과 미리 정의된 SVG 문서 보기를 지원합니다. 보기는 다이어그램의 확대 보기 등에 직접 연결하려는 경우에 유용합니다.

Internet Explorer 9은 SVG 1.1(Second Edition) 사양의 연결 모듈(영문)에 지정된 대로 SVG 연결 및 보기를 지원합니다. 여기에는 a view 요소 지원이 포함됩니다.

연결 모듈의 연결된 DOM 인터페이스인 SVGAElementSVGViewElement도 지원됩니다.

연결

HTML과 마찬가지로, a 요소는 SVG에서 하이퍼링크를 만드는 데 사용됩니다. 예를 들어 다음 태그는 사각형에 하이퍼링크를 제공합니다.

<svg width="100%" height="100%" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<a xlink:href="http://www.bing.com" target="_blank">
    <rect x="20" y="20" width="250" height="250"/>
</a>

</svg>
보기

보기를 사용하여 브라우저에서 SVG 이미지를 특정 방식으로 표시하도록 지정할 수 있습니다. 예를 들어 다음 태그는 보기에 대한 링크를 정의합니다.

...
<a xlink:href="#rect-view">
    <text x="320" y="70" style="fill:red">Go to Rectangle</text>
</a>
<view id="rect-view" viewBox="280 245 135 85" />
<rect id="rect-object" style="fill:red" x="280" y="245"
  width="135" height="85"/>
...

이 예제에서 rect-view 보기는 지정된 좌표를 가진 viewBox로 정의됩니다. 링크("Go to Rectangle" 텍스트)를 클릭하면 rect-view 보기가 나타나고 빨강 사각형이 표시됩니다.

다음 태그는 보기에 대한 다른 링크를 정의합니다.

...
<a xlink:href="#circle-view">
    <text x="250" y="70" style="fill:blue">Go to Circle</text>
</a>
<view id="circle-view" viewBox="5 36 128 115"
  preserveAspectRatio="none"/>
<circle id="circle-object" style="fill:blue" cx="70" cy="85"
  r="45"/>
...

이 예제에서 circle-view 보기의 preserveAspectRatio 특성은 다음 값으로 설정되어 있습니다. none. 즉, 모양이 원이라도 보기를 호출할 때 viewBox 사각형을 채우도록 균일하게 맞춰지지 않습니다. 대신, 경계 상자가 viewBox 사각형과 정확하게 일치하도록 원이 균일하지 않게 늘어납니다. 페이지를 처음 로드할 때 이 태그는 Internet Explorer 9에서 다음과 같이 표시됩니다.

"Go to Circle"을 클릭하면 circle-view 보기가 호출되고 원이 viewBox 사각형을 채우도록 늘어납니다. 이 때문에 원이 타원으로 표시됩니다.

그림 및 색

그림과 색은 SVG의 필수 구성 요소입니다. 그림의 개념에는 채우기(단색, 그라데이션, 패턴), 스트로크(경로를 따라 그려진 선) 및 마커 기호(선 세그먼트의 끝에 적용됨, 예: 화살촉)가 포함되며 불투명도가 통합될 수도 있습니다. 채우기 및 스트로크는 경로, 텍스트 및 모양에 적용될 수 있습니다.

Internet Explorer 9은 SVG 1.1(Second Edition) 사양의 그림: 채우기, 스트로크 및 마커 기호 모듈(영문) 및 색 모듈(영문)에 지정된 대로 SVG 그림과 색을 지원합니다. 여기에는 다음에 대한 지원이 포함됩니다.

그림 모듈의 연결된 DOM 인터페이스인 SVGPaintSVGMarkerElement도 지원됩니다.

이 문서의 경로 섹션에는 SVG 채우기 및 스트로크의 여러 예가 포함되어 있습니다.

경로

SVG 경로는 모양의 윤곽선으로, 채워지거나 스트로크(경로를 따라 선이 그려짐)되거나 자르기 경로(다른 모양의 오려내기)로 사용될 수 있습니다.

Internet Explorer 9은 SVG 1.1(Second Edition) 사양의 경로 모듈(영문)에 지정된 대로 SVG 경로를 지원합니다. 여기에는 경로 데이터를 구문 분석할 수 있도록 하는 d 속성과 path 요소에 대한 지원이 포함됩니다.

경로 모듈의 연결된 DOM 인터페이스도 지원됩니다.

path 요소는 여러 가지 개발자 시나리오를 지원합니다. 다음은 몇 개의 간단한 예일 뿐입니다. 태그 뒤에는 Internet Explorer 9에 표시되는 해당 결과의 스크린 샷이 있습니다.

직선과 채우기가 적용된 닫힌 모양
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

<path d="M 20 20 L 60 20 L 40 60 z"
    fill="green"
    fill-opacity="0.5"
    stroke="red"
    stroke-width="3" />

</svg>

베지어 곡선(이차 곡선)
<path d="M20,30 Q40,50 60,30 T100,30"
   fill="none"
    stroke="red"
    stroke-opacity="0.2"
    stroke-width="3" />

호가 있는 선
<path d="M30,60 l 50,0 a25,45 0 0,1 50,0 l 50,0"
    fill="green"
    stroke="blue"
    stroke-width="4" />

텍스트

SVG 문서는 텍스트를 포함할 수 있습니다. 텍스트는 SVG에서 다른 그래픽 요소와 동일한 방식으로 렌더링되므로 좌표계 변환, 그림, 자르기 및 마스킹을 텍스트에 모두 적용할 수 있습니다.

Internet Explorer 9은 SVG 1.1(Second Edition) 사양의 텍스트 모듈(영문)에 지정된 대로 텍스트 렌더링을 지원합니다.

text 요소는 그릴 문자를 지정합니다. SVG는 자동으로 줄 바꿈하거나 단어를 줄 바꿈하지 않으므로 미리 줄 바꿈을 결정해야 합니다. 한 줄의 텍스트 내에서 텍스트 속성(예: 글꼴, 두께, 색, 커닝 등)을 조정하기 위해 SVG는 tspan 요소를 제공합니다.

Internet Explorer 9은 텍스트 모듈의 연결된 DOM 인터페이스도 지원합니다.

웹 개발자용 새로운 도구

이 섹션에서는 먼저 웹 사이트와 사용자 간의 연결을 강화하는 새로운 방법인 고정된 사이트에 대해 설명합니다. 그런 다음 Internet Explorer 9에서 버전을 할당하는 새로운 방법에 대해 설명합니다. 이 방법을 사용하면 최신 버전의 Internet Explorer로 마이그레이션할 때 주소 호환성 문제를 해결할 수 있습니다. 마지막으로, Internet Explorer 8에서 처음으로 브라우저에 직접 통합된 Internet Explorer 개발자 도구의 향상된 기능을 확인하게 됩니다.

고정된 사이트

고정된 사이트를 사용하면 사용자가 웹 사이트에 훨씬 더 집중할 수 있습니다. 고정된 사이트는 확대된 즐겨찾기 아이콘, 뒤로/앞으로 단추, 그리고 사이트의 브랜드 및 전반적인 모양과 통합될 수 있는 기타 인터페이스 요소 등의 향상된 사이트 사용자 인터페이스를 제공하는 새로운 도구 집합입니다. Windows 7과 통합됨에 따라 최신 Windows API를 사용하여 개발자 웹 사이트에서 새로운 방식으로 웹 사이트 점프 목록, 미리 보기 도구 모음 알림을 만들 수 있게 되었습니다. 고정된 사이트는 Windows 7 도구 모음을 통해서만 지원됩니다.

작업 표시줄에 사이트 고정

다음 방법 중 하나를 사용하여 작업 표시줄에 사이트를 고정할 수 있습니다.

  • 탭을 클릭하고 작업 표시줄로 끌어 "분리"합니다.
  • 즐겨찾기 아이콘을 주소 표시줄에서 작업 표시줄로 끕니다.
  • “msPinSite” 클래스(“drag-to-pin” 이미지)와 함께 사용자 지정 이미지를 작업 표시줄로 끕니다.

사이트가 고정되면 향상된 사용자 지정 기능으로 사이트가 렌더링됩니다. 예를 들어 뒤로 및 앞으로 단추가 웹 사이트의 색 구성표와 일치합니다. 사이트를 시작 메뉴에 고정할 수도 있습니다.

점프 목록

점프 목록 작업은 고정된 웹 사이트에 맞게 구성된 응용 프로그램별 작업으로, Windows 7의 응용 프로그램에 대한 동일한 기능을 기반으로 합니다. 점프 목록 작업을 사용하면 사용자가 가장 자주 사용하는 명령을 웹 사이트에 표시할 수 있습니다. 웹 사이트의 기능과 사용자가 수행할 것으로 예상되는 주요 작업을 기반으로 점프 목록 작업을 정의할 수 있습니다. 점프 목록 작업은 Internet Explorer가 실행되고 있지 않은 경우를 비롯하여 사용자가 언제든지 액세스할 수 있는 일련의 정적 링크를 제공합니다. 점프 목록 작업에 대한 자세한 내용은 MSDN에서 역동적인 점프 목록 만드는 방법(영문)을 참조하십시오.

미리 보기 도구 모음

미리 보기 도구 모음은 기본적으로 웹 사이트에 대한 “원격 제어”입니다. 고정된 사이트의 작업 표시줄 단추를 가리키면 축소판 미리 보기 아래에 도구 모음이 표시됩니다. 이 기능은 특히 비디오 또는 오디오 재생을 구현하는 사이트에 유용하지만 미리 보기 도구 모음은 이외에도 다양한 용도로 사용될 수 있습니다. 미리 보기 도구 모음 단추에는 재생 제어, 즐겨찾기 추가 또는 공유, 검색, 온라인 상태 변경, 즉시 구매 또는 웹 페이지 평가에 대한 컨트롤이 포함될 수 있습니다. 미리 보기 도구 모음 만들기에 대한 자세한 내용은 MSDN에서 미리 보기 도구 모음 만드는 방법(영문)을 참조하십시오.

알림

Windows 7의 응용 프로그램과 마찬가지로 고정된 사이트는 고정된 사이트의 작업 표시줄 단추 위에 오버레이 아이콘을 표시하여 알림 및 상태를 사용자에게 제공할 수 있습니다. 오버레이 아이콘은 브라우저 창이 최소화되거나 다른 창에 가려진 경우처럼 고정된 사이트의 창을 볼 수 없을 때 웹 사이트에 주의를 기울이게 하는 데 도움이 됩니다. 오버레이 아이콘을 사용하면 네트워크 상태, 온라인 상태 또는 새 메일과 같은 중요한 상태 정보나 알림을 제공할 수 있습니다. 알림에 대한 자세한 내용은 MSDN에서 알림 제공 방법을 참조하십시오.

고정된 사이트 검색

Internet Explorer 9은 사이트 고정 가능 여부를 사용자에게 알리지 않습니다. 이 기능에 대한 알림 여부는 개발자에 의해 결정됩니다. 플라이인, 드롭다운, 배너, drag-to-pin 아이콘과 이미지와 같은 div 효과를 비롯하여 사용자가 처음으로 사이트를 고정한 후 고정된 사이트 기능을 알리는 첫 실행 경험을 제공하는 등 웹 사이트의 고정된 사이트 기능에 대해 사용자에게 알릴 수 있는 다양한 방법이 있습니다. 검색 기능에 대한 자세한 내용은 MSDN에서 검색 기능을 강화하는 방법(영문)을 참조하십시오.

고정된 사이트에 대한 사용 방법 정보 및 코드 샘플에 대한 자세한 내용은 고정된 사이트의 MSDN 개발자 센터(영문)를 참조하십시오.

고정된 사이트에 대한 데모를 보려면 Internet Explorer 9 Test Drive 사이트(영문)를 참조하십시오.

플랫폼 버전 관리

Internet Explorer 8에서는 Microsoft Internet Explorer 6에서 추가된 호환 모드의 확장인 문서 호환 모드가 추가되었습니다. 문서 모드를 통해 Internet Explorer에서 웹 페이지를 표시하는 데 사용하는 특정 렌더링 모드를 선택할 수 있습니다. 문서 모드에 대해서는 MSDN의 문서 호환성 정의(영문)에서 자세히 설명합니다.

새 문서 모드

Internet Explorer 9에서는 가장 빠른 성능을 제공하고, 최신 웹 응용 프로그램의 요구를 처리할 수 있도록 확장되며, 최신 표준 지원을 구현하는 새 문서 모드인 Internet Explorer 9 표준 모드가 추가되었습니다.

페이지나 웹 서버에서 달리 지정되지 않은 경우 Internet Explorer 9은 기본적으로 IE9 표준 모드로 실행됩니다.

Internet Explorer 9에서 페이지를 최신 문서 모드로 렌더링하는 가장 좋은 방법은 X-UA-Compatible 메타 태그나 HTTP 헤더 없이 !DOCTYPE 지시어를 사용하는 것입니다. IE9 표준 모드를 호출하는 !DOCTYPE은 다음과 같습니다.

<!DOCTYPE html>

물론 X-UA-Compatible 메타 태그나 HTTP 헤더와 함께 !DOCTYPE을 사용하여 기본값을 원하는 대로 변경할 수도 있습니다.

현재 문서 모드를 확인하려면 F12 키를 눌러 Internet Explorer F12 개발자 도구를 연 다음 메뉴 모음의 오른쪽을 살펴봅니다. 문서 모드를 재정의하려면 문서 모드 메뉴에서 Internet Explorer 9 표준을 클릭합니다.

UA(사용자 에이전트) 문자열

UA(사용자 에이전트) 문자열은 서버를 호스트할 브라우저를 식별하고 특정 시스템 세부 정보를 제공합니다. UA 문자열에 대한 자세한 내용은 MSDN의 사용자 에이전트 문자열 이해(영문)를 참조하십시오. Internet Explorer 9은 기본적으로 짧은 UA 문자열을 보낸다는 점에서 이전 버전의 Internet Explorer와 다릅니다. 이러한 변경을 통해 전체 성능, 상호 운용성 및 호환성이 향상되었습니다. Internet Explorer 9은 사용자 컴퓨터에 설치된 다른 소프트웨어(예: .NET 등)에 의한 UA 문자열 추가 정보를 보내지 않습니다.

Internet Explorer 9은 새로운 Internet Explorer 9 UA 문자열을 보냅니다. 개발자가 알고 있어야 하는 Internet Explorer 8의 네 가지 UA 문자열 변경 내용이 있습니다.

  1. 응용 프로그램 버전이 다른 브라우저와 일치하도록 "Mozilla/4.0"에서 "Mozilla/5.0"으로 증가했습니다. 이 변경 사항은 Internet Explorer 9이 상호 운용성 있는 브라우저임을 나타냅니다.
  2. 버전 토큰이 "MSIE 8.0"에서 "MSIE 9.0"으로 증가했습니다.
  3. Trident 토큰이 "Trident/4.0"에서 "Trident/5.0"으로 증가했습니다.
  4. Internet Explorer 9은 컴퓨터에 설치된 다른 소프트웨어에서 추가하는 내용 없이 다음과 같은 짧은 UA 문자열을 보냅니다.

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

Internet Explorer 9의 호환성 보기는 Internet Explorer 8과 마찬가지로 IE7 표준 모드에 매핑됩니다. 호환성 보기에 대한 자세한 내용은 MSDN의 호환성 보기 목록 이해(영문)를 참조하십시오. 호환성 보기에 있는 경우 Internet Explorer 9은 다음과 같은 UA 문자열을 보냅니다.

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/5.0)

Internet Explorer 9의 새 UA 문자열에 대한 자세한 내용은 Internet Explorer 팀 블로그 게시물 IE9의 사용자 에이전트 문자열 소개(영문)를 참조하십시오.

F12 개발자 도구

Internet Explorer 9에서 F12 개발자 도구에 액세스하려면 F12 키를 누르거나 도구 메뉴에서 F12 개발자 도구를 클릭합니다. Internet Explorer 8에서 개발자 도구를 사용한 적이 있는 경우 기능과 성능이 향상된 것을 바로 확인할 수 있습니다.

콘솔 탭

Internet Explorer 9의 F12 개발자 도구에는 스크립팅 이벤트를 노출하기 위한 콘솔 탭이 추가되었습니다. 스크립트를 검사할 때 오류, 경고, 메시지 등 여러 개의 토글 단추가 표시됩니다. 각 단추는 각 유형의 메시지 수를 표시합니다.

네트워크 탭

Internet Explorer 9의 개발자 도구에는 네트워크 검사 도구가 추가되었습니다. 이 도구는 네트워크 탭을 클릭하여 액세스합니다. 다음 작업을 수행할 수 있습니다.

  • HTTP 및 HTTPS 네트워크 트래픽을 캡처합니다.
  • 캡처된 요청 및 응답의 콘텐츠를 표시(및 저장)합니다.
  • 쿠키, 크기, 타이밍, 캐시 정보 등 캡처된 데이터에 대한 추가 세부 정보를 표시합니다.

사용자 에이전트 전환기 도구

새 UA(사용자 에이전트) 전환기 도구를 사용하면 브라우저 유형과 버전을 웹 서버에 식별하는 UA 문자열을 수정할 수 있습니다. Internet Explorer 9의 새 UA 문자열에 대한 자세한 내용은 이 문서의 UA(사용자 에이전트) 문자열을 참조하십시오. 선택한 UA 문자열은 모든 요청의 헤더로 네트워크를 통해 전송됩니다. 브라우저의 UA 문자열을 변경하려면 개발자 도구의 도구 메뉴에서 사용자 에이전트 문자열 변경을 가리킨 다음 UA 문자열을 보내려는 브라우저를 선택합니다.

실제 성능 측정

Internet Explorer 9의 F12 개발자 도구를 사용하면 이전 버전의 Internet Explorer에 비해 웹 사이트 성능의 보다 다양한 측면을 측정할 수 있습니다. 그러나 사용자 환경의 실제 성능은 측정할 수 없습니다. 이 문제를 해결하기 위해 일부 사이트는 웹 페이지의 실시간 성능을 측정하는 고유한 라이브러리를 개발하지만, 이 경우 오버헤드가 추가되어 사용자에게 표시되는 페이지 성능이 실제로 저하될 수 있습니다. 이 문서를 작성할 당시 "규격 초안(Working Draft)" 단계에 있었던 W3C WebTiming 사양은 이 문제의 해결을 위한 개념적 기반을 제공합니다. WebTiming 기능은 Internet Explorer 9에서 DOM의 window.msPerformance 인터페이스를 사용하여 액세스할 수 있습니다. 개발자는 F12 개발자 도구에서 스크립트 디버깅을 사용하도록 설정한 다음 window.msPerformance 개체에 액세스할 수도 있습니다.

window.msPerformance 요소가 어떻게 작동하는지 확인하려면 Internet Explorer Test Drive(영문) 사이트를 참조하십시오.

개정 기록

2010년 3월 16일: Internet Explorer 플랫폼 미리 보기에 대해 만들어졌습니다.

2010년 4월 15일: 다음에 대한 정보를 사용하여 업데이트되었습니다.

  • CSS3 네임스페이스 모듈 지원
  • 추가 CSS3 선택기 지원
  • DOM 지원 세부 정보
  • 포함 제한을 비롯한 SVG 지원 세부 정보
  • ICC 색 프로필 지원

2010년 5월 5일: 다음에 대한 정보를 사용하여 Internet Explorer 플랫폼 미리 보기 빌드 2에 대해 업데이트되었습니다.

  • DOM 지원 세부 정보
  • 새 DOM 기능:
    • 새 DOM 코어 API
    • DOM HTML
    • DOM Traversal
    • 새 DOM L3 이벤트:
      • DOMAttrModified 이벤트
      • DOMContentLoaded 이벤트
      • 컴퍼지션 이벤트
  • 새 UA(사용자 에이전트) 문자열
  • 데이터 URI 변경 내용
  • 개발자 도구 추가 정보: 콘솔 탭 및 UA 전환기 도구

2010년 6월 23일: 다음에 대한 정보를 사용하여 Internet Explorer 플랫폼 미리 보기 빌드 3에 대해 업데이트되었습니다.

  • 새 CSS3 기능:
    • 새 배경 및 테두리 기능
    • HSL 및 HSLA 색 모델
    • CSS3 글꼴 지원
    • CSS3 값 및 단위 지원
    • display 속성 값
  • 새 DOM 요소 통과 지원
  • 새 HTML5 기능:
    • video, audiocanvas 요소
    • Selection 인터페이스
  • 새 선택기 API 수준 2 지원:
    • matchesSelector 메서드
  • 새 SVG 기능:
    • 자르기, 마스킹 및 작성
    • 그라데이션 및 패턴
    • 대화형 작업
    • 연결 및 보기
    • 그림 및 색
    • 텍스트

2010년 8월 4일: 다음에 대한 정보를 사용하여 Internet Explorer 플랫폼 미리 보기 빌드 4에 대해 업데이트되었습니다.

  • 새 JavaScript 엔진인 "Chakra"
  • 고급 DOM 기능
  • WebIDL 사양에 대한 새 지원
  • window.msPerformance 개체
  • 예제 링크가 있는 자세한 canvas 섹션

2010년 9월 15일: 다음에 대한 정보와 새 링크를 사용하여 Internet Explorer 9 베타에 대해 업데이트되었습니다.

  • DOMParser 및 XMLSerializer
  • 고정된 사이트

2010년 10월 28일: 다음에 대한 정보를 사용하여 Internet Explorer 플랫폼 미리 보기 빌드 6에 대해 업데이트되었습니다.

  • CSS 2D 변환
  • HTML5 의미 체계 요소
  • 수정된 지원 ICC 색 프로필 버전 번호

2011년 2월 10일: 다음에 대한 정보와 함께 Internet Explorer 9 릴리스 후보가 업데이트되었습니다.

  • HTML5 지리적 위치
  • 고정된 사이트(업데이트됨)
  • 호환성 모드(업데이트됨)
  • 기타 문서 수정 내용

2011년 2월 18일: 다음에 대한 추가 정보를 사용하여 업데이트되었습니다.

  • 고정된 사이트
  • HTML5 Canvas

2011년 3월 14일: Internet Explorer 9(RTW)이 업데이트되었습니다.

  • 업데이트된 버전 텍스트
  • ECMAScript 5(추가된 링크)
Microsoft는 웹 사이트에 대한 귀하의 의견을 이해하기 위해 온라인 설문 조사를 진행하고 있습니다. 참여하도록 선택하시면 웹 사이트에서 나가실 때 온라인 설문 조사가 표시됩니다.

참여하시겠습니까?