적응 레이아웃의 기능

Internet Explorer 10은 사용하는 디스플레이 옵션의 유형에 따라 다양한 스타일, 레이아웃 및 배율 인수를 할당하는 기능을 제공합니다. 또한 Internet Explorer 10은 광범위한 장치 및 해상도에서 보다 효율적으로 화면 실제 자산을 사용하기가 더 쉽게 하는 새로운 유형의 적응 CSS(Cascading Style Sheets) 레이아웃 방법을 제공합니다.

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

미디어 쿼리

미디어 쿼리를 사용하면 조건 집합을 기반으로 사용자를 위한 맞춤식 페이지를 구성할 수 있습니다. 예를 들어 브라우저의 가로 세로 비율이 세로 모드(높이가 너비보다 큼) 또는 가로 모드(너비가 높이보다 큼)일 때만 웹 페이지에 적용될 스타일 집합을 지정할 수 있습니다. Internet Explorer 10에서 지원되는 다른 미디어 기능에는 해상도, 색 디스플레이 기능 및 보는 장치(브라우저가 아니라 화면)의 가로 세로 비율 등이 있습니다. Windows Internet Explorer 9부터 지원되는 미디어 기능은 미디어 쿼리에 나와 있습니다.

2012년 6월 19일 현재 미디어 쿼리 사양은 완벽한 W3C(World Wide Web 컨소시엄) 권장안 상태에 도달했습니다. 미디어 쿼리는 Internet Explorer 9을 비롯한 대부분의 최신 브라우저에서 지원됩니다. Internet Explorer 10에서는 CSSOM 뷰 모듈지정된 대로 미디어 쿼리 수신기를 추가로 지원합니다.

가장 일반적인 미디어 쿼리 형식 중 하나는 다음과 같습니다.

@media all and ( media_feature ) [and ( media_feature ) ] { styles }

이 경우 media_feature는 유효한 값으로 설정된 지원되는 미디어 기능일 수 있습니다. 선택적으로 여러 미디어 기능을 추가하여 더 많은 조건을 포함할 수 있습니다. 페이지를 방문 중인 브라우저가 미디어 기능에 의해 설명된 프로필에 적합하면 styles이 콘텐츠에 적용됩니다.

리소스 종류제목
개발자 가이드CSS3 미디어 쿼리 모듈(Internet Explorer 9), 미디어 쿼리 수신기(Internet Explorer 10)
데모 CSS3 미디어 쿼리 및 미디어 쿼리 수신기
참조 CSS3 미디어 쿼리, 미디어 쿼리 수신기

 

미디어 쿼리는 또한 CSS 장치 적응, CSS 그리드 레이아웃, CSS 플렉스박스 레이아웃CSS 다중 열 레이아웃 같은 Internet Explorer 10의 새 레이아웃 기능과 조합하여 사용할 수 있습니다.

CSS 장치 적응

W3C  CSS 장치 적응 사양은 UA(사용자 에이전트) @viewport 규칙에서 제공하는 뷰포트의 크기를 다시 정의할 수 있는 방법을 제공합니다. @viewport 규칙(또는 in Internet Explorer 10의 @-ms-viewport 규칙)을 사용하면 사용자의 화면에 맞춰 페이지 크기가 조정되어야 하는 환경과 해상도를 지정할 수 있습니다. @-ms-viewport 규칙은 최초에 iOS의 Safari 브라우저용으로 구현되었지만 "viewport" HTML 메타 태그유사한 기능을 상호 운용성 있는 표준 기반 방식으로 제공하기 위해 개발되었습니다. 기본적으로 Internet Explorer 10에서는 창이 사이드 상태 또는 세로 모드일 때와 같이 창의 너비가 1024픽셀보다 좁으면 콘텐츠 크기를 자동으로 조정합니다. 다음 예제는 @-ms-viewport 규칙의 일반적인 사용을 보여 줍니다. 특히 이 선택기를 사용하여 작은 웹 페이지 버전을 사이드 상태에서 보기에 적합하도록 최적화할 수 있습니다.

@media screen and (max-width: 400px) {
  @-ms-viewport { width: 320px; }
  /* CSS for 320px width Modern taskbar layout goes here */
} 

너비가 400픽셀보다 작은 뷰포트(예: 사이드 상태)는 너비 320픽셀로 배치되고 적합한 크기로 조정됩니다. 아래 나열된, 작은 화면에 최적화된 CSS가 적용됩니다.

반응형 웹 디자인 패턴과 함께 사용하는 경우와 같이 이 자동 크기 조정이 필요하지 않거나 적합하지 않을 때는 device-width 키워드를 사용하여 페이지가 장치의 너비와 상관없이 잘 작동하도록 최적화됨을 나타낼 수 있습니다.


@-ms-viewport { width: device-width; }

CSS 장치 적응 사양은 현재 W3C에서 초안을 작성하는 중이며 공급업체 접두사가 붙은 형태(@-ms-viewport)로 Internet Explorer 10에서 부분적으로 지원됩니다.

리소스 종류제목
개발자 가이드 장치 적응
데모Make it Snappy!
참조 장치 적응

 

CSS 그리드 레이아웃

CSS3(CSS 스타일 시트 Level 3) 그리드 레이아웃은 Internet Explorer 10의 새로운 기능으로, 부동 또는 스크립트를 사용할 때보다 더 폭넓은 레이아웃 유연성을 제공합니다. 그리드 레이아웃을 사용하면 고정된 공간, 브라우저 창 내에서 사용 가능한 공간, 또는 둘의 조합을 기반으로 웹 페이지의 주 영역 공간을 분할할 수 있습니다. 또한 명시적으로 콘텐츠 구조를 정의하지 않고 열과 행에 요소를 정렬할 수 있으므로 그리드 레이아웃을 만드는 것이 HTML이나 CSS 테이블보다 더 유연한 선택이 될 수 있습니다. 그리드 레이아웃을 미디어 쿼리와 함께 사용하면 장치 폼 팩터, 방향, 해상도 등의 변경에 맞춰 레이아웃을 더욱 원활하게 조정할 수 있습니다.

CSS 그리드 레이아웃 사양은 현재 W3C에서 초안을 작성하는 중이며 공급업체 접두사가 붙은 형태로 Internet Explorer 10에서 부분적으로 지원됩니다. 지원되는 속성의 전체 목록은 MSDN에서 그리드 레이아웃을 참조하세요. 그리드 레이아웃 사양은 아직 개발 중이므로 Internet Explorer 10의 지원은 사양에서 설계한 내용과 정확히 일치하지 않을 수 있습니다.

여기에 간단한 그리드 레이아웃의 사용 예제가 있습니다. 미디어 쿼리와 그리드 레이아웃을 사용하여 가로 또는 세로 방향 어느 쪽이든 웹 페이지 레이아웃이 최적화되도록 구성할 수 있습니다. 세로 방향에서는 브라우저 창의 높이가 너비보다 크고, 가로 방향에서는 브라우저 창의 너비가 높이보다 큽니다.

다음 페이지 레이아웃은 방향에 따라 변경되도록 구성되어 있습니다. 가로 방향에서는 사용 가능한 가로 공간을 최대한 활용하도록 페이지 요소가 정렬됩니다. 세로 방향에서는 사용 가능한 가로 공간을 최대한 활용할 수 있도록 가로 방향일 때 가로로 확장될 수 있는 페이지 요소가 페이지의 위쪽으로 이동합니다. 페이지 레이아웃이 장치 자체의 방향에 따라 변경되므로, 이 동작은 새 Windows UI의 Internet Explorer에 특히 적합합니다.

이 스크린샷은 데스크톱용 Internet Explorer에서 가로 모드의 페이지를 보여 줍니다.

그리드 레이아웃이 사용된 웹 페이지의 가로 방향 스크린샷

페이지의 방향을 세로로 변경하면 레이아웃이 다음과 같이 바뀝니다.

세로 방향에 맞춰 창이 다시 정렬된 동일한 페이지의 스크린샷

유사한 그리드 레이아웃을 보려면 CSS 그리드를 사용하여 적응 레이아웃을 만드는 방법을 참조하세요.

리소스 종류제목
개발자 가이드 그리드 레이아웃
데모The Grid System, Gridddle
샘플CSS 그리드 오버레이 샘플
참조 그리드 레이아웃

 

CSS 유연한 상자 레이아웃

CSS 그리드 레이아웃과 유사하게, CSS 유연한 상자("플렉스박스") 레이아웃을 사용하면 페이지의 레이아웃에 따라 메뉴 및 도구 모음 같은 페이지 요소의 배열을 바꾸고, 크기를 조정하고, 방향을 변경할 수 있습니다. 플렉스박스는 복잡한 웹 페이지의 콘텐츠를 쉽게 정렬할 수 있는 강력한 도구입니다.

CSS 유연한 상자 레이아웃 모듈은 현재 W3C(World Wide Web Consortium)에서 초안을 작성하는 중이며 공급업체 접두사가 붙은 형태로 Internet Explorer 10에서 부분적으로 지원됩니다. 지원되는 속성의 전체 목록은 MSDN에서 유연한 상자("플렉스박스") 레이아웃을 참조하세요.

다음은 플렉스박스 사용에 대한 간단한 예제입니다. 이 예제Internet Explorer 샘플 갤러리에서 사용할 수 있으며 웹 페이지의 레이아웃에 따라 크기가 변경되는 도구 모음을 만드는 방법을 보여 줍니다. 다음은 페이지가 가로 모드일 때 도구 모음의 이미지입니다.

플렉스박스 레이아웃을 사용하여 단추가 정렬된 녹색 가로 방향 도구 모음

여기서 몇 가지 작업이 수행됩니다.

  • 도구 모음은 플렉스박스 레이아웃 모드에서 배치됩니다(display: -ms-flexbox;).
  • 도구 모음 단추는 —각 단추 사이의 여유 공간이 균등하게 배분되도록 설정됩니다(-ms-flex-pack: justify;).
  • 재생 단추는 다른 단추보다 더 많은 공간을 차지하도록 설정됩니다(-ms-flex: 3 1 100px;).
  • 볼륨 크게볼륨 작게 단추는 플렉스박스 안에 있으며 아래위로 나란히 표시되도록 설정됩니다(-ms-flex-direction: column;).

웹 페이지가 가로 모드인 경우 도구 모음의 레이아웃은 새 크기를 최대한 활용할 수 있도록 변경됩니다.

플렉스박스 레이아웃을 사용하여 단추가 다시 정렬된 동일한 녹색 세로 도구 모음

이 작업은 미디어 쿼리(@media (orientation:portrait))를 사용하여 수행되며 다음과 같은 동작을 발생시킵니다.

  • 도구 모음은 세로로 표시되도록 설정됩니다(-ms-flex-direction: column;).
  • 볼륨 크게볼륨 작게 단추는 다시 플렉스박스 안에 있으며 서로 나란히 표시되도록 설정됩니다(-ms-flex-direction: row;).
  • 뒤로앞으로 단추에 더 높은 그룹 서수가 지정되었습니다(-ms-flex-order: 2). 이는 뒤로 및 앞으로 단추는 암시적으로 순서 그룹 1에 있으므로, DOM(Document Object Model) 순서로는 뒤로 단추가 재생 단추 앞에 표시되더라도 세로 도구 모음에서는 재생 및 볼륨 단추 뒤에 표시됨을 의미합니다.

전체 샘플을 보려면 Internet Explorer 샘플 갤러리에서 CSS 플렉스박스를 참조하세요.

리소스 종류제목
개발자 가이드 유연한 상자("플렉스박스") 레이아웃
샘플CSS 플렉스박스
참조 유연한 상자("플렉스박스") 레이아웃

 

CSS 다중 열 레이아웃

Internet Explorer 10에는 콘텐츠를 하나의 콘텐츠 상자에 넣는 대신 여러 열 상자에 분포되도록 할 수 있는 CSS3 다중 열 레이아웃이 도입되었습니다. 이제 다양한 화면 크기와 해상도에서 쉽게 읽을 수 있는 신문 형식의 열을 만들 수 있습니다.

다중 열 레이아웃이 지원된다는 것은 다음을 지정할 수 있다는 의미입니다.

  • 열의 너비(column-width, 단독으로 설정될 경우 지정된 너비를 가진 일정 수만큼의 열이 사용 가능한 공간에 딱 맞게 들어간다는 의미).
  • 요소에 필요한 열 수(column-count)
  • 옵션: 열 사이 간격 및 규칙(column-gapcolumn-rule 속성)
  • 열 간 나누기 동작(break 속성)
  • 열 확장(column-span)
  • 열 간 콘텐츠 분산(column-fill)

CSS 다중 열 레이아웃 모듈은 현재 W3C 후보 권고안이며 공급업체 접두사 없이 Internet Explorer 10에서 부분적으로 지원됩니다. 지원되는 속성의 전체 목록은 MSDN에서 다중 열 레이아웃을 참조하세요.

리소스 종류제목
개발자 가이드 CSS3 다중 열 레이아웃
데모트위터 칼럼
샘플CSS 다중 열 레이아웃 샘플

 

관련 항목

적응 웹 사이트 디자인
적응 입력 처리를 위한 기능

 

 

표시:
© 2014 Microsoft. All rights reserved.