오늘 MIX10 에서 IE9 Preview를 공개했네요.
IE9의 성능이나 장단점에 대한 이야기들은 여러 웹 페이지를 통해 공개될 것이고, 알려질 것이라 생각되어 개발자 분들에게 필요한 개발자 가이드를 번역해서 올려 봅니다.
중간중간 오역이 있을 수 있기 때문에 그 점은 양해 부탁드리며, 최적의 번역이 생각나시면 댓글에 달아주세요.
그러면 수정하겠습니다.^^
번 역 자 : 박종현
최초작성일 : 2010-03-19
최종수정일 : 2010-03-21
원문 : http://msdn.microsoft.com/en-us/ie/ff468705.aspx#_HTML5_Selection_APIs
Internet Explorer Platform Preview Guide for Developers
개발자를 위한 인터넷 익스플로러 플랫폼 Preview가이드는 곧 출시될 인터넷 익스플로러의 특징과 개선점을 "살짝 엿보기"로 제공합니다. 이 가이드를 사용하여 웹 개발자들과 디자이너들은 향상된 이점을 알기위해 비교해 볼 수 있습니다. 개발자들은
인터넷 익스플로러 플랫폼 Preview를 내에서 다양한 액션을 또한 경험해 볼 수 있습니다.
목록
서론
- 모든 영역에서의 브라우저 성능
- 웹 표준은 거대한 보다 큰 상호운용성을 지원한다.
- 윈도우즈 PC의 파워를 동력으로 하는 새로운 그래픽 성능
새로운 특징 리스트
표준 지원을 통한 정보처리 상호운용성 개선
- 캐스케이팅 스타일 쉬트, 레벨3 (CSS3)
- CSS3 배경색과 보더 모듈
- CSS3 컬러 모듈
- CSS 셀렉터
- 도큐먼트 객체 모델(DOM) 레벨2 와 3
- HTML5
- HTML 파싱 개선
- HTML5 셀렉션 APIs
- 스케일러블 벡터 그래픽(SVG)
- 기본 모양
- 좌표 시스템들, 변형 그리고 단위들
- 문서구조
- 경로들
- 웹 개발자들을 위한 새로운 툴
- 리버전 히스토리
서론
윈도우즈 인터넷 익스플로러 플랫폼 Preview에 오신 것을 환영합니다. 당신은 개발자로서 당신의 고객이 사용할 브라우저에 무엇이 있는지 알기를 원하십니까? 인터넷 익스플로러 플랫폼 Preview는 인터넷 익스플로러 9이 가지는 특징과 개선점을 다른 것에 앞서서 보여줍니다. 이 문서는 웹 개발자인 당신에게 웹 사이트와 애플리케이션에서 새롭게 향상된 이점이 무엇인지 어떻게 비교를 해서 인터넷 익스플로러를 사용하고 있는 고객들에게 어떤 지침을 줄 것인지에 대해 알려줍니다. 반드시 Test Drive Site를 이용해서 액션내에서 이것들이 가지는 특징을 데모 해야 합니다. 그리고 인터넷 익스플로러에서 가장 최신의 개발 정보를 얻고 싶다면 MSDN의 인터넷 익스플로러 개발자 센터 를 방문하세요.
인터넷 익스플로러 플랫폼 Preview를 통해 플랫폼에서 중요하게 생각하는 다음의 것들을 기준으로 인터넷 익스플로러9 에 대한 프로세스를 개발자가 더 이해하기 좋게 제시하고자 합니다.
- 모든 영역에서의 브라우저 성능
- 더 큰 상호운용성을 위한 웹 표준 지원
- 윈도우즈 PC들의 파워를 동력으로 하는 새로운 그래픽 성능
모든 영역에서의 브라우저 성능
브라우저 성능은 브라우저 내 많은 다른 서브-시스템들과 관련이 있습니다. 다른 사이트들 및 -그리고 비슷한 사이트내의 다른 액티비티들- 브라우저 상에서 서로 다른 장소에 대한 부하나 요구들을 말합니다. 윈도우즈 라이브 메일이나 구글 독스와 같은 웹 애플리케이션은 빙 뉴스나 Digg와 같은 뉴스 집합체 보다 완전히 다른 방법으로 브라우저 서브시스템들에서 실행될 것 입니다.
스크립트 엔진 성능은 브라우저 성능 전체에 걸쳐 단지 하나의 영역 밖에 되지 않습니다. 인터넷 익스플로러 8내에서 스크립트 성능은 인터넷 익스플로러7에 비해 전체적으로 기하 급수적으로 개선되었으므로 인터넷 익스플로러 플랫폼 Preview에서는 그것을 다시 언급하지 않습니다.
물론 인터넷 익스플로러 팀은 실제적인 사이트들에서 그것을 사용함으로써 모든 브라우저의 서브시스템들의 성능 특성을 지켜보고 있습니다. 목표는 단지 벤치마크를 하는 것이 아닌 실세계 사이트들을 넘어 더 나은 성능을 제공하는 것입니다.
더 큰 상호운용성을 위한 웹 표준 지원
웹 개발자들을 위해 인터넷 익스플로러 팀은 더 풍부한 조건의 상호운용능력에 촛점을 맞추고 있습니다. 우리는 당신이 웹 사이트를 제작할 때 상호운영성을 위해 매번 다시 작성하고 테스트하는 것을 원치 않습니다. 결국 브라우저 벤더들이 표준을 채택하는 것이 가장 좋은 방법입니다.
인터넷 익스플로러 8 에 대해 인터넷 익스플로러 팀은 CSS 2.1의 높은 상호 구현성과 W3C와 함께 7200회 넘게 테스트를 했습니다. 이것이 중요한 이유는 벨리데이션 테스트가 없는 표준은 사이트 개발자가 그 표준을 신뢰하여 사이트를 개발한다는 것이 어렵기 때문이고 또 그것을 해결하기 위해 일관된 방법으로 문제 해결에 도전할 수 있어야 하기 때문입니다.
인터넷 익스플로러 플랫폼 Preview는 표준을 지원하고 상호운용성을 위해 의미있는 수단을 만들었습니다. 예를 들어서 CSS3 특징에 대한 몇 가지 지원이라던가 새로운 HTML5 지원, 그리고 -인터넷 익스플로러에선 처음- 몇몇의 SVG 모델을 위한 빌트인 지원은 인터넷 익스플로러 플랫폼 Preview의 일부 입니다. 그리고 거기에서 앞서 이야기한 모든 것들이 들어날 겁니다.
윈도우즈 PC들의 파워를 동력으로 하는 새로운 그래픽 성능
윈도우즈 에코시스템은 하드웨어 혁신에 놀라운 것들을 제공합니다. 인터넷 익스플로러 플랫폼 Preview를 통해 웹 개발자들은 그래픽과 텍스트의 하드웨어 구동 방식의 렌더링이 주는 혁신적인 이점을 알 수 있습니다.
인터넷 익스플로러 플랫폼 Preview는 웹 개발자들에게 몇 가지 진보를 위해 윈도우즈 애플리케이션 프로그래밍 인터페이스(APIs)를 다이렉트 X와 유사하게 사용할 수 있습니다. 시작 시점에 모든 그래픽과 텍스트 렌더링은 CPU에서 다이렉트2D와 다이렉트 라이트를 사용하는 그래픽 카드로 이동합니다. 그래픽 하드웨어 가속기를 사용하는 의미는 그래픽 집약적인 사이트에서 CPU보다 렌더를 더 빠르게 한다는 것입니다. 표준을 사용하는 다른 사이트로 이어질 때 자동적으로 변경하는 이점이 있습니다.
새로운 특징 리스트
인터넷 익스플로러 플랫폼 Preview 내에 새로운 개발자 특성을 포함하여 편의를 제공하는 리스트가 있습니다.
향상된 CSS3 지원
- 동그란 모서리를 위한 border-radius 속성
- RGBA 컬러 모델
- opacity 속성
- CSS 셀렉터들
새로운 DOM 레벨 2와 DOM 레벨3 지원 그리고 향상된 behaviors
HTML5 지원을 위해 추가된 것들
- 일반요소들에 대한 향상된 파싱
- 오버래핑된 태그들에 대한 향상된 파싱
- 스크립트와 스타일 블럭 파싱의 변화
- 텍스트 셀렉션 APIs
SVG 특징들
- 기본 형태 : 사각형, 원, 타원, 라인, 다중선과 다형
- 좌표 시스템과 변형 그리고 단위들
- 문서 구조, 메타데이터 그리고 기능의 향상
- path 엘리먼트를 완벽하게 포함하는 paths와 d 애트리뷰트
수정된 플랫폼에 부가적으로 추가된 능력
추가된 개발툴
표준 지원을 통한 향상된 상호운용성
중요 : 인터넷 익스플로러 플랫폼 Preview에서 새로운 표준의 대부분을 지원하는 것은 인터넷 익스플로러9 표준모드(IE9 도큐먼트 모드) 에서 지원합니다. 문서 적합성 모드는 MSDN의 "문서 적합성을 정의하는 것" 에 기술되어 있습니다. 인터넷 익스플로러 Preview의 기본 모드는 IE9 문서 모드 입니다. 웹 페이지가 처음 로드될 때 아래의 그림에서 보는 것 처럼 왼쪽 하단에 현재 문서 모드가 표시됩니다.
.png)
인터넷 익스플로러 플랫폼 Preview는 적합한 태그와 페이지의 !DOCTYPE 선언을 존중하는데 이걸 무시라면 Debug 메뉴에서 Force IE9 Document mode를 클릭하면 됩니다.
인터넷 익스플로러 플랫폼 Preview의 문서 모드에 대한 행위와 업데이트에 대한 자세한 가이드는 "Platform Versioning" 을 보세요.
캐스케이딩 스타일 쉬트, 레벨3 (CSS3)
인터넷 익스플로러 플랫폼 Preview는 이전 인터넷 익스플로러보다 더 나은 캐스캐이딩 스타일 쉬트(CSS)를 지원합니다. 인터넷 익스플로러 8(인터넷 익스플로러 8은 CSS2.1 명세를 완벽하게 따릅니다.) 보다 더 많은 추가적인 CSS3 컴포넌트를 지원하고, 계획되어 있습니다.
CSS3 백그라운드와 보더 모듈
인터넷 익스플로러 플랫폼 Preview에서 지원되는 border-radius 속성과 요구되는 css 보더 특징의 대부분이 추가되었습니다. 그것들은 반지름을 명세하거나 4개의 하드 코너를 커브로 바꾸어 놓을 수 있습니다.
그 속성들은 다음과 같습니다.
- border-radius(The value given will specify the radius for all four corners of a box.)
- border-bottom-left-radius
- border-bottom-right-radius
- border-top-left-radius
- border-top-right-radius
예를 다음의 마크업을 참고하면 됩니다.
border-bottom-left-radius : 50px;
border-bottom-right-radius : 200px;
border-left: blue 10px double;
border-right: blue 10px double;
border-top-left-radius : 100px;
border-top-right-radius: 66.66px;
border-top: blue 10px double;
border-bottom: blue 10px double;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
padding-top: 24px; |
텍스트 블럭에 적용되면 다음과 같이 보일 것 입니다.
.png)
CSS3 백그라운드와 보더 모듈의 더 많은 지원이 계획되어져 있습니다.
CSS 컬러 모듈
인터넷 익스플로러 플랫폼 Preview는 CSS3 컬러 모듈의 몇몇 일부를 위한 지원이 추가적으로 더 계획될 것입니다. 이것들은 RGBA컬러 모델과 opacity 속성에 대한 지원을 포함합니다.
RGBA color 모델
RGB 컬러 모델에 알파 채널, 또는 투명도가 포함되어 확장 되었습니다. RGBA 값 포맷은 rgba(<
red>,<
green>,<
blue>,<
alpha>) 입니다. Red, green, blue 컴포넌트는 RGB 컬러 모델과 똑같고 숫자나 퍼센트로 표시합니다. alpha컴포넌트는 0.0(완전투명)과 1.0(완전 불투명) 사이의 값으로 표시합니다.
예를 들어서 50% 투명도를 가지는 red 배경을 설정하고 싶다면 다음의 예를 css 선언에 추가하면 됩니다.
| backgrund-color : rgba(255, 0, 0, 0.5) |
| background-color: rgba(100%, 0, 0. 0.5) |
RGB에서 지원하는 16진수 표시는 RGBA에서는 지원되지 않습니다.
Opacity 속성
인터넷 익스플로러 플랫폼 Preview에 엘리먼트의 투명도를 컨트롤하는 CSS3 컬러 모듈의 opacity 속이 추가되었습니다. RGBA 값의 알파 컴포넌트 처럼 opacity 값은 0.0(완전 투명)에서 1.0(완전 불투명) 사이의 숫자로 표시하고 퍼센트나 실수값으로 표시도 가능합니다. opacity 속성은 모든 엘리먼트에서 사용이 가능합니다.
다음의 예는 navy 컬러에 opacity값을 적용한 것이며 20%씩 0%에서 100%까지 증가시킨 것입니다.
<div class="opacity_smaple">
<div style="bakcground: navy; opacity: 0;"></div>
<div style="background: navy; opacity: 0.2;"></div>
<div style="background: navy; opacity: 40%;"></div>
<div style="background: navy; opacity: 0.6;"></div>
<div style="background: navy; opacity: 80%;"></div>
<div style="background: navy; opacity: 1;"></div>
</div> |
25 x 125 픽셀 사이즈의 div로 만들고 추가한 것이다.
.png)
CSS 셀렉터
인터넷 익스플로러 플랫폼 Preview는
CSS3 Selectors Proposed Recommendation 내의 css 셀렉터 문법 명세를 추가 지원합니다. 인터넷 익스플로러 플랫폼 Preview를 위한 새로운 셀렉터의 리스트가 여기에 있습니다.(인터넷 익스플로러가 지원하는 셀렉터에 대한 자세한 부분은 MSDN의 "CSS 적합성과 인터넷 익스플로러" 참고.) 인터넷 익스플로러 SDK안에는 새로운 셀렉터가 어떻게 사용되는지에 대한 더 많은 정보가 있습니다.
구조 유사 클래스
구조 유사 클래스는 간단한 셀렉터나 콤비네이션들을 사용하여 선택할 수 없는 문서 트리 내의 여분의 정보를 기초로 셀렉션을 활성화 시킵니다.
다음은 문서루트의 E 엘리먼트를 선택하는 것입니다.
E: root
다음은 부모의 자식인 n-th 인 E 엘리먼트를 선택하는 것입니다.
E: nth-child(n)
다음은 마지막 하나로 부터 이어지는 부모의 자식인 n-th의 E 엘리먼트를 선택합니다.
E: nth-last-child(n)
다음은 n-th sibling 타입인 E 엘리먼트를 선택합니다.
E: nth-last-of-type(n)
다음은 부모의 마지막 자식 엘리먼트은 E 엘리먼트를 선택합니다.
E: last-child
다음은 부모의 자식인 E 엘리먼트만 선택합니다.
E: only-child
다음은 오직 sibling 타입인 E 엘리먼트만 선택합니다.
E: only-of-type
다음은 자식이 없는 E 엘리먼트를 선택합니다.(텍스트 노드 포함)
E: empty
목표 유사 클래스
목표 유사 클래스는 조각 식별자로서 URI의 타겟인 엘리먼트를 선택합니다. 하나의 조각 식별자는 한 페이지 내의 식별자 위치를 사용하고 또다른 식별자에 의해 번호 표시를 사용하여 성립됩니다. 예를 들어서
http://www.example.com/mypage.htm#section_3 과 같습니다.
다음은 URI가 참조하는 타겟 엘리먼트인 클래스 important의 div 요소를 선택하는 겁니다. 만약에 문서의 URI가 조각 식별자가 아니라면 타겟 엘리먼트가 없습니다.
div.important : target
UI 엘리먼트 상태 유사 클래스
UI 엘리먼트 상태 유사 클래스들은 enabled, disabled, checked 처럼 확실한 상태를 선택하는데 사용되는 것입니다.
다음은 enabled된 E 사용자 인터페이스 엘리먼트를 선택합니다.
E: enabled
다음은 disabled된 E 사용자 인터페이스 엘리먼트를 선택합니다.
E: disabled
다음은 라디오 버튼이나 체크된 체크박스와 같은 사용자 인터페이스 엘리먼트 E를 선택합니다.
E: checked
부정 유사 클래스
부정 유사 클래스는 argument에 의해 선택되지 않은 선택 엘리먼트를 선택할 수 있다. 다음은 심플 셀렉터 s와 매치되지 않는 E 엘리먼트를 선택합니다.
E: not(s)
문서 객체 모델(DOM) 레벨2와 3
인터넷 익스플로러 플랫폼 Preview는 문서객체모델 레벨2(DOM L2)보다 더 많은 것을 위해 추가 되었고 인터넷 익스플로러의 현재 구현 범위를 넘어 지원되도록 개선되었습니다. 이것은 또한 DOM L3의 선택 기능을 위한 지원이 추가되었습니다.
인터넷 익스플로러 플랫폼 Preview는 아래에 링크된 W3C 명세서에 나와있는 내용을 지원 하는 것에 대한 소개를 합니다.
인터넷 익스플로러 플랫폼 Preview는 이미 존재하는 다음의 것을 개선 했습니다.
HTML5
HTML5 드래프트 정의서의 몇가지 지원에 대한 특징은 인터넷 익스플로러 8에서 소개되었습니다. 이것들은
DOM Storage,
Cross-document Messaging,
Ajax Navigations(windows.location.hash에 사용된 것 처럼) 그리고 on-online과 on-offline 이벤트 핸들러들이 포함되어 집니다. 인터넷 익스플로러 플랫폼 Preview는 몇가지 HTML5 APIs와 HTML을 파서하는 방법을 변경해서 추가 했습니다.
Note HTML5 정의서가 여전히 Working Draft 인 것을 기억하는게 중요합니다. 후보 권고안이 될 때까지 큰 범위에서 변경될 것입니다. 자세한 정보는
lastest HTML5 working draft 를 보세요.
HTML 파싱 이용하기
인터넷 익스플로러 플랫폼 Preview에서 HTML 파싱은 HTML5 Draft Specification에 기술된 것에 가깝게 개선하였습니다.
일반 엘리먼트들
이전 인터넷 익스플로러는 HTML5 Draft Specification과 유사하지 않았고, 일반적인 엘리먼트(xmlns 애트리뷰트가 없는 잘 알려지지 않은 html 엘리먼트)로 간주했습니다. 간단하게 말해 무시되고 통합되었습니다. 이 의미는 인터넷 익스플러거에 의존하여 렌더하기 위해 개발자가 종종 커스텀 엘리먼트 - div 엘리먼트가 위치한 장소에 css 클래스 이름을 사용하여 개발자가 엘리먼트를 포함하는 것 -를 얻기 위해 생성된 메서드를 사용했다는 것 입니다. 인터넷 익스플로러 플랫폼 Preview는 개발자가 예비수단으로 잘 알려지지 않은 엘리먼트에 대한 파서를 가지는 것을 부정하고 변경을 가했습니다.
다음은 일반 엘리먼트의 간단한 예입니다. 이 케이스에서 엘리먼트는 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> |
인터넷 익스플로러8에 CSS가 조합되어 있지만 mydiv 태그를 무시합니다. 그것의 결과는 아래와 같습니다.
.png)
인터넷 익스플로러9 파서는 아래의 결과로 렌더링 합니다.
.png)
겹쳐진(중첩) 태그
HTML이 겹쳐진(중첩) 태그를 포함하고 있으면 인터넷 익스플로러8과 이전 버전은 파서 타임에서 그것들을 풀어내지 못합니다. 이러한 것은 HTML5 draft specification에 정의된 무언가하고도 바람직하지 않습니다. 만약에 당신이 스크립팅 목적을 위해 몇가지 태그를 겹쳐지게할 계획이 있다면 이것은 스크립팅 에러를 야기할 수 있습니다. 인터넷 익스플로러 플랫폼 Preview는 HTML5 스펙과 파서 타입에 오버랩된 태그를 풀어 낼 수 있습니다.
다음의 간단한 예제는
i와
b 테그 사이에 텍스트를 red로 반환합니다.
<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> |
인터넷 익스플로러와 이전 버전의 것은 계획되지 않은 렌더링 결과를 만들어 냅니다.
.png)
인터넷 익스플로러 플랫폼 Preview는 기대할만한 렌더를 마크업 합니다.
.png)
script와 style 블럭에서 파싱을 변환
인터넷 익스플로러8 과 이전 버전은 DOM의 텍스트 노드에서 script와 style 블럭 어느 쪽으로든 텍스트를 건네지 못했습니다. 인터넷 익스플로러 플랫폼 Preview는 DOM의 텍스트 노드와 마찬가지로 script와 style 블럭에 텍스트를 유지시킬 수 있습니다. 페이지에 스크립트를 사용하여 소스 코드를 보기위해 활성화 하십시오.
HTML에서 SVG 파싱
인터넷 익스플로러 플랫폼 Preview는 HTML에 직접적으로 SVG가 임베디드 되어 지원됩니다. SVG에 정보를 더 보려면 "
Scable Vector Graphics(SVG)"를 보세요.
XHTML 파싱
인터넷 익스플로러 플랫폼 Preview는
application/xhtml+xml mime-type로 문서를 파서할 것입니다.
HTML5 셀렉션 APIs
인터넷 익스플로러 플랫폼 Preview는 3개의 텍스트 selection APIs에 대한 지원이 추가되었습니다. 이 Selection 객체는 Range객체 리스트를 재표현합니다. 인터넷 익스플로러 플랫폼 Preview내의 DOM L2 Range에 대한 새로운 지원으로 이것을 사용할 수 있습니다. 이것에 대한 더 많은 정보를 얻기 원한다면 "
Document Object Model(DOM)"을 보세요.
getSelection 메서드
getSelection 메서드는 현재 선택된 텍스트를 다시 표현하기 위해 window에 Selection 객체를 반환한다.
selectionStart 속성
selectionStart 속성은 selection의 현재 선택된 텍스트의 시작점과 선택 시작점을 가져올 수 있습니다.
selectionEnd 속성
selectionEnd 속성은 selection의 현재 선택된 텍스트의 끝점과 선택 끝점을 가져올 수 있습니다.
Scalable Vector Graphics(SVG)
Scalable Vector Graphics(SVG)에 대한 지원은 인터넷 익스플로러 도구에 대한 대부분의 요구된 특징 중의 하나로 부터 시작되었는데 낮은 대역폭과 최소한의 마크업으로 웹 사이트를 주목을 끌만하게 만드는 강력한 방법이었습니다. 인터넷 익스플로러 플랫폼 Preview와 함께 마이크로소프트는 향후 플랫폼에 더 많은 지원을 할 것이고 기본적인 SVG 특징 집합을 지원하게 되었다는 것을 소개하게 되어 자랑스럽습니다.
Basic Shapes
인터넷 익스플로러 플랫폼 Preview는 SVG 1.1 draft specification 의
Basic Shapes module 에 정의된 것으로 모든 기본 shapes 엘리먼트의 파싱과 렌더링 에 대한 지원, 그것들의 애트리뷰트, 그리고 조합된 DOM 인터페이스를 소개합니다. 현재 인터넷 익스플로러 플랫폼 Preview에 의해 지원되는 기본 shapes의 집합은 다음의 shapes 엘리먼트를 포함합니다.
- <rect>
- <circle>
- <ellipse>
- <line>
- <polyline>
- <polygon>
인터넷 익스플로러 플랫폼 Preview는 또한 엘리먼트가 DOM 인터페이스에 조합되어 지원됩니다.
앞서 말한 각 shapes의 예제는 다음과 같습니다. 마크업 후 인터넷 익스플로러 플랫폼 Preview에 상응하는 결과의 스크린 샷 입니다.
Rectangles: <rect> element
<?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> |
.png)
<rect fill="orange"
stroke="black"
width="150"
height="100"
x="50"
y="25"
rx="10"
ry="50"/> |
.png)
Circles: <circle> element
<circle fill="orange"
stroke="black"
stroke-width="3"
cx="40"
cy="25"
r="20"/> |
.png)
Circles: <circle> element
<ellipse stroke="orange"
cx="100"
cy="60"
rx="75"
ry="50"/> |
.png)
Lines: <line> element
<!-- 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"/> |
.png)
Polylines: <polyline> element
하나의 "polyline"은 "open" shape 나 폴리곤, 몇 개의 연결된 라인으로 이어진 SVG내에 정의되어 있다.
<polyline points="15, 5, 100 8,3 150"
fill="orange"
stroke="black"
stroke-width="4"/> |
.png)
Polygons: <polygon> element
<polygon points="15, 5, 100 8,6 150"
fill="orange"
stroke="black"
stroke-width="4"/> |
.png)
기본적인 SVG shapes에 대한 개발자를 위한 보다 자세한 정보는 인터넷 익스플로러 SDK 로 도움을 받을 수 있습니다.
좌표 시스템, 번형 그리고 단위들
인터넷 익스플로러 플랫폼 Preview는 SVG 1.1 draft specification의
좌표 시스템, 변형, 그리고 단위 모듈 내에서 정의된 좌표 시스템, 변형, 그리고 단위에 대한 SVG 지원을 소개 합니다.
단위와 퍼센테이지
- 어떤 엘리먼트 상에서든 독단적인 변형과 변형 애트리뷰트
- viewBox와 preserveAspectRatio 애트리뷰트(overflow 애트리뷰트와의 인터렉션을 포함)
- 변형과 변형 리스트 타입에 대한 지원
인터넷 익스플로러 플랫폼 Preview는 SVG 좌표 시스템과 변형에 대한 DOM 인터페이스와 조합되어 지원됩니다.
문서 구조
인터넷 익스플로러 플랫폼 Preview는 SVG 1.1 draft specification의
문서구조,
메타데이터 그리고
확장성 모듈에 정의된 기본적인 SVG 문서구조, 메타데이터, 그리고 확장성있는 기능에 대한 지원을 소개합니다.
- <svg>
- <desc>
- <title>
- <metadata>
- <g>
- <use>
- <defs>
- <symbol>
- <image>
인터넷 익스플로러 플랫폼 Preview는 엘리먼트가 조합된 DOM 인터페이스를 지원합니다.
경로들
SVG 경로는 shapes이 아웃라인입니다. 그것들은 clipping 경로로 사용되거나 스트로크, 채우기를 할 수 있습니다.
인터넷 익스플로러 플랫폼 Preview는 SVG 1.1의 draft specification의
Paths module 내에 정의된 SVG 패스를 지원합니다. 인터넷 익스플로러 플랫폼 Preview는 경로 데이타의 파싱을 활성화 하는 d 애트리뷰트와 마찬가지로 <path> 엘리먼트를 지원합니다.
경로 모듈이 DOM 인터페이스와 조합되는것 또한 지원합니다.
<path> 엘리먼트는 많은 다른 개발자 시나리오를 가능하게 합니다. 다음은 간단한 몇 가지 샘플 예제 입니다. 마크업 후 인터넷 익스플로러 플랫폼 Preview에 상응하는 결과의 스크린 샷 입니다.
직선과 채워진 닫힌 모양
<?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"
stroke="red"
stroke-width="3" />
</svg> |
.png)
Bezier 경로(2차원형식)
<path d="M20,30 Q40,50 60,30 T100,30"
fill="none"
stroke="red"
stroke-width="3" /> |
.png)
선과 호
<path d="M30,60 l 50,0
a25,45 0 0,1 50,0 l 50,0"
fill="green"
stroke="blue"
stroke-width="4" /> |
.png)
개발자를 위한 보다 자세한 정보는 Internet Explorer SDK를 활용하세요.
웹 개발자를 위한 새로운 도구
인터넷 익스플로러 플랫폼 Preview에서 이 섹션이 새로운 버저닝 메카니즘을 첫번째로 기술하고자 하는 것은 인터넷 익스플로러의 최근의 버전을 통합내에서 정확한 지침을 주기 위함입니다. 다음으로 인터넷 익스플로러 8로 부터 처음으로 통합된 개발 도구의 개선에 대해 읽게 될 것입니다.
플랫폼 버전닝
인터넷 익스플로러 8은 마이크로소프트 인터넷 익스플로러 6에서 소개된 적합성 모드의 확장인 문서 적합성 모드를 소해합니다. 문서 모드는 웹 페이지를 사용자가 디스플레이함에 있어 인터넷 익스플로러의 특정한 렌더링 모드를 선택 가능하게 해줍니다. 보다 자세한 내용은 MSDN의 "
Defining Document Compatibility"에 기술되어 있습니다.
인터넷 익스플로러 플랫폼 Preview는 최종 표준을 지원하는 도구와 현대적인 웹 애플리케이션의 요구를 충족시키기 위한 스케일과 더 빠른 퍼포먼스를 가능하게 하는 새로운 문서 모드 - 인터넷 익스플로러 9 표준 모드 ("IE9 Document Mode") - 가 추가 되었습니다.
인터넷 익스플로러 플랫폼 Preview는 웹 서버나 페이지에 다른 것을 기술하지 않은 이상 기본적으로 IE9 모드로 실행됩니다.
인터넷 익스플로러 플랫폼 Preview에서 안전하게 웹 페이지를 렌더링 하려면 페이지의 head에 메타 테그를 삽입합니다.
| <meta http-equiv="X-UA-Compatible" content="IE=9" > |
개발도구
인터넷 익스플로러 플랫폼 Preview에 개발 도구로 액세스 하기 위해서 F12를 누르거나 Debug 메뉴에서 Developer Tools를 클릭합니다.
HTTP 검사
인터넷 익스플로러 플랫폼 Preview는 개발도구로 네트워크 감시하는 것을 소개합니다. 도구에 액세스 하기 위해선 Network 탭을 클릭합니다. 그리고 아래의 것을 본 도구로 검사할 수 있습니다.
- HTTP와 HTTPS 네트워크 트래픽 캡처
- 요청과 응답을 캡처한 컨텐츠를 보여줌.
- 쿠키, 사이즈, 시간, 캐쉬 정보와 같은 데이터를 캡처해서 여분의 데이터를 자세하게 보여줍니다.
개정내역
2010년 3월 16일 : Created for Internet Explorer Platform Preview
