CSS

Internet Explorer 10 및 JavaScript로 작성된 Windows 8의 Windows 스토어 앱은 새 고급 레이아웃, 시각 효과, 이동 및 확대/축소 기능을 비롯한 여러 새 CSS 스타일시트 기능에 대한 지원을 추가합니다. 이 추세는 Windows Internet Explorer 8(CSS2.1(Cascading Style Sheets, Level 2 Revision 1) 표준 완전 준수)에서 시작되었으며 Windows Internet Explorer 9(CSS 둥근 모서리, 여러 배경 이미지, 새로운 색 모델 및 불투명도, CSS3(Cascading Style Sheets, Level 3) 글꼴 및 WOFF(Web Open Font Format), 2D 변형, 미디어 쿼리, CSS3 네임스페이스 등 지원)에서 계속되었습니다. Internet Explorer 10에서는 이 섹션에 설명된 CSS 기능을 지원하여 이 추세를 이어갑니다.

중요  이러한 기능은 Internet Explorer 10과 JavaScript를 사용하는 Windows 스토어 앱에서 동일하게 작동합니다.

참고  모든 최근 버전의 Windows Internet Explorer에서 CSS 지원의 전체 목록은 Internet Explorer의 CSS 호환성을 참조하세요.

고급 레이아웃

Internet Explorer 10 및 Windows 8에서는 CSS를 사용하여 몇 가지 새로운 웹 페이지 또는 JavaScript를 사용하는 Windows 스토어 앱을 레이아웃하는 방법을 소개합니다. 여기에는 다음이 포함됩니다.

항목설명

CSS 제외

텍스트의 왼쪽이나 오른쪽에 부동 상태가 되도록 요소를 제한하는 것이 아니라, 텍스트를 줄 바꿈하여 요소를 완전히 둘러쌉니다.

CSS 영역

텍스트와 이미지를 모두 포함하는 HTML 콘텐츠의 단일 스트림을 가져와서, 해당 콘텐츠를 표준 HTML 문서에 정의된 여러 빈 컨테이너로 보냅니다.

CSS3 다중 열 레이아웃

콘텐츠가 여러 열에 걸쳐 흐르며, 각 열 사이에 간격 및 괘선(옵션)을 사용할 수 있습니다.

CSS3 유연한 상자("플렉스박스") 레이아웃

상자 크기를 정의할 때 사용 가능한 공간을 고려하여 상대적인 크기와 위치를 사용합니다.

CSS3 그리드 레이아웃

웹 페이지와 웹 앱의 주요 영역을 위해 공간을 나누고, HTML 컨트롤의 부분 간 관계를 크기, 위치 및 레이어에 따라 정의합니다.

CSS 장치 적응

@-ms-viewport 규칙을 CSS 미디어 쿼리와 함께 사용하면 JavaScript로 작성된 Windows 8용 Windows 스토어 앱 개발자와 웹 개발자가 최소한의 노력으로 각 장치용 앱과 사이트 레이아웃을 최적화할 수 있습니다.

 

시각 효과

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 CSS3의 일부 최신 시각 효과 모듈을 지원합니다. 이러한 플래그는 다음과 같습니다.

항목설명

CSS3 3-D 변형

2D 및 3D 공간에서 요소를 변환, 회전, 크기 조정합니다.

CSS3 애니메이션

시간에 따라 CSS 속성을 매끄럽게 자동으로 변화시켜 요소에 애니메이션 효과를 줍니다.

CSS3 글꼴

CSS3 글꼴을 포함하는 OpenType 글꼴의 고급 입력 체계 기능에 액세스합니다.

CSS3 그라데이션

이미지를 허용하는 모든 속성에 컬러 그라데이션을 추가합니다.

CSS3 전환

CSS 속성의 시작 값과 끝 값을 매끄럽게 변경하여 단순한 애니메이션을 만듭니다.

CSS3 텍스트

텍스트에 그림자를 적용하거나 텍스트 블록에 자동으로 하이픈을 넣습니다.

 

기타 새로운 기능

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 다음과 같은 새로운 기능도 소개합니다.

항목설명

스타일시트 제한 제거

이전 Internet Explorer 버전에 있던 중첩 수준 수와 웹 페이지당 스타일시트 수에 대한 제한이 Internet Explorer 10에서는 제거되었습니다.

터치를 사용한 스크롤 및 확대/축소

CSS를 사용하면 Internet Explorer 10에서 터치에 최적화된 웹 페이지 또는 Windows 8에서 JavaScript를 사용하는 Windows 스토어 앱의 보기 스크롤 및 확대/축소를 제어할 수 있습니다.

선택 가능한 텍스트 지정

-ms-user-select 속성은 새로운 CSS 속성으로 사용자가 JavaScript를 사용하는 Windows 스토어 앱 또는 웹 페이지에서 텍스트를 선택할 수 있는 위치를 앱 및 웹 개발자가 제어할 수 있도록 해줍니다.

 

관련 항목

개발자용 Internet Explorer 10 가이드

 

 

표시:
© 2014 Microsoft. All rights reserved.