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

다중 열 레이아웃

Internet Explorer 10은 물론 Windows 8의 JavaScript를 사용하는 Windows 스토어 앱에서도 새롭게 CSS 다중 열 레이아웃 모듈을 지원합니다. 이 글을 쓰는 시점에 다중 열 레이아웃 모듈은 W3C(World Wide Web 컨소시엄) 후보 권고안입니다. 다중 열 레이아웃을 사용하면 콘텐츠가 여러 열로 흐르며 각 열 사이에 간격과 괘선(옵션)이 사용됩니다. 브라우저 창의 크기에 따라 열의 수를 조정할 수도 있습니다.

W3C에서는 다중 열 요소를, column-width 또는 column-count 속성이 "auto"로 설정되지 않아 다중 열 레이아웃용 컨테이너 역할을 하는 요소라고 정의합니다. 다중 열 레이아웃에는 열 상자가 있는데, 이 상자는 콘텐츠 상자와 콘텐츠 중간에 해당하는 새로운 컨테이너 유형으로 정의됩니다. 열 상자에는 이 있으며, 행은 다중 열 요소의 방향에 따라 정렬됩니다. 모든 열 상자에는 열 높이열 너비가 있습니다. 인접한 열 상자는 열 간격으로 구분되며, 열 간격에는 선택적으로 열 괘선을 포함할 수 있습니다.

열 너비 및 개수 지정

적어도 다중 열 요소 내 열의 너비는 지정해야 합니다. Internet Explorer 10은 지정된 값보다 너비가 작지 않은 열을 가능한 개수만큼 브라우저 창에 표시합니다. 열 너비를 지정하려면 다음 속성을 사용합니다.

속성설명

column-width

다중 열 요소에서 열의 최적 너비를 지정합니다.

이 속성에 사용할 수 있는 값은 다음과 같습니다.

auto

최적 열 너비가 다중 열 요소의 다른 속성 값(예: column-count 속성)에 의해 결정됨을 나타냅니다. 기본값입니다.

<length>

CSS 값 및 단위 참조(영문)에 지정된 상대 또는 절대 길이 값입니다.

 

예를 들어 다음 선택기는 column-width 속성을 추가하고 200픽셀로 설정했습니다. 이 경우 Internet Explorer 10은 너비가 200픽셀 이상인 열을 가능한 개수만큼 브라우저 창에 채웁니다.


<style type="text/css">
#multicol1 {
  column-width: 200px;
}
</style>


이 선택기가 큰 텍스트 블록에 적용된 경우를 보세요. 이 페이지를 정확하게 렌더링하려면 Internet Explorer 10 또는 접두사가 없는 CSS3(Cascading Style Sheets, Level 3) 다중 열 속성과 호환되는 브라우저가 필요합니다.

필요한 다중 열 요소의 열 수를 지정할 수도 있습니다. 열 수를 지정하려면 다음 속성을 사용합니다.

속성설명

column-count

다중 열 요소의 최적 열 수를 지정합니다.

이 속성에 사용할 수 있는 값은 다음과 같습니다.

auto

열 수가 다중 열 요소의 다른 속성 값(예: column-width 속성)에 의해 결정됨을 나타냅니다. 기본값입니다.

<integer>

열 수를 지정합니다.

 

예를 들어 다음 선택기는 column-count 속성을 추가하고 "2"로 설정했습니다. 이 경우 Internet Explorer 10은 정확히 두 개의 열을 브라우저 창에 채웁니다.


<style type="text/css">
#multicol1 {
  column-count: 2;
}
</style>


이 선택기가 큰 텍스트 블록에 적용된 경우를 보세요. 이 페이지를 정확하게 렌더링하려면 Internet Explorer 10 또는 접두사가 없는 CSS3 다중 열 속성과 호환되는 브라우저가 필요합니다.

다음 단축형 속성을 사용하여 열 너비와 개수를 표현할 수도 있습니다.

속성설명

columns

다중 열 요소의 column-widthcolumn-count 속성 값을 지정하는 단축형 값입니다.

 

이 속성의 구문은 다음과 같습니다.

columns: <column-width> <column-count>;

다음 구문도 유효합니다.

columns: <column-count> <column-width>;

정수만 지정하면 column-widthauto로 설정되고 column-count는 정수로 설정됩니다. 길이 값만 지정하면 column-width는 길이 값으로 설정되고 column-countauto로 설정됩니다. auto만 지정하면 column-widthcolumn-count가 모두 auto로 설정됩니다.

예를 들어 다음 선택기는 columns 속성을 추가하고 "auto 12em"과 같도록 설정했습니다. 이 경우 다중 열 요소에서 column-width는 12em이 되고 column-countauto가 됩니다.


<style type="text/css">
#multicol3 {
  columns: auto 12em;
}
</style>


이 선택기가 큰 텍스트 블록에 적용된 경우를 보세요. 이 페이지를 정확하게 렌더링하려면 Internet Explorer 10 또는 접두사가 없는 CSS3 다중 열 속성과 호환되는 브라우저가 필요합니다.

열 간격 및 궤선 지정

열 간격과 열 궤선은 다중 열 요소의 열 사이에 전체 길이로 배치됩니다. 열 간격은 읽기 쉽도록 열 사이에 공백을 만듭니다. 열 궤선은 열 간격 가운데에 그려지며 두 열에 모두 콘텐츠가 있는 열 사이에만 그려집니다.

열 간격과 궤선을 지정하는 속성은 다음과 같습니다.

속성설명

column-gap

다중 열 요소에서 열 사이의 간격 너비를 지정합니다.

이 속성에 사용할 수 있는 값은 다음과 같습니다.

normal

기본 너비는 1em입니다.

<length>

CSS 값 및 단위 참조(영문)에 지정된 상대 또는 절대 길이 값입니다.

column-rule-color

다중 열 요소에서 모든 열 궤선의 색을 지정합니다. 이 속성은 임의의 지원되는 색 값으로 설정할 수 있습니다.

column-rule-style

다중 열 요소에서 모든 열 궤선의 스타일을 지정합니다. 이 속성은 border-style 속성과 동일한 값을 허용합니다.

column-rule-width

다중 열 요소에서 모든 열 궤선의 너비를 지정합니다. 이 속성은 border-width 속성과 동일한 값을 허용합니다.

column-rule

다중 열 요소의 column-rule-width, column-rule-stylecolumn-rule-color 속성 값을 지정하는 단축형 값입니다.

이 속성의 구문은 다음과 같습니다.

column-rule: <column-rule-width> <column-rule-style> <column-rule-color>;

 

다음은 선택기 내 이러한 여러 속성의 예제입니다.


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1em;
  column-rule-style: solid;
  column-rule-color: black;
}
</style>


이 경우 열 간격과 열 궤선의 너비가 모두 1em으로 지정되었습니다. 열 궤선은 단색 검정입니다. 이 선택기가 큰 텍스트 블록에 적용된 경우를 보세요. 이 페이지를 정확하게 렌더링하려면 Internet Explorer 10 또는 접두사가 없는 CSS3 다중 열 속성과 호환되는 브라우저가 필요합니다.

다음 column-rule 단축형 속성을 사용하여 이전 예제를 다음과 같이 표현할 수도 있습니다.


<style type="text/css">
#multicol4 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule: 1em solid black;
}
</style>


열 나누기 지정

콘텐츠를 여러 열에 나눠야 하는 경우를 지정할 수 있습니다. 이렇게 하면 콘텐츠가 단락, 섹션 등의 중간에서 나뉘지 않습니다. 열 나누기의 개념은 인쇄 시 페이지 나누기와 비슷하며, 사실상 거의 동일한 방식으로 CSS 스타일시트로 제어할 수 있습니다.

열 나누기를 제어하는 속성은 다음과 같습니다.

속성설명

break-before

다중 열 요소에서 콘텐츠 블록 앞에 오는 열 나누기 동작을 지정합니다.

이 속성은 page-break-before 속성과 동일한 값 및 다음 값을 허용합니다.

page

생성된 상자 앞에서 항상 페이지 나누기를 강제로 적용합니다.

column

생성된 상자 앞에서 항상 열 나누기를 강제로 적용합니다.

avoid-page

생성된 상자 앞에서 페이지 나누기를 적용하지 않습니다.

avoid-column

생성된 상자 앞에서 열 나누기를 적용하지 않습니다.

break-after

다중 열 요소에서 콘텐츠 블록 뒤에 오는 열 나누기 동작을 지정합니다.

이 속성은 page-break-after 속성과 동일한 값 및 다음 값을 허용합니다.

page

생성된 상자 뒤에서 항상 페이지 나누기를 강제로 적용합니다.

column

생성된 상자 뒤에서 항상 열 나누기를 강제로 적용합니다.

avoid-page

생성된 상자 뒤에서 페이지 나누기를 적용하지 않습니다.

avoid-column

생성된 상자 뒤에서 열 나누기를 적용하지 않습니다.

break-inside

다중 열 요소의 콘텐츠 블록 내에서 발생하는 열 나누기 동작을 지정합니다.

이 속성은 page-break-inside 속성과 동일한 값 및 다음 값을 허용합니다.

avoid-page

생성된 상자 내에서 페이지 나누기를 적용하지 않습니다.

avoid-column

생성된 상자 내에서 열 나누기를 적용하지 않습니다.

 

다음은 선택기 내 이러한 여러 속성의 예제입니다.


<style type="text/css">
#multicol5 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol5 h2 {
  column-span: all;
  background: lightgreen;
}
#multicol5 blockquote {
  break-inside: avoid-column;
}
</style>


이 예제에서 모든 h2 요소 앞에는 열 나누기와 2em 여백이 있고, blockquote 요소 내에는 열 나누기를 표시할 수 없습니다. 이 선택기가 큰 텍스트 블록에 적용된 경우를 보세요. 이 페이지를 정확하게 렌더링하려면 Internet Explorer 10 또는 접두사가 없는 CSS3 다중 열 속성과 호환되는 브라우저가 필요합니다.

열 스패닝 지정

여러 열에 걸쳐 있을 콘텐츠 블록을 지정할 수 있습니다. 여러 열에 걸쳐 있는 요소는 실제로 스패닝 전 콘텐츠와 스패닝 후 콘텐츠 사이의 나누기 역할을 합니다. 열 스패닝을 제어하는 속성은 다음과 같습니다.

속성설명

column-span

다중 열 요소에서 콘텐츠 블록이 걸쳐 있는 열 수를 지정합니다.

이 속성에 사용할 수 있는 값은 다음과 같습니다.

all

콘텐츠 블록이 페이지의 모든 열에 걸쳐 있습니다. 콘텐츠 블록보다 먼저 선언된 모든 콘텐츠는 콘텐츠 블록 앞에 표시됩니다.

"1"

기본값입니다. 콘텐츠 블록이 여러 열에 걸쳐 있지 않습니다.

 

다음은 선택기 내 이 속성의 예제입니다.


<style type="text/css">
#multicol6 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
}
#multicol6 h2 {
  column-span: all;
  background: lightgreen;
}
</style>


이 경우 모든 h2 요소가 모든 열에 걸쳐 있으며 연한 녹색 배경이 있습니다.

이 선택기가 큰 텍스트 블록에 적용된 경우를 보세요. 이 페이지를 정확하게 렌더링하려면 Internet Explorer 10 또는 접두사가 없는 CSS3 다중 열 속성과 호환되는 브라우저가 필요합니다.

열 콘텐츠 균형 조정

열 콘텐츠의 균형을 조정할지, 즉 열 길이의 차이를 최소화할지 여부를 지정할 수 있습니다. 그렇지 않으면 열이 순서대로 채워지며 서로 다른 길이를 갖습니다.

열 채우기를 제어하는 속성은 다음과 같습니다.

속성설명

column-fill

다중 열 요소의 열 길이가 콘텐츠 흐름의 영향을 받는 방식을 지정합니다.

이 속성에는 다음 키워드 값을 사용할 수 있습니다.

balance

열 높이가 다른 열 속성 값에 따라 가능한 한 균형을 이루도록 열이 순서대로 채워집니다.

auto

기본값입니다. 열 길이가 다른 열 속성 값에 따라 서로 다를 수 있도록 열이 순서대로 채워집니다.

또한 열 균형 조정은 orphanswidows 속성 값(설정된 경우)에 종속됩니다.

 

다음은 선택기 내 이 속성의 예제입니다.


<style type="text/css">
#multicol7 {
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
  column-fill: balance;
}
</style>


이 경우 column-fill 속성이 balance로 설정되었으며 열 길이가 가능한 한 균형을 이룹니다.

이 선택기가 큰 텍스트 블록에 적용된 경우를 보세요. 이 페이지를 정확하게 렌더링하려면 Internet Explorer 10 또는 접두사가 없는 CSS3 다중 열 속성과 호환되는 브라우저가 필요합니다.

API 참조

Multi-column Layout

샘플 및 자습서

CSS 다중 열 레이아웃 샘플
적응 웹 사이트 디자인

Internet Explorer 테스트 드라이브 데모

트위터 칼럼
실습: 다중 열 레이아웃

IEBlog 게시물

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

사양

CSS 다중 열 레이아웃 모듈

 

 

표시:
© 2014 Microsoft