제외 사항

CSS 스타일시트 제외는 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱의 새로운 기능입니다. 이제 웹 작성자가 CSS 제외를 통해 텍스트를 줄 바꿈하여 요소를 완전히 둘러쌀 수 있으므로 기존의 부동 제한을 없앨 수 있습니다. 문서 흐름에서 서로의 위치를 기준으로 요소를 왼쪽이나 오른쪽에 부동 상태로 제한하는 대신 포함하는 블록의 상하좌우에서 지정된 거리에 CSS 제외를 배치할 수 있습니다.

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱에서 CSS 제외를 지원함에 따라 다음 이미지에 설명된 것과 같은 시나리오가 가능합니다. 여기에 보이는 앱은 Microsoft Word 또는 Adobe InDesign과 같은 전자 출판 응용 프로그램에서 페이지를 디자인하는 것과 유사하게 표시됩니다.

현재 위치 부동의 사용 샘플, 여기서 이미지는 텍스트 블록의 중간에 배치됨

또한 CSS 그리드, CSS 다중 열, CSS 플렉스박스 등 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱의 새로운 레이아웃 기능과 CSS 제외를 결합할 수 있습니다. CSS 제외는 W3C(World Wide Web 컨소시엄)의 CSS 제외 및 모양 초안에 정의되어 있습니다. 다음 하위 섹션에서는 CSS 제외 및 구현 방법에 대해 간단하게 설명합니다.

참고  CSS 제외는 임시 상태이기 때문에 Internet Explorer 10 및 JavaScript로 작성된 Windows 8의 Windows 스토어 앱에서 작업하려면 이 항목에 설명된 속성을 Microsoft 특정 공급업체 접두사인 "-ms-"와 함께 사용해야 합니다. 또한 CSS 제외 사양에 정의된 속성과 구문이 이 항목에 설명된 내용과 정확하게 일치하지 않을 수도 있습니다. 사양 개발이 진행 중이므로 이 내용은 변경될 수 있습니다.

정의된 제외 용어

참고  CSS 제외(이전의 "현재 위치 부동")의 구문이 이전 시험판에서 변경되었습니다.

제외에 대해 알아볼 때 CSS3 제외 사양의 정의 섹션에 정의되어 있는 다음 용어를 알면 도움이 됩니다. CSS 상자 모델과 관련된 용어를 아는 것도 도움이 됩니다.

제외 요소

-ms-wrap-flow 속성은 auto 이외의 계산된 값을 가진 경우 요소를 제외 요소로 설정합니다. 이 속성은 다음 섹션에 설명된 다양한 방법으로 제외 요소(제외)를 배치할 수 있으며, 인라인 콘텐츠가 부동 요소를 둘러싸는 방식과 유사한 방식으로 제외를 둘러싸도록 지정합니다.

제외 영역

제외 영역은 제외 요소를 둘러싼 인라인 흐름 콘텐츠를 제외하는 데 사용되는 영역입니다. CSS 상자 모델에서 제외 영역은 테두리 상자와 동등합니다. 현재 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱의 제외 영역은 항상 사각형입니다.

부동 영역

부동 영역은 부동 요소를 둘러싼 인라인 흐름 콘텐츠를 제외하는 데 사용되는 영역입니다. 기본적으로 부동 영역은 float 요소의 여백 상자입니다. 현재 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱의 제외 영역은 항상 사각형입니다.

콘텐츠 영역

콘텐츠 영역은 요소의 인라인 흐름 콘텐츠 레이아웃에 사용되는 영역입니다. 기본적으로 콘텐츠 영역은 콘텐츠 상자와 같습니다.

줄 바꿈 컨텍스트

요소의 줄 바꿈 컨텍스트는 제외 영역 컬렉션이며, 인라인 흐름 콘텐츠를 둘러싸는 데 사용됩니다. 요소는 콘텐츠 영역에서 줄 바꿈 컨텍스트를 뺀 부분에 해당하는 영역의 인라인 흐름 콘텐츠를 줄 바꿈합니다.

-ms-wrap-through 속성을 사용하여 구체적으로 다시 설정하지 않으면 요소는 컨테이너 블록의 줄 바꿈 컨텍스트를 상속합니다.

제외 요소

-ms-wrap-flow 속성은 요소를 제외 요소로 설정합니다.

속성설명

-ms-wrap-flow

이 속성에 유효한 키워드는 다음과 같습니다.

auto

초기값. 부동 요소의 경우 제외가 만들어집니다. 다른 모든 요소의 경우 제외가 만들어지지 않습니다.

-ms-wrap-side:auto 예제
both

인라인 흐름 콘텐츠가 제외의 모든 측면으로 흐를 수 있습니다.

-ms-wrap-side:both 예제
start

인라인 흐름 콘텐츠가 제외 영역의 시작 가장자리에서 줄 바꿈될 수 있지만 제외 영역의 끝 가장자리 뒤 영역은 비어 있어야 합니다.

-ms-wrap-side:left 예제
end

인라인 흐름 콘텐츠가 제외 영역의 끝 가장자리 뒤에서 줄 바꿈될 수 있지만 제외 영역의 시작 가장자리 앞 영역은 비어 있어야 합니다.

-ms-wrap-side:right 예제
maximum

인라인 흐름 콘텐츠가 주어진 줄에서 최대 공간을 사용할 수 있는 제외 영역의 측면에서 줄 바꿈될 수 있으며 제외 영역의 다른 쪽 측면은 비어 있어야 합니다.

clear

인라인 흐름 콘텐츠가 제외의 위쪽과 아래쪽에서만 줄 바꿈될 수 있으며 제외 상자의 시작 및 끝 가장자리까지의 영역은 비어 있어야 합니다.

 

-ms-wrap-flow 속성의 계산된 값이 auto인 경우 float 속성의 계산된 값이 none이 아니면 요소는 제외 요소가 되지 않습니다. 이 경우 요소는 clear 속성에 따라 컨테이너 블록의 줄 바꿈 컨텍스트와 요소를 둘러싼 콘텐츠 흐름에 테두리 상자를 적용합니다. 제외 요소가 콘텐츠 흐름에 미치는 영향에 대한 자세한 내용은 CSS3 제외 사양의 정의 섹션을 참조하세요.

제외 주위를 콘텐츠로 둘러싸기

-ms-wrap-through 속성은 콘텐츠가 제외 요소를 둘러싸는 방법을 지정합니다. 이 속성을 사용하여 요소의 효과를 제어할 수 있습니다. 예를 들어 한 콘텐츠 블록은 제외 요소를 둘러싸고 다른 콘텐츠 블록은 동일한 제외 요소를 교차하도록 할 수 있습니다.

속성설명

-ms-wrap-through

이 키워드는 다음과 같이 정의됩니다.

wrap

초기값. 요소가 부모 노드의 줄 바꿈 컨텍스트를 상속합니다. 하위 인라인 콘텐츠는 요소 외부에 정의된 제외를 둘러쌉니다.

none

요소가 부모 노드의 줄 바꿈 컨텍스트를 상속하지 않습니다. 하위 항목에는 요소 내부에 정의된 제외 모양만 적용됩니다.

 

내부 줄 바꿈 모양 오프셋

-ms-wrap-margin 속성은 다른 모양에서 내부 줄 바꿈 모양을 오프셋하는 데 사용되는 여백을 지정합니다.

속성설명

-ms-wrap-margin

제외 외부에서 인라인 흐름 콘텐츠 줄 바꿈을 오프셋합니다. -ms-wrap-margin 속성으로 만든 오프셋은 제외 외부에서의 오프셋입니다. 이 속성은 임의의 지원되는 길이 값으로 설정할 수 있습니다.

 

다음 섹션의 예제는 부동 녹색 div-ms-wrap-margin을 적용합니다.

CSS 제외 및 CSS 그리드

CSS 제외를 Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱의 새로운 CSS 그리드 기능과 함께 사용할 수도 있습니다. 예를 들어 다음 그림은 3×3 그리드 내의 제외를 보여 줍니다. 그리드에는 인라인 콘텐츠가 세 개의 행과 열에 모두 걸쳐 있는 div 요소 하나가 포함되어 있습니다. 제외는 행 2, 열 2의 그리드 셀에 배치되었습니다. 콘텐츠가 제외 주위로 흐릅니다.

그리드와 함께 사용된 현재 위치 부동의 사용 샘플, 여기서 이미지는 그리드에 배치되고 콘텐츠가 주위를 흐름

이 페이지를 보세요. 이 페이지를 올바르게 표시하려면 Internet Explorer 10이 필요합니다.

이 페이지의 태그는 다음과 같습니다.


<!DOCTYPE html>
<html>
<head>
  <title>CSS3 Exclusions Sample</title>
  <style type="text/css">
    .container {
      font-size: small;
      width: 98%;
      height: 100%;
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr 1fr;
      -ms-grid-rows: 1fr 1fr 1fr;
    }
    .exclusion {
      -ms-grid-row: 2;
      -ms-grid-column: 2;
      background-color: lime;
      -ms-wrap-flow: both;
      padding: 10px;
      -ms-wrap-margin: 15px;
    }
    .dummy_text {
      -ms-grid-row: 1;
      -ms-grid-column: 1;
      -ms-grid-column-span: 3;
      -ms-grid-row-span: 3;
    }
  </style>
</head>
<body>
  <div class="body">
    <h1>CSS3 Exclusions Sample</h1>
    <div class="container">
      <div class="exclusion">
        Exclusion positioned at row 2, column 2.
      </div>
      <div class="dummy_text">
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</body>
</html>


API 참조

Exclusions

샘플 및 자습서

CSS 제외 샘플

Internet Explorer 테스트 드라이브 데모

실습: 현재 위치 부동

IEBlog 게시물

IE10 Platform Preview 및 적응 레이아웃을 위한 CSS 기능

사양

CSS 제외 및 모양

 

 

표시:
© 2014 Microsoft