정보
요청한 주제가 아래에 표시됩니다. 그러나 이 주제는 이 라이브러리에 포함되지 않습니다.

영역

CSS(Cascading Style Sheets) 영역은 Windows 8의 JavaScript를 사용하는 Windows 스토어 앱 및 Internet Explorer 10의 페이지 레이아웃 기능입니다. CSS 영역은 W3C(World Wide Web 컨소시엄)의 CSS 영역 사양에 정의되어 있으며, 현재 작업 초안 단계입니다. 개발자와 디자이너는CSS 영역을 사용해, 텍스트와 이미지의 단일 HTML 콘텐츠 스트림을 가져와서 표준 HTML 템플릿에 정의된 여러 개의 빈 컨테이너로 나눌 수 있습니다. HTML 템플릿은 원본 콘텐츠가 거의 없이 주로 빈 컨테이너로 구성되는 문서입니다. 이 빈 컨테이너는 들어오는 콘텐츠에 특정 레이아웃을 제공하도록 크기와 위치가 조정됩니다.

이렇게 하면 연속된 콘텐츠 스트림을 태블릿 사용 등에 더욱 적합한 레이아웃으로 재구성할 수 있습니다.

개발자는 단일 페이지에서 CSS 영역을 사용해 잡지나 신문에서 볼 수 있을 정도의 복잡한 콘텐츠 레이아웃을 개발할 수 있습니다. 여기서 동일한 콘텐츠 흐름의 여러 영역(텍스트, 관련 사진, 동영상 등)은 다른 기사나 광고 등 관련 없는 콘텐츠 요소 주변에 배치됩니다.

CSS 영역 구현

CSS 영역을 구현하려면 먼저 콘텐츠 스트림 역할을 할 HTML 파일이 필요합니다. 이 파일은 고유한 DOM(문서 개체 모델) 및 CSS 스타일을 포함하는 독립형 HTML 문서입니다. 다음 다이어그램에서 콘텐츠 스트림은 "content.html" 파일로 표현됩니다.

그런 다음 콘텐츠 스트림의 호스트 역할을 할 HTML 문서가 필요합니다. 이 호스트 문서 또는 마스터 페이지의 주요 용도는 CSS 영역의 크기와 위치를 조정하고, 콘텐츠 스트림이 흐르게 될 흐름 식별자를 정의하는 것입니다. 다음 다이어그램에서 마스터 페이지는 "master.html" 파일로 표현됩니다.

개념 “수식”을 보여 주는 다이어그램: 여러 프레임이 있는 master.html 파일과 단일 HTML 콘텐츠 스트림이 있는 content.html 파일의 조합은 스트림의 콘텐츠로 채워진 여러 프레임이 있는 master.html 파일과 같습니다.

완전히 렌더링된 마스터 페이지에는 스트림의 콘텐츠로 채워진 연결된 영역이 포함됩니다. 이렇게 나누는 것은 이해를 돕기 위한 것일 뿐이며 콘텐츠 스트림 문서의 DOM 구조에는 영향을 미치지 않습니다.

데이터 원본 만들기

CSS 영역이 데이터 원본에서 한 영역, 그 다음에 다른 영역 등으로 콘텐츠가 흐를 수 있게 하려면 두 개의 새 CSS 속성이 필요합니다. 콘텐츠 흐름의 개요를 작성하려는 경우 데이터 원본과 식별자가 모두 필요합니다. 먼저 별도의 HTML 문서에 로드할 데이터 원본을 iframe 요소에 배치합니다. 마스터 페이지에서 다음과 같은 고유 ID를 가진 iframe을 만듭니다.


<iframe id="flow1-data-source" src="content-source.html"></iframe>

-ms-flow-into 속성을 사용하여 데이터 원본을 지정하는 CSS 선택기를 만듭니다.


#flow1-data-source {
  -ms-flow-into: flow1;
}

-ms-flow-into 속성이 배치된 iframe 요소는 display 속성이 "none"으로 설정된 것처럼 작동합니다. iframe 요소는 렌더링되지 않으며 콘텐츠 조각이나 레이아웃에 참여하지 않습니다. 이 요소는 흐름을 만들 데이터 원본을 식별하는 데만 사용됩니다.

CSS 영역 컨테이너 만들기

바뀌지 않는 모든 요소는 CSS 영역 컨테이너로 사용될 수 있지만 일반적으로 div 요소가 이 용도로 사용됩니다.

CSS 영역 컨테이너를 만들려면 먼저 마스터 페이지에서 컨테이너로 사용하려는 요소에 다음과 같은 고유한 클래스 이름을 할당합니다.


<div class="flow1-container"></div>
<div class="flow1-container"></div>
<div class="flow1-container"></div>


-ms-flow-from 속성을 사용하여 콘텐츠 흐름을 수락할 데이터 원본을 지정하는 CSS 선택기를 만듭니다.


.flow1-container {
  -ms-flow-from: flow1;
}

CSS 영역 컨테이너로 지정된 요소의 콘텐츠는 마스터 페이지의 DOM 원본 순서대로 렌더링됩니다. 영역을 정적으로 정의하면 콘텐츠가 DOM에 정의된 컨테이너 요소에 조각화됩니다.

CSS 영역 확장

원본 순서에 독립적인 레이아웃 기능을 사용하여 더 복잡한 레이아웃 시나리오를 만들 수 있습니다. 예를 들어 새 그리드 맞춤 기능을 사용하여 복잡한 흐름 가능 레이아웃을 만들 수 있습니다. 예를 들어 다음 태그를 고려해 보세요.


<!DOCTYPE html>
<html lang="en-us">
<head>
<style type="text/css">
#data-source {
  -ms-flow-into: flow1;
}
.flow-container {
  -ms-flow-from: flow1;
}
#grid {
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;
  -ms-grid-rows: 384px 384px;
}
.A {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row-span: 2;
}
.B {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
}
.C {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}
.D {
  -ms-grid-row: 1;
  -ms-grid-column: 4;
}
.E {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-column-span: 3;
}
</style>
</head>
<body>
  <iframe id="data-source" src="content-source.html"></iframe>
  <div id="grid">
    <div id="region1" class="A flow-container"></div> 
    <div id="region2" class="B flow-container"></div>
    <div id="region3" class="C flow-container"></div> 
    <div id="region4" class="D flow-container"></div>
    <img class="E" src="image.png" />  
  </div>
</body>
</html>


이 태그는 콘텐츠가 다음 다이어그램에 표시된 대로 흐르게 합니다. 화살표는 콘텐츠 흐름 방향을 나타냅니다.

그리드 레이아웃 내의 프레임 간 콘텐츠 흐름을 보여 주는 다이어그램

처음 두 프레임과 마지막 두 프레임의 순서를 바꾸겠습니다.


<iframe id="data-source" src="content-source.html"></iframe>
<div id="region1" class="B flow-container"></div>
<div id="region2" class="A flow-container"></div> 
<div id="region3" class="C flow-container"></div>
<div id="region4" class="E flow-container"></div>
<img class="D" src="image.png" />

그러면 흐름이 다음 수정된 다이어그램에 표시된 대로 변경됩니다.

전환된 프레임이 포함된 그리드 레이아웃 내의 프레임 간 콘텐츠 흐름을 보여 주는 다이어그램. 각 프레임이 그리드 내의 다른 위치에 있지만 콘텐츠는 순서대로 흐릅니다.

이 경우 템플릿 태그를 크게 수정하거나 원본 콘텐츠의 DOM을 방해하지 않고 페이지 레이아웃을 시각적으로 지정할 수 있습니다.

기타 CSS 영역 시나리오

앞에서 살펴본 두 가지 예제 외에도 CSS 영역은 다른 여러 유용한 시나리오를 가능하게 합니다.

  • 현재 div이 꽉 차면 마스터 페이지에 새 div을 추가하여 동적으로 콘텐츠 영역을 만듭니다.
  • 사용자가 콘텐츠 문서를 수정할 수 있도록 하고 업데이트된 콘텐츠가 예상대로 재배치되게 합니다. 예를 들면, 사용자가 텍스트 크기를 늘릴 수 있으며, 이 경우 모든 콘텐츠가 표시되도록 각 div이 다시 생성됩니다.
  • 특정 콘텐츠 영역과 연결된 조각 범위에 액세스합니다.

API 참조

Regions

샘플 및 자습서

CSS 영역 샘플

Internet Explorer 테스트 드라이브 데모

실습: CSS3 영역

IEBlog 게시물

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

사양

CSS 영역 모듈 수준 3

 

 

표시:
© 2014 Microsoft