CSS3 Columns

  • 리비전 슬러그: CSS3_Columns
  • 리비전 제목: CSS3 Columns
  • 리비전 아이디: 198301
  • 제작일시:
  • 만든이: Sebuls
  • 현재 리비전인가요?
  • 댓글 /* 추가 레퍼런스 */

리비전 내용

개요

라인이 너무 길면 독자들은 읽는 데 어려움을 갖게 됩니다. 즉, 한 라인의 끝에서 다음 라인의 처음으로 눈을 움직이는데 너무 오랜 시간이 걸리게 되면, 독자는 자신이 읽고있던 라인을 놓치게 되는 것입니다. 따라서 넓은 화면의 잇점을 최대화 하기 위해서 작가는, 신문에서 처럼, 일정한 폭의 컬럼을 나란히 배치해야만 합니다. 불행하게도 CSS 와 HTML으론 컬럼의 단락(break)을 지정된 지점에서만 가능하게 하거나, 아니면 텍스트에 하용되는 마크업을 과도하게 한정시키거나, 아니면 굉장히 강력한 스크립트를 사용하지 않고 서 이를 실현하는 것이 불가능합니다.

A CSS3 draft에선 이런 기능을 지원할 새로운 CSS 속성을 제안하였습니다. Firefox 1.5와 그 이후 버전에는 이러한 기능속성들중 일부분이 draft에 기술된 바와 같이 (아래 설명된 예외사항 하나를 제외하고) 작동하도록 구현되어 있습니다.

Robert O'Callahan's blog에선 CSS 컬럼이 사용되고 있습니다; Firefox 1.5 빌드로 확인해 보세요.

컬럼 사용

컬럼 수와 폭

두개의 CSS 속성들이 컬럼을 사용할지, 한다면 얼마나 많은 컬럼들을 보일지를 제어합니다: -moz-column-count 그리고 -moz-column-width.

-moz-column-count는 컬럼수를 특정 숫자로 세팅합니다. 예를 들면,

<div style="-moz-column-count:2">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

이 예문은 내용물을 두 컬럼으로 디스플레이 할것입니다. (만일 Firefox 1.5 나 그 이후 버전을 사용한신다면):

In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

-moz-column-width는 원하는 최소 컬럼 폭을 세팅합니다. 만일 -moz-column-count가 함께 세팅되어 있지 않을 경우, 브라우저는 자동으로 사용할 여분의 폭에 들어찰 만큼 많은 컬럼을 만들어 낼것 입니다.

<div style="-moz-column-width:20em;">In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>

은 이렇게 디스플레이 됩니다:

In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

정확한 세부 설명은 the CSS3 draft에 기술되어 있습니다.

멀티 컬럼 블럭에서, 내용물을 자동으로 한 컬럼으로부터 다름 컬럼으로 필요한 만큼 흐르듯 채워집니다. 모든 HTML, CSS 그리고 DOM 기능들도 컬럼들 내에서 지원되며, 에디팅과 프린팅도 지원 됩니다.

높이 밸런싱

CSS3 draft는 컬럼 높이가 밸런싱을 갖추어야 한다고 규정하고 있습니다. 즉, 브라우저가 자동적으로 최대 컬럼 높이를 세팅해서, 각 컬럼의 내용물의 높이가 근사적으로 동일하게 하는 것입니다. Firefox는 이러한 기능을 실행합니다.

그러나, 어떤 상황에서는 컬럼들의 최대 높이를 명시적으로 규정한 뒤, 내용물을 첫 컬럼부터 시작해서 필요한 만큼의 컬럼들을 생성해 나가며 - 오른쪽으로 넘쳐버릴 수도 있습니다 - 레이아웃하는 것이 더 유용할 수도 있습니다. 예로 http://iht.com/ 에 있는 기사들이 이런 방식을 취하고 있습니다. 따라서 우리는 draft를 확장해서 만일 CSS height속성이 멀티컬럼 블럭에 대해서 세팅되어 있을 경우, 각 컬럼이 새로운 컬럼이 더해지기 전까진 그 높이까지는 커지되 더이상 커지지는 못하도록 해 놓았습니다. 이 모드는 레리아웃하는데 훨씬더 효율적이기도 합니다.

컬럼 갭

디폴트로 각 컬럼은 다음컬럼에 바로 인접해 있습니다. 보통 이런 레이아웃은 보기 좋지 않습니다. 상황을 개선키위해 컬럼내부에 CSS 패딩(padding)을 사용할 수 있습니다만, 멀티컬럼 블럭에 -moz-column-gap속성을 부여하는 것이 더 쉬울때도 있습니다:

<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for
the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
will be accepted for Firefox 1.5 Beta 1, which is set for release on
Thursday.</div>
In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.

전체를 위해서

-moz-column 속성은 컬럼을 지원하지 않는 브라우저에선 그냥 무시됩니다. 따라서, 이런 브라우저에선 하나의 컬럼으로 그리고 Firefox 1.5에선 멀티 컬럼으로 사용할 레이아웃을 생성하는데 상대적으로 쉽게 이용할 수 있습니다.

결론

CSS 컬럼은 웹개발자들이 화면이라는 부동산에서 최대의 이익을 끌어내게 할 새로운 기초 레이아웃이라고 할 수 있습니다. 창의적인 개발자들은 이러한 컬럼기능을, 그중에서도 특히 자동 밸런싱 기능, 많은 곳에 적용할 수 있을 것입니다.

추가 레퍼런스

{{ languages( { "fr": "fr/Colonnes_CSS3", "pl": "pl/Kolumny_CSS3", "en": "en/CSS3_Columns" } ) }}

리비전 소스

<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94"> 개요 </h3>
<p>라인이 너무 길면 독자들은 읽는 데 어려움을 갖게 됩니다. 즉, 한 라인의 끝에서 다음 라인의 처음으로 눈을 움직이는데 너무 오랜 시간이 걸리게 되면, 독자는 자신이 읽고있던 라인을 놓치게 되는 것입니다. 따라서 넓은 화면의 잇점을 최대화 하기 위해서 작가는, 신문에서 처럼, 일정한 폭의 컬럼을 나란히 배치해야만 합니다. 불행하게도 CSS 와 HTML으론 컬럼의 단락(break)을 지정된 지점에서만 가능하게 하거나, 아니면 텍스트에 하용되는 마크업을 과도하게 한정시키거나, 아니면 굉장히 강력한 스크립트를 사용하지 않고 서 이를 실현하는 것이 불가능합니다. </p><p><a class="external" href="http://www.w3.org/TR/css3-multicol/">A CSS3 draft</a>에선 이런 기능을 지원할 새로운 CSS 속성을 제안하였습니다. Firefox 1.5와 그 이후 버전에는 이러한 기능속성들중 일부분이 draft에 기술된 바와 같이 (아래 설명된 예외사항 하나를 제외하고) 작동하도록 구현되어 있습니다. </p><p><a class="external" href="http://weblogs.mozillazine.org/roc/">Robert O'Callahan's blog</a>에선 CSS 컬럼이 사용되고 있습니다; Firefox 1.5 빌드로 확인해 보세요.
</p>
<h3 id=".EC.BB.AC.EB.9F.BC_.EC.82.AC.EC.9A.A9" name=".EC.BB.AC.EB.9F.BC_.EC.82.AC.EC.9A.A9"> 컬럼 사용 </h3>
<h4 id=".EC.BB.AC.EB.9F.BC_.EC.88.98.EC.99.80_.ED.8F.AD" name=".EC.BB.AC.EB.9F.BC_.EC.88.98.EC.99.80_.ED.8F.AD"> 컬럼 수와 폭 </h4>
<p>두개의 CSS 속성들이 컬럼을 사용할지, 한다면 얼마나 많은 컬럼들을 보일지를 제어합니다: <code>-moz-column-count</code> 그리고 <code>-moz-column-width</code>.
</p><p><code>-moz-column-count</code>는 컬럼수를 특정 숫자로 세팅합니다. 예를 들면,
</p>
<pre>&lt;div style="-moz-column-count:2"&gt;In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.&lt;/div&gt;
</pre>
<p>이 예문은 내용물을 두 컬럼으로 디스플레이 할것입니다. (만일 Firefox 1.5 나 그 이후 버전을 사용한신다면):
</p>
<div style="-moz-column-count:2">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
<p><code>-moz-column-width</code>는 원하는 최소 컬럼 폭을 세팅합니다. 만일 <code>-moz-column-count</code>가 함께 세팅되어 있지 않을 경우, 브라우저는 자동으로 사용할 여분의 폭에 들어찰 만큼 많은 컬럼을 만들어 낼것 입니다.
</p>
<pre>&lt;div style="-moz-column-width:20em;"&gt;In preparation for the release of Mozilla
Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific
Daylight Time (UTC -0700). After this point, no more checkins will be accepted
for Firefox 1.5 Beta 1, which is set for release on Thursday.&lt;/div&gt;
</pre>
<p>은 이렇게 디스플레이 됩니다:
</p>
<div style="-moz-column-width:20em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
<p>정확한 세부 설명은 <a class="external" href="http://www.w3.org/TR/2001/WD-css3-multicol-20010118">the CSS3 draft</a>에 기술되어 있습니다.
</p><p>멀티 컬럼 블럭에서, 내용물을 자동으로 한 컬럼으로부터 다름 컬럼으로 필요한 만큼 흐르듯 채워집니다. 모든 HTML, CSS 그리고 DOM 기능들도 컬럼들 내에서 지원되며, 에디팅과 프린팅도 지원 됩니다.
</p>
<h4 id=".EB.86.92.EC.9D.B4_.EB.B0.B8.EB.9F.B0.EC.8B.B1" name=".EB.86.92.EC.9D.B4_.EB.B0.B8.EB.9F.B0.EC.8B.B1"> 높이 밸런싱 </h4>
<p>CSS3 draft는 컬럼 높이가 밸런싱을 갖추어야 한다고 규정하고 있습니다. 즉, 브라우저가 자동적으로 최대 컬럼 높이를 세팅해서, 각 컬럼의 내용물의 높이가 근사적으로 동일하게 하는 것입니다. Firefox는 이러한 기능을 실행합니다.
</p><p>그러나, 어떤 상황에서는 컬럼들의 최대 높이를 명시적으로 규정한 뒤, 내용물을 첫 컬럼부터 시작해서 필요한 만큼의 컬럼들을 생성해 나가며 - 오른쪽으로 넘쳐버릴 수도 있습니다 - 레이아웃하는 것이 더 유용할 수도 있습니다. 예로 <a class=" external" href="http://iht.com/" rel="freelink">http://iht.com/</a> 에 있는 기사들이 이런 방식을 취하고 있습니다. 따라서 우리는 draft를 확장해서 만일 CSS <code>height</code>속성이 멀티컬럼 블럭에 대해서 세팅되어 있을 경우, 각 컬럼이 새로운 컬럼이 더해지기 전까진 그 높이까지는 커지되 더이상 커지지는 못하도록 해 놓았습니다. 이 모드는 레리아웃하는데 훨씬더 효율적이기도 합니다.
</p>
<h4 id=".EC.BB.AC.EB.9F.BC_.EA.B0.AD" name=".EC.BB.AC.EB.9F.BC_.EA.B0.AD"> 컬럼 갭 </h4>
<p>디폴트로 각 컬럼은 다음컬럼에 바로 인접해 있습니다. 보통 이런 레이아웃은 보기 좋지 않습니다. 상황을 개선키위해 컬럼내부에 CSS 패딩(padding)을 사용할 수 있습니다만, 멀티컬럼 블럭에 <code>-moz-column-gap</code>속성을 부여하는 것이 더 쉬울때도 있습니다:
</p>
<pre>&lt;div style="-moz-column-width:20em; -moz-column-gap:2em;"&gt;In preparation for
the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight
at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins
will be accepted for Firefox 1.5 Beta 1, which is set for release on
Thursday.&lt;/div&gt;
</pre>
<div style="-moz-column-width:20em; -moz-column-gap:2em;">In preparation for the release of Mozilla Firefox 1.5 Beta 1, the tree will be locked down tonight at 11:59pm Pacific Daylight Time (UTC -0700). After this point, no more checkins will be accepted for Firefox 1.5 Beta 1, which is set for release on Thursday.</div>
<h4 id=".EC.A0.84.EC.B2.B4.EB.A5.BC_.EC.9C.84.ED.95.B4.EC.84.9C" name=".EC.A0.84.EC.B2.B4.EB.A5.BC_.EC.9C.84.ED.95.B4.EC.84.9C"> 전체를 위해서 </h4>
<p>-moz-column 속성은 컬럼을 지원하지 않는 브라우저에선 그냥 무시됩니다. 따라서, 이런 브라우저에선 하나의 컬럼으로 그리고 Firefox 1.5에선 멀티 컬럼으로 사용할 레이아웃을 생성하는데 상대적으로 쉽게 이용할 수 있습니다.
</p>
<h3 id=".EA.B2.B0.EB.A1.A0" name=".EA.B2.B0.EB.A1.A0"> 결론 </h3>
<p>CSS 컬럼은 웹개발자들이 화면이라는 부동산에서 최대의 이익을 끌어내게 할 새로운 기초 레이아웃이라고 할 수 있습니다. 창의적인 개발자들은 이러한 컬럼기능을, 그중에서도 특히 자동 밸런싱 기능, 많은 곳에 적용할 수 있을 것입니다.
</p>
<h3 id=".EC.B6.94.EA.B0.80_.EB.A0.88.ED.8D.BC.EB.9F.B0.EC.8A.A4" name=".EC.B6.94.EA.B0.80_.EB.A0.88.ED.8D.BC.EB.9F.B0.EC.8A.A4"> 추가 레퍼런스 </h3>
<ul><li> <a class=" external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a>
</li></ul>
{{ languages( { "fr": "fr/Colonnes_CSS3", "pl": "pl/Kolumny_CSS3", "en": "en/CSS3_Columns" } ) }}
Revert to this revision