CSSOM의 부동 소수점 값

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 하위 픽셀 정밀도를 사용하여 DOM(문서 개체 모델)의 위치 및 크기 지정 메트릭을 보고합니다. Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱의 CSSOM(CSS 개체 모델)은 요소 수준 CSSOM 속성의 위치 및 크기 지정 값에서 부동 소수점 픽셀 단위 및 부동 소수점 정밀도를 지원합니다.

이 항목의 내용은 다음과 같습니다.

전체 픽셀 맞춤

레거시 웹 표준과 구현에서는 일반적으로 주어진 화면의 웹 콘텐츠 렌더링을 전체 픽셀 경계에 맞춰야 한다고 가정했습니다. 이 가정은 DOM의 위치 및 크기 지정 메트릭을 가져오는 데 사용되는 개체 모델인 CSSOM에서 두드러졌습니다. Windows Internet Explorer는 다양한 CSSOM API 집합을 오랫동안 지원해 왔지만(자세한 내용은 Internet Explorer 9에서 CSSOM을 사용하여 요소 차원 및 위치 측정 참조) 이전에는 이러한 위치 및 크기 지정 메트릭을 픽셀 맞춤으로 정의했습니다.

DIP(장치 독립적인 픽셀) 단위

Internet Explorer 8에는 DIP(장치 독립적인 픽셀) 지원이 추가되었습니다. 이러한 "가상 픽셀"은 크기가 1인치의 1/96이며 실제 픽셀보다 텍스트 배치를 측정하는 더 정확한 방법입니다. 콘텐츠를 화면에 렌더링할 때 레이아웃 메트릭을 배율 인수(사용자의 현재 확대/축소 수준에 매핑됨)로 변환한 다음 표시를 위해 픽셀로 반올림하거나 "끕니다".

Windows Internet Explorer 9의 렌더링 엔진은 Direct2D API를 사용하여 대부분의 렌더링 작업을 PC의 그래픽 하드웨어로 오프로드합니다. Direct2D는 CSS 스타일시트 상자 모델과 텍스트 둘 다에 대해 하위 픽셀 정확도로 렌더링을 수행할 수 있습니다. Internet Explorer 9의 텍스트 렌더링에 대한 자세한 내용은 Internet Explorer 9의 텍스트 렌더링 정보(영문)를 참조하세요. 렌더링 중에 레이아웃 단위를 가장 인접한 픽셀로 끄는 대신 Direct2D API는 레이아웃 계산이 렌더링 엔진에서 직접 사용되고 적절하게 표시될 수 있게 합니다.

위치 및 크기 지정 계산의 미세 정밀도

100% 확대/축소 수준에서는 CSSOM을 통해 pixel-perfect 위치 및 크기 지정 정보를 가져오는 데 거의 문제가 없지만 콘텐츠를 확대 및 축소하는 경우 사용자에게 더 명확하게 표시되어 개발자에게 문제가 될 수 있습니다. Internet Explorer 10에서는 요소 수준 CSSOM 속성의 크기 및 위치 지정 값에 대해 부동 소수점 정확도를 지원하므로 이러한 문제 완화에 도움이 됩니다. 요소 수준 속성은 elementOb.clientLeft 등의 속성인 반면, rangeOb.getBoundingClientRect().left 등의 속성은 항상 하위 픽셀 값을 반환합니다.

요소 수준 CSSOM 속성의 하위 픽셀 정밀도는 기본적으로 꺼져 있습니다. 사용하도록 설정하려면 다음 새 속성을 사용합니다.

속성설명

msCSSOMElementFloatMetrics

CSSOM 속성이 현재 부동 소수점 정밀도로 메트릭을 반환하도록 설정되어 있는지 여부를 나타내는 부울 속성입니다. 기본값은 "0"입니다.

 

관련 항목

DOM(문서 개체 모델)
개발자용 Internet Explorer 10 가이드

 

 

표시:
© 2014 Microsoft