웹 사이트 디자인 및 레이아웃의 새로운 아이디어 탐색

Internet Explorer 10 및 Windows Internet Explorer 9에서는 CSS3(Cascading Style Sheets, Level 3)을 완벽하게 지원하므로 인기 있는 모든 브라우저에서 웹 사이트 디자인이 "제대로 작동"할 것을 확신할 수 있습니다. 이 Windows Internet Explorer 개발자 센터 부분에서는 CSS 스타일시트 표준에 대한 지원 향상을 통해 웹 사이트의 콘텐츠 디자인 및 레이아웃에서 사용할 수 있는 몇 가지 기능을 보여 줍니다.이 항목에는 다음 섹션이 포함되어 있습니다.

Internet Explorer 10 방법 항목

다음 항목에서는 Internet Explorer 10의 몇 가지 새로운 CSS 기능을 설명합니다.

항목설명

CSS를 사용하여 웹 페이지에서 텍스트 선택을 차단(또는 사용하도록 설정)하는 방법

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

CSS 그리드를 사용하여 적응 레이아웃을 만드는 방법

여기서는 사진 갤러리에서 사진을 보는 데 사용할 간단한 라이트 박스 페이지를 만드는 과정을 안내합니다. 여기서는 그리드 레이아웃을 사용하여 페이지의 콘텐츠를 구성하고 미디어 쿼리를 사용하여 세로 또는 가로 방향으로 볼 레이아웃을 최적화합니다.

CSS 변형, 전환 및 애니메이션을 사용하여 웹 페이지에 생기를 불어넣는 방법

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱은 CSS 3D 변형, CSS 전환 및 CSS 애니메이션을 지원하여 Internet Explorer 9에서 소개된 CSS 2D 변형에 대한 지원을 확장했습니다.

CSS를 사용하여 재미있는 텍스트 효과를 추가하는 방법

Internet Explorer 10에서는 text-shadow CSS 속성을 사용하여 하드웨어 가속 텍스트 그림자를 지원합니다.

 

Internet Explorer 9 방법 항목

다음 항목에서는 Internet Explorer 9부터 제공되는 여러 CSS 기능을 설명합니다.

항목설명

CSS3를 사용하여 둥근 모서리 추가

CSS3를 통해 레이아웃 요소의 모서리를 둥글게 하여 웹 사이트의 모양을 매끄럽게 할 수 있습니다. 여기서는 Internet Explorer 9에 새로 추가된 기본 제공 둥근 모서리 지원을 사용하여 웹 사이트 레이아웃을 개선하는 몇 가지 기본 방법에 대해 설명합니다.

CSS3를 사용하여 그림자 추가

Internet Explorer 9 및 CSS3를 사용하여 레이아웃 요소 바깥쪽이나 안쪽에 그림자를 추가할 수 있습니다. Internet Explorer 9에 새로 추가된 둥근 모서리 지원을 사용하여 만든 모서리 곡선을 그림자가 따라갑니다.

CSS3를 사용하여 멋진 단추 만들기

CSS3와 Internet Explorer 9을 사용하면 약간의 태그만으로 매력적인 모양의 단추를 만들 수 있습니다. 여기서는 간단한 하이퍼링크를 CSS로 전체 스타일이 지정된 단추로 변환하는 방법에 대해 설명합니다.

CSS3를 사용하여 웹 사이트의 서체 디자인 향상

이 항목에서는 사용자의 서체 디자인이 Internet Explorer 9 및 다른 최신 브라우저에서 모두 강조되도록 새로운 CSS3 글꼴 기능을 웹 사이트에 통합하는 방법을 보여 줍니다.

 

새 CSS 기능에 대한 디자이너 가이드

숙련된 웹 디자이너라면 사용하려는 첨단 기능에 대한 지원 수준이 브라우저마다 다른 경우 얼마나 방해가 되는지를 알고 있을 것입니다. Microsoft는 두 표준 기관 및 다른 브라우저 공급업체와 협력하여 이러한 기능 간격을 메우기 위해 노력해 왔습니다. CSSWG(CSS Working Group)의 구성원인 Microsoft는 모든 사용자의 웹 상태를 발전시키기 위해 W3C(World Wide Web 컨소시엄), 다른 브라우저 공급업체, 사양 편집자 및 보다 광범위한 커뮤니티에서 초대된 전문가와의 정기적 교류가 필요하다는 것을 알고 있습니다.

이를 위해 Internet Explorer 9에는 많은 CSS3 지원 기능이 추가되었으며 Internet Explorer 10에서는 지원 기능이 더욱 확장되었습니다. 개발자용 Internet Explorer 10 가이드(영문) 및 개발자용 Internet Explorer 9 가이드(영문)에서 새로운 기능의 전체 목록을 볼 수 있습니다.

Internet Explorer 10의 주요 기능은 다음과 같습니다.

Internet Explorer 9의 주요 기능은 다음과 같습니다.

Internet Explorer 팀 블로그 게시물

IEBlog는 Microsoft Internet Explorer 팀에 직접 연결됩니다. "CSS" 태그가 있는 게시물을 보면 콘텐츠 디자인 및 레이아웃의 최신 개발 사항을 확인할 수 있습니다.

다음은 유용한 몇 가지 최근 블로그 게시물입니다.

제목설명

CSS를 사용한 전체 페이지 애니메이션

Internet Explorer 9에서는 CSS 2D 변환을 지원합니다. Internet Explorer 10에서는 CSS 3D 변환 및 CSS 애니메이션을 지원합니다.

IE10의 접두사가 없는 CSS3 그라데이션

Internet Explorer 10에서는 접두사가 없는 형식의 CSS 그라데이션에 대한 W3C 후보 권고안을 지원합니다.

IE10의 CSS3 3D 변환

CSS3 기능을 사용하면 풍부한 몰입형 웹 환경을 보다 쉽게 만들 수 있습니다.

CSS 사용자 선택을 통한 선택 제어

Internet Explorer 10에는 새 CSS 속성인 -ms-user-select가 지원되므로 웹 사이트에서 선택할 수 있는 텍스트를 웹 개발자가 보다 쉽고 정확하게 제어할 수 있습니다.

CSS 모서리: 전체 글꼴 사용

CSS3 @font-face 규칙과 WOFF(Web Open Font Format) 글꼴 패키징 형식에 모두 브라우저 간 지원을 제공하기 위해 최신 웹 입력 체계는 "웹에 사용 가능한 글꼴" 영역 이상으로 확장되었습니다.

CSS3 전환 및 애니메이션을 사용하여 개성 살리기

Internet Explorer 9 및 Internet Explorer 10의 컴파일된 고성능 JavaScript, HTML5 및 CSS3의 하드웨어 가속 렌더링 등의 고급 기능을 사용하면 웹 개발자가 이전보다 다양한 환경을 만들 수 있습니다. 두 개의 관련 기능인 CSS3 전환과 CSS3 애니메이션을 통해 웹 개발자는 선언적으로 웹 페이지 조작 방식에 간편하게 개성을 더할 수 있습니다.

IE10에서 서식 있는 텍스트 중심 페이지 빌드

Internet Explorer 10에는 개발자가 서식 있는 텍스트 중심 웹 페이지와 앱을 만들기 쉽도록 두 개의 새로운 CSS 기능이 추가되었습니다. CSS3 영역은 연속하지 않는 여러 영역을 콘텐츠가 통과할 수 있도록 하는 경량 메커니즘을 제공합니다. Internet Explorer 10의 CSS3 하이픈 넣기 지원을 사용하면 개발자가 광범위한 언어의 텍스트에 간단하게 하이픈을 넣을 수 있습니다.

IE10의 CSS3 텍스트 그림자

Internet Explorer 10에는 하드웨어 가속 CSS3 지원이 추가되었습니다 text-shadow. text-shadow 속성은 웹 개발자가 요청한 상위 기능 중 하나입니다. 인라인 텍스트 이미지를 사용하지 않고도 이전에 어렵거나 불가능했던 텍스트 효과를 표준에 적합한 방법으로 구현할 수 있습니다.

적응 레이아웃에 대한 Internet Explorer 10 및 CSS 기능

Internet Explorer 10에는 모두 발전하는 웹 표준의 구현으로 개발된 많은 새로운 CSS3 기능이 포함되어 있습니다. 이 게시물은 CSS 기능 중 세 가지—CSS3 그리드 레이아웃, 유연한 상자 레이아웃 및 다중 열 레이아웃에 대해 설명합니다.

 

Internet Explorer 샘플 갤러리

Internet Explorer 샘플 갤러리(영문)는 Internet Explorer에서 새로운 디자인 및 레이아웃 기능을 구현하도록 영감을 줄 수 있습니다.

몇 가지 샘플은 다음과 같습니다.

샘플설명

CSS 플렉스박스

CSS 플렉스박스를 사용하면 사용자가 브라우저 창의 크기를 변경할 때 크기와 위치가 조정될 수 있는 요소, 컨트롤, 양식, 도구 모음 및 메뉴로 웹 페이지를 만들 수 있습니다.

CSS 다중 열 레이아웃

인쇄된 신문을 전자 버전으로 변환하는 경우 열이 활성화되고 온라인 상태가 됩니다. CSS 다중 열 레이아웃을 사용하면 다양한 변형으로 멋진 텍스트 레이아웃을 만들 수 있습니다.

CSS 그리드 오버레이

CSS 그리드를 사용하면 복잡한 픽셀 계산 없이도 요소가 겹치고 변화하는 창 크기에 응답하는 레이아웃으로 웹 페이지를 만들 수 있습니다.

CSS 제외

CSS 제외를 사용하면 텍스트 및 다른 콘텐츠가 특정 요소를 중심으로 줄 바꿈될 수 있는 웹 페이지를 만들 수 있습니다. 이 샘플은 제외를 사용하여 컨테이너를 기준으로 절대 위치가 지정된 요소로 복합 레이아웃을 만드는 방법을 보여 줍니다.

 

Internet Explorer 테스트 드라이브 데모

Internet Explorer 테스트 드라이브를 사용하면 Internet Explorer 9 및 Internet Explorer 10에서 콘텐츠 디자인 및 프레젠테이션의 가능성을 모두 탐색할 수 있습니다. 사용 가능한 데모의 전체 목록은 테스트 드라이브 사이트 맵을 참조하세요. 즐겨찾는 CSS 데모 중 일부는 다음과 같습니다.

기타 필수 리소스

 

 

표시:
© 2014 Microsoft